React 状态管理 | 青训营笔记

用户6787031999053
63 阅读2分钟

问题思考：

  • 1.为什么不能用window对象?
  • 2.react hooks给状态管理库的设计带来了哪些新思路?（类组件本身比较复杂，给状态管理库带来挑战；react的新特性是通过hooks给开发者的，所以新的状态管理工具可以通过一些新的特性来简化状态管理工具的开发，提供的这些hooks可以直接给状态管理工具使用）

image.png

image.png

01 什么是状态管理

  • 现在是能不用则不用，会带来一些理解的负担

image.png

  • React遵循的是单向数据流的原则，属性通过props自上而下的传递
  • 状态管理解决的问题：跨层级组件之间的数据通信和状态共享（声明+调用）

image.png

  • 刷新失效（放到内存中）和刷新不失效（localStorage、sessionStorage）（即使你使用的是强制刷新仍旧不会使SessionStorage数据消失,即 SessionStorage 里面的数据只会在当前活动的标签页中关闭掉之后才会消失。）

image.png

  • react纯业务层框架

02 React状态管理简介

image.png

image.png

  • context像金字塔存在层层嵌套的情况

image.png

image.png

image.png

image.png

  • context的缺点：渲染粒度是不可控制的，会有一些不必要的渲染（有很强的穿透性）；像金字塔存在层层嵌套的情况

image.png

image.png

image.png

image.png

image.png

image.png

  • 类组件会有很多问题

image.png

image.png

image.png

image.png

image.png

  • reducers是一个纯函数，能够做到状态即UI，状态展示和UI渲染对应起来

image.png

image.png

image.png

image.png

  • react可以做时间旅行

image.png

image.png

image.png

  • 兼容类组件：mobx、redux

image.png

  • 不是官方内置的

image.png

image.png

image.png

  • 会引起一些不必要的渲染，渲染粒度很难控制

image.png

image.png

image.png

image.png

  • 适合移动端
  • 2个api

image.png

image.png

image.png

  • 不兼容类组件

03 实现一个简易的状态管理工具

image.png

image.png

image.png

image.png

04 Redux在项目中的实践

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

  • 代码量没有减少
  • 改写的好处：减少不必要的更新；相对来讲代码量减少
avatar
文章
阅读
粉丝