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