状态管理

useMemo为了防止一种情况——父组件更新，无论是否最子组件操作，子组件都会更新

memo 结合了 PureComponent 纯组件和 componentShouldUpdate 功能，会对传入的props进行一次对比，根据第二个函数返回值判断哪些props需要更新

useMemo和memo类似，都是判断是否满足当前限定条件决定是否执行 callback，useMemo的第二个参数是一个数组，通过这个数组判断是否更新回调函数

好处

1. 减少不必要循环和渲染
2. 减少子组件渲染次数
3. 避免不必要的开销

useCallback

和useMemo 可以说是一模一样，唯一不同的是useMemo返回函数运行结果，而useCallback返回函数

这个函数是父组件传递子组件的一个函数，防止无关刷新，这个组件必须配合 memo，否则可能还会降低性能

useRef

获取当前元素的所有属性，返回一个可变的ref对象，且这个对象只有 current 属性，可设置 initialValue

获取对应属性值

缓存数据

react-redux 源码中，hooks推出后，react-redux用大量的useMemo重做了 Provide 等核心模块，运用了useRef 缓存数据，所运用的useRef() 没有一个是绑定在dom元素上的，都是用于数据缓存

react-redux 利用重新赋值，改变了缓存的数据，减少不必要更新，如果使用userState势必会re-render

总结

1. 一个优秀的hooks一定具备 useMemo useCallback 等api 优化
2. 制作自定义hooks遇到传递过来的值，优先考虑使用useRef，再考虑使用useState
3. 封装时，应该将存放的值放入useRef中

状态管理

Redux

Redux名字的含义是Reducer+Flux，——视图层框架

context“上下文环境”，让一个树状组件上所有的组件都能访问一个共同的对象，context 由其父节点链上所有组件通过 getChildContext() 返回context对象组合而成，因此，通过context 可以访问其父组件链上context

创建一个特殊的react组件，它将是通用的一个context提供者，可以应用在任何一个应用中——Provider！

Provider只是把渲染工作完全交给子组件，只是提供Context包住最顶层组件，context覆盖了整个应用

是context唯一需要，不算是滥用

工作原理

1. 用户(View)发出 action，使用dispatch
2. store 自动调用 reducer，传入参数：state 和收到的action，reducer返回新的state
3. state变化，store调用监听函数，更新 View

异步请求处理

借助 redux 的中间件异步处理

主要有 redux-thunk，redux-saga(常用)

此处主要介绍 redux-saga

优点：

异步解耦，不会掺杂在 action 或 component 中，代码简洁度提高异常处理，可使用 try/catch 捕获异常

功能强大，无需封装或简单封装即可使用灵活，可将saga 串行起来，形成异步 flow

易测性

缺陷：

学习成本高体积略大

功能过剩 yield无法返回 TS 类型

@connect

连接React和Redux

1. connect通过context获取Provider中的state，通过store.getState()获取store tree上所有state
2. 将state和action通过 props 的方式传入组件内部，wrapWithConnect 返回一个Component对象connect，

connect重新render 外部传入的元组件 wrapWithConnect，将connect中传入的mapStateToProps， mapDispatchToProps 与组件上原有的props 合并，通过属性的方式传给 WrappedComponent

1. 监听 state tree 变化。connect缓存了store tree中state的状态，根据state当前和变更前状态比较，确定是否

setState触发connect及re-render

connect的工作

1. 把store上的状态转化为内层傻瓜组件的prop
2. 把内层傻瓜组件的用户动作转化为派送给store的动作

@有时候使用Symbol代替字符串表示枚举值更合适，但是有的浏览器不支持

action构造函数返回一个action对象

Redux和Vuex