核心概念

视图模块间数据共享#

在React中,数据共享的方式通常是通过状态提升来实现的。状态提升的这种方式通常会造成许多重复渲染,当组件的渲染成本高的时候,就会造成页面的卡顿。通过Rdx进行组件间状态共享的时候,可以做到按需渲染,大大降低页面由于交叉渲染而造成的性问题。

依赖收集#

用户的交互行为是不可预期的,每个行为都会触发引发一些响应,响应有同步的,也有异步的, 根据响应的速度来更新视图。

这样带来了的几个问题:

  • 多余的状态被误触发,组件树连锁rerender --- 需要通过scu 或者 memo来避免
  • 用户需要通过书写代码来确保页面上展示正确的数据
  • 模块的状态维护成本 --- 多模块之间重复度相当高的代码,每次都要重复写?
  • 响应的代码重复触发,响应代码中常常包含着数据请求的代码,导致请求触发多次,又需要通过代码来保证展示的正确性。

通过组件通过组件间的依赖关系,使用graph的数据结构,动态的存储运行时节点的依赖关系,既保证用户可以在多个模块间共享数据,又保证了模块的按需渲染。

组件的状态#

Rdx 组件维护着一套完整的状态,

  • 组件的等待状态 Status.Waiting
  • 组件的响应函数运行的状态 Status.Loading
  • 组件的运行结束的状态 Status.None
  • 组件的响应函数执行异常的状态 Status.Error
  • 组件的响应函数执行异常的状态 Status.IDeal

Rdx的核心流程#

  1. 总是会先通过compute 和 atom 来进行状态的定义
  2. 通过hooks来实例化这些状态。
  3. hooks实例状态的同时,会进行依赖关系的收集,最后状态实例和依赖关系更新到Context中。
  4. Context会将收集到的状态实例和依赖关系更新到调度器中。
  5. 调度器会对状态实例和依赖关系进行环检测。
  6. 调度器会通过状态实例的依赖关系,动态的创建运行时的图,通过对图的dfs来触发compute中get函数的执行。
  7. 当状态实例更新后,会进行新一轮的依赖检查,当依赖关系更新的时候,会更新运行时的图。