全局数据流是前端数据管理的概念,多个组件为共享状态时,共享状态和组件间通信较为困难。此时将共享状态抽取出来,用全局数据流的方式使之变得简单。

全局数据流的原理

全局数据流使用了单一的数据流转方式,来实现全局数据的传递。在全局数据中声明的数据,只要变更后便会执行如下图所示的数据流转。

  1. 组件触发一个Action(例如通过鼠标单击触发)。
  2. Action触发全局数据变更。
  3. 全局数据变更会自动触发引用了该全局状态的相关组件的重新渲染。

全局数据流的适用场景

全局数据流适用于页面中两个组件或者多个组件之间的组件联动,可以通过将公共数据提炼到全局数据中进行统一管理,再利用全局数据流机制串联两个或多个组件。

全局数据流的定义

  1. 单击操作面板中的全局数据流配置图标。

  2. 全局数据流配置对话框中,填写变量名变量值

    • 变量值可以为数字、字符串或JSON串。
    • 变量值声明为一个接口地址,接口获取到的数据将会成为变量名对应的值。
  3. 单击保存

使用全局数据流

  • 获取全局数据
    组件中通过state.name来获取全局数据。
    <Input value={state.name} />
  • 修改全局数据
    组件中通过$setState方法修改全局数据。
    <Input onChange={value => $setState({ name: value })} />
    说明 请务必使用$setState方法修改全局数据,如果使用state.name = 'new value',将会无法触发重新渲染。