数据可视化系列教程之 React 组件使用技巧

作者：云智慧AIOps社区

2022 年 9 月 06 日
新加坡
本文字数：855 字
阅读完需：约 3 分钟

在之前的两篇 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。