數據可視化系列教程之React組件使用技巧

語言: CN / TW / HK
在之前的兩篇FlyFish組件開發中,我們已經瞭解到了組件的構成和基本開發技巧,本次我們將詳細講解如果在飛魚平台上使用React組件。

組件導出

首先要明確的一點是,目前的FlyFish是無法直接使用React的組件。需要如下圖所示的辦法,將ReactComponent來包裹實現組件導出
 

數據獲取

  • props.data 若為每次render自動重新計算data可直接從props.data中獲取。為什麼這麼説的原因是: 數據掛載有一定的延遲性。
  • componentWillRecieveProps 當然每次data更新會觸發componentWillRecieveProps鈎子。若大家對每次數據更新都需計算邏輯可在此處監聽。
  • (loaded | dataChange) event 由於我們的組件被ReactComponent包裹產出。故在當前實例下的props中存在parent(即真實大屏組件)中使用事件通信來監聽事件變化。
  • props.parent.getData() 可以函數式的調用getData方法來獲取當前最新數據。

事件

若想直接在React組件中使用事件通信。這時需要藉助props.parent來執行。

defaultProp

若我們要提供組件切面來進行配置(props.options),推薦的做法是在包裹函數內設置static defaultOptions來初始化默認項。這些默認項相當於充當了React組件中的defaultProps。如果站在嚴謹的上,也可以二次包裝,在組件內部聲明defaultProps。

組件生命週期

這裏説的是低代碼平台獨有的一些生命週期_render、_draw。若當前你的代碼與React組件無直接交互, 可直接在包裹函數中正常編寫。若需要和React中的事件或者內部狀態進行邏輯耦合, 建議使用事件監聽來達到同樣的效果。基本所有的生命週期都會發射對應的事件。

開源福利

如果喜歡我們的項目,請不要忘記點擊下方代碼倉庫地址,在 GitHub / Gitee 倉庫上點個 Star,我們需要您的鼓勵與支持。此外,即刻參與 FlyFish 項目貢獻成為 FlyFish Contributor 的同時更有萬元現金等你來拿。
微信搜索 xiaoyuerwise 或掃描識別下方二維碼,備註【飛魚】加入 AIOps 社區飛魚開發者交流羣,與 FlyFish 項目 PMC 面對面交流。