React 状态管理 | 青训营笔记

137 阅读2分钟

什么是状态管理

状态管理是指在应用程序中跟踪和管理状态的过程。在前端开发中,状态通常是指用户界面的数据,例如表单输入、选中的复选框、页面的显示和隐藏等等。

通常包括一个状态容器,一个更新状态的机制和一组规则来确保状态的一致性和正确性。

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

React的状态管理

React 状态管理通常指的是管理 React 组件中的状态。在 React 中,每个组件都有自己的状态(state),当状态发生变化时,组件会重新渲染。

React的状态管理工具

Vue:Vuex(Pinia)

Angular:Service和Rxjs

React: Flux、Redux、Mobx、Rxjs、Recoil、Jotai、Zustand

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

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

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

React状态管理的方式

1、使用组件自身的状态(State)React 组件可以通过 state 属性来维护自己的状态。当状态变化时,组件会重新渲染。

2、使用 ReduxRedux 是一个状态管理库,它可以帮助我们管理整个应用的状态,Redux 将应用的状态存储在一个全局的 store 中,组件可以从 store 中读取状态,并且通过 action 触发状态的变化。

3、使用 MobxMobx 是另一个状态管理库,它采用观察者模式来管理状态。当状态发生变化时,所有依赖该状态的组件都会自动更新 使用 React Context APIReact Context API 是 React 提供的一种跨层级组件通信的方式。

4、通过 Context,我们可以在组件树中传递数据,避免了通过 props 层层传递数据的麻烦。

使用方法

使用组件自身的状态(State)