共计 1061 个字符，预计需要花费 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。
组件生命周期
这里说的是低代码平台独有的一些生命周期_render、_draw。若以后你的代码与 React 组件无间接交互, 可间接在包裹函数中失常编写。若须要和 React 中的事件或者外部状态进行逻辑耦合, 倡议应用事件监听来达到同样的成果。根本所有的生命周期都会发射对应的事件。
开源福利
如果喜爱咱们的我的项目，请不要遗记点击下方代码仓库地址，在 GitHub / Gitee 仓库上点个 Star，咱们须要您的激励与反对。此外，即刻参加 FlyFish 我的项目奉献成为 FlyFish Contributor 的同时更有万元现金等你来拿。
GitHub 地址：https://github.com/CloudWise-…
地址：https://gitee.com/CloudWise/f…
奉献指南：http://bbs.aiops.cloudwise.co…
模版核心：https://www.cloudwise.ai/flyF…