在前两期FlyFish组件开发中，我们学习了组件组成和基本开发技巧。本次我们将详细讲解如何在Flyfish平台上使用React组件。关于组件导出首先要明确的是目前的FlyFish不能直接使用React组件。需要下图所示的方法，包装ReactComponent实现组件导出数据获取props.data，如果每次render都自动重新计算数据，可以直接从props.data中获取。之所以这么说是因为：数据加载有一定的延迟。componentWillRecieveProps当然每次数据更新都会触发componentWillRecievePropshook。如果需要每次数据更新的计算逻辑，可以听这里。(loaded|dataChange)事件的产生是因为我们的组件被ReactComponent包装了。因此，在当前实例的props中，parent（即真正的大屏组件）使用事件通信来监听事件的变化。props.parent.getData()可以通过函数式的方式调用getData方法来获取当前最新的数据。事件如果你想直接在React组件中使用事件通信。这时候就需要使用props.parent来执行。defaultProp如果我们想为配置提供组件方面（props.options），推荐的方式是在wrapper函数中设置静态defaultOptions来初始化默认项。这些默认项在React组件中充当defaultProps。如果你是认真的，你也可以重新包装并在组件内部声明defaultProps。组件生命周期这里我们说的是低代码平台特有的一些生命周期_render和_draw。如果你现在的代码不直接与React组件交互，你可以直接正常写在wrapper函数中。如果你需要在React中与事件或内部状态进行逻辑耦合，建议使用事件监听器来达到相同的效果。基本上所有的生命周期都会发出相应的事件。开源福利如果您喜欢我们的项目，请不要忘记点击下方代码仓库地址，在GitHub/Gitee仓库点个Star。我们需要您的鼓励和支持。另外，马上参与FlyFish项目，成为FlyFishContributor，同时还有更多现金等着你。GitHub地址：https://github.com/CloudWise-...地址：https://gitee.com/CloudWise/f...投稿指南：http://bbs.aiops.cloudwise.co...模板中心：https://www.cloudwise.ai/flyF…
