React状态管理 | 青训营笔记

62 阅读2分钟

什么是状态管理

状态管理工具的本质:管理共享内存中的状态

  1. 共享内存
  2. 管理状态
  3. 页面通信
  4. 组件通信
  5. 刷新失效?

详细定义:单页应用的各个组件本身是共享内存的,如果将状态保存在内存中,就可以读写统一内存中的变量,从而达到状态共享的目的。

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

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

React状态管理工具

  • React自带:Local State(props)和Context
  • 单向数据流:Flux、Redux(Redux-toolkit)
  • 双向数据绑定:Mobx
  • 原子型状态管理:Recoil、Jotai
  • 异步操作密集型:Rxjs

每一种状态管理工具都有其不同的适用性,不同场景下需要合理的选择状态管理工具。

React状态管理简介

子页面和子页面之间的通信,React本身提供了Context。

React中的Context解决了react中,props或者state进行多级数据传递,则数据需要自顶下流经过每一级组件,无法跨级的问题。但是Context在页面间共享数据的时候同样有很多问题。

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