React状态管理|青训营笔记

112 阅读2分钟

React状态管理

什么是状态管理?

因为react遵循的是单项数据流的原则,属性通过Props自下而上的传递, 状态管理本身,解决的是跨层级组件之间的数据通信和状态共享

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

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

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

状态管理工具:

  • Vue:Vuex(Pinia)
  • Angular:Service和Rxjs
  • React:
  • React自带:LocalState(props)和Context
  • 单向数据流:Flux Redux
  • 双向数据绑定: Mobx
  • 原子型状态管理工具:Recoll Jotal
  • 异步操作密集型:Rxjs

LocalState(props):组件级别的局部状态

1.state是局部的,只能被组件自身控制、保存、修改的状态管理

2.props是让组件的父组件(外部)传入参数来控制、保存和修改状态,而自身并无法控制、修改,只能通过外部重传的方式改变状态,否则会报错

3.项目中,推荐用props来管理状态,尽量少地写有state组件

context的问题:

渲染力度有不可控制,有一些没有用context的值的子组件都会被重新渲染(解决方法用);需要用provider包裹它,会变成一个金字塔结构

Redux简介:在 Redux 中,有一个状态对象负责应用程序的整个状态, 这意味着如果有一个包含十个组件且每个组件都有自己的本地状态的 React 项目,那么这个项目的整个状态将通过 Redux store 被定义为单个状态对象

Redux store 是应用程序状态的唯一真实来源。

Redux的三大原则:单一数据源,只有一个store、store中的state是只读的、使用纯函数来执行修改

Mobx简介:

MobX 是一个状态管理框架,它可以轻松地将应用的响应式数据和 UI 绑定起来。这个绑定是完全自动的,而且不会感觉到别扭。MobX 使得应用开发者只需要关注 UI 需要消费哪些响应式数据,而无需关注如何保持二者同步。

MobX 的核心要素有三个:Observables 、Actions、和 Reactions

Mobx状态响应模型概括起来主要包含三个要素:定义状态、响应状态、修改状态