React状态管理 | 青训营笔记

45 阅读2分钟

1.什么是状态管理?

从React诞生之后,前端组件化的方案深入人心,React遵循的是单向数据流的原则,属性通过Props自 上而下的传递。当页面的比较简单,组件之间的层级关系比较浅时,这种自上而下的单向数据流的方式是 不会有问题的。如果页面一复杂,组件的嵌套层级一深,这种单向数据流的传递方式,将会使你陷入到“ 嵌套地狱”。 状态管理本身,解决的就是这种“嵌套”地狱的问题,解决的是跨层级组件之间的数据通信和状态共享。

  • 状态管理工具的本质:管理共享内存中的状态。
    1.共享内存
    2.管理状态
    3.页面通信
    4.组件通信
    5.刷新失效?
    详细定义:单页应用的各个组件本身是共享内存的,如果将状态保存在内存中,就可以读写统一内存中的变量,从而达到状态共享的目的。

2.为什么React有这么多状态管理工具?

跟不同前端框架的定义有关. Vue和Angular双向数据绑定.计算属性等.数据是响应式的. 控制视图刷新.拥有计算属性等.这些使得Vue和Angular需要状态管理的场景减少.此外其 本身就包含了完整的状态管理工具.比如Vue的Vuex和Pinia,Angular的Service(RXjs)等.从官方定调。而React不一样. React是一个纯UI层的前端框架. Ul = fn(state),React将状态的变动完全交给开发者。

3.React状态管理简介

React状态管理工具可以分为以下几类:

  • React自带:Local State(props)和Context
  • 单向数据流:Flux、 Redux(Redux-toolkit)
  • 双向数据绑定:Mobx
  • 原子型状态管理:Recoil、Jotai
  • 异步操作密集型:Rxjs
    每一种状态管理工具都有其不同的适用性.不同场景下需要合理的选择状态管理工具。

4.Context在页面间共享数据的时候遇到的问题:

  • Context相当子全局变量.难以追溯数据的变更情况
  • 使用Context的组件内部耦合度太高.不利于组件的复用和单元测试
  • 会产生不必要的更新(比如会穿透memo和dependicies等)
  • Context 只能存储单—值,无法存储多个各自拥有消费者的值的集合。
  • 粒度也不太好控制.不能细粒度的区分组件依赖了哪一个Context
  • 多个Context会存在层层嵌套的问题