写点什么

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

  • 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。

组件生命周期

这里说的是低代码平台独有的一些生命周期_render、_draw。若当前你的代码与 React 组件无直接交互, 可直接在包裹函数中正常编写。 若需要和 React 中的事件或者内部状态进行逻辑耦合, 建议使用事件监听来达到同样的效果。基本所有的生命周期都会发射对应的事件。

开源福利

如果喜欢我们的项目,请不要忘记点击下方代码仓库地址,在 GitHub / Gitee 仓库上点个 Star,我们需要您的鼓励与支持。此外,即刻参与 FlyFish 项目贡献成为 FlyFish Contributor 的同时更有万元现金等你来拿。

GitHub 地址: https://github.com/CloudWise-OpenSource/FlyFish

Gitee 地址:https://gitee.com/CloudWise/fly-fish

FlyFish 贡献指南:http://bbs.aiops.cloudwise.com/d/717-flyfish

FlyFish 模版中心: https://www.cloudwise.ai/flyFishComponents.html


用户头像

全栈智能业务运维服务商 2021.03.10 加入

我们秉承Make Digital Online的使命,致力于通过先进的产品技术,为企业数字化转型和提升IT运营效率持续赋能。 https://www.cloudwise.com/

评论

发布
暂无评论
数据可视化系列教程之React组件使用技巧_前端_云智慧AIOps社区_InfoQ写作社区