核心概念
#
视图模块间数据共享在React中,数据共享的方式通常是通过状态提升来实现的。状态提升的这种方式通常会造成许多重复渲染,当组件的渲染成本高的时候,就会造成页面的卡顿。通过Rdx进行组件间状态共享的时候,可以做到按需渲染,大大降低页面由于交叉渲染而造成的性问题。
#
依赖收集用户的交互行为是不可预期的,每个行为都会触发引发一些响应,响应有同步的,也有异步的, 根据响应的速度来更新视图。
这样带来了的几个问题:
- 多余的状态被误触发,组件树连锁rerender --- 需要通过scu 或者 memo来避免
- 用户需要通过书写代码来确保页面上展示正确的数据
- 模块的状态维护成本 --- 多模块之间重复度相当高的代码,每次都要重复写?
- 响应的代码重复触发,响应代码中常常包含着数据请求的代码,导致请求触发多次,又需要通过代码来保证展示的正确性。
通过组件通过组件间的依赖关系,使用graph的数据结构,动态的存储运行时节点的依赖关系,既保证用户可以在多个模块间共享数据,又保证了模块的按需渲染。
#
组件的状态Rdx 组件维护着一套完整的状态,
- 组件的等待状态 Status.Waiting
- 组件的响应函数运行的状态 Status.Loading
- 组件的运行结束的状态 Status.None
- 组件的响应函数执行异常的状态 Status.Error
- 组件的响应函数执行异常的状态 Status.IDeal
#
Rdx的核心流程- 总是会先通过compute 和 atom 来进行状态的定义
- 通过hooks来实例化这些状态。
- hooks实例状态的同时,会进行依赖关系的收集,最后状态实例和依赖关系更新到Context中。
- Context会将收集到的状态实例和依赖关系更新到调度器中。
- 调度器会对状态实例和依赖关系进行环检测。
- 调度器会通过状态实例的依赖关系,动态的创建运行时的图,通过对图的dfs来触发compute中get函数的执行。
- 当状态实例更新后,会进行新一轮的依赖检查,当依赖关系更新的时候,会更新运行时的图。