Redux和Context

151 阅读1分钟

Context

Context通过把用户信息存储在一个地方,需要的组件只需要调用他即可。

可以把Context看做一个存储东西的组件,它包括了其他组件可能想访问的共享信息

无论何时Context中的值更新,所有使用Context值(也可以说监听)的组件都会重新渲染(re-render)。

Redux

一种第三方状态管理模式or库 要理解redux,首先了解一下Reducer

Reducer是一种状态管理模式(pattern for state management),我们甚至可以在react context中使用它。

reducer结构:

截屏2022-08-09 下午2.59.33.png

Reducer存储的是一个对象。

Reducer使用Action更改状态(而不是useState和useEffect)。 Action包括两个字段,type是必填字段,payload是可选的。

reducer使用场景:

当一个操作需要同时修改多个state值的时候,适合用reducer,会有一个逻辑的整合。

Redux和Context的区别

主要是两方面:

  • 可访问性(accessibility)
  • 数据流(flow of data)
  1. 可访问性: Context仅把需要访问它的组件包裹起来;而Redux把整个应用程序包裹起来(被称为全局状态管理),因为Redux存储了应用程序的所有状态。 数据流
  2. 数据流

Context with Reducer数据流如下:

注意:每一个useReducer Hook都会有一个dispatch

截屏2022-08-09 下午2.28.11.png

Redux数据流如下:

注意:只有一个dispatch,所有的Reducer被整合成一个Root Reducer

截屏2022-08-09 下午2.54.38.png