React 中, 用 Context+Hooks 替代 Redux 的朋友们, 有个问题请教下

[ethusdt]

ContextProvider 绑定了数据和相应的 dispatch 函数, 当调用 dispatch 函数时候改变相应的数据:

function App1() {
  const [user, setUser] = useReducer(
    (state, action) => {
      if (action.type === "SETUSER") {
        return {
          name: action.payload
        };
      }
      return state;
    },
    { name: "default name" }
  );
  return (
      <ContextProvider value={{ user, setUser }}>
        <Childs />
      </ContextProvider>
  );
}

这时候所有的子节点都会因为这个 dispatch 动作而重新调用导致 re-render, 一个大的项目不可能完全用 Memo 来固定.

但是使用 Redux 就不会有这个问题, 只有被 connect 的组件才会 re-render.

所以实际项目中, 是有简单的方法避免 ContextProvider 数据变化导致子节点全部重新渲染吗? 还是不考虑这个性能问题?

(看过 react-redux 源码, 实现起来还是有点复杂的)

[vsitebon]

我也有同样的问题

[dengqing]

单独抽离 Context+Reducer 成一个组件，然后使用组件对传递进来的 children 使用 useMemo 包裹，应该可行

[statumer]

你不妨从另一个角度去思考，redux ，mobx 能按需更新是因为 redux 可以显式声明依赖，mobx 可以隐式捕捉到依赖，但是 Context 怎么知道子组件和子状态的依赖关系呢？只能你人工做优化。

[ethusdt]

@statumer 有什么好的优化方案吗? 我感觉无解啊. 只要被 ContextProvider 包围了, 除了 MemoComponent 就都会受影响.

[dany813]

不优化，默认就是会全部 render ，里面的子组件都 memo 下，另外有性能问题再优化也不迟

[wktrf]

可以看看 jotai ，用事件订阅这种机制来实现对应组件的更新而不是从上到下全部更新

[zoeliu]

同二楼，发布订阅模式，使用 children
https://codesandbox.io/s/fabuzhedingyuezhemoshitiaoguozhongjianzujiande-render-guocheng-nm7nt?file=/src/PubSubCommunicate.js&mode=light

[xiaojun1994]

搜到了这个，能解决问题吗
https://github.com/dai-shi/use-context-selector

[wobuhuicode]

为什么需要代替呢？这两个一起用就好了

[shenyu1996]

https://codemacaw.com/2021/11/21/prevent-unnecessary-re-rendering-when-using-context-api/
里面的第二种方法

[AsZr]

https://segmentfault.com/a/1190000040953991

useContext -> unstated-next -> 解决 unstated-next 的 re-render

[yazoox]

这个 re-render 并不是真的重新”渲染“，只是触发了更新，react 需要重新计算一遍。这个过程，是逃不掉的，react 的单向数据流，就是这么设计的。就算是 redux ，dispatch 一个消息后，依然也是从上至下，走一遍。
在更新过程中，只有 prop 真正改变了的，才需要更新 dom ，才重新渲染。
这是我的理解，不对请指正

[jjwjiang]

@yazoox 正解，假设通过 memo 去避免了这次“计算”，但是又会增加 memo 本身缓存、比较的开销，哪个快哪个慢还不一定呢。
我觉得用 hooks 之后，真的出现了性能问题和重复刷新问题再去（通过拆分重构）解决比脑补要合理

[Jiki]

总结一下：
1. 子组件 useMemo 是一种方式，但是组件树规模比较大的话每个都加不方便，也不太优雅；
2. 11 楼提到的 Heo 是一种思路，利用 createContext 第二个参数返回 0 将 context 触发 render 的特性关闭，然后内部维护一个 listeners 队列，暴露一个 useSelector api ，调用时创建一个 listener 用于使用状态的浅比较，并加入 listeners 队列，当其他地方触发状态变化时，遍历 listeners 调用并传入当前 state ；
3. zustand 跟第二个思路相近，内部用 ref 防止更新，使用 subscribeWithSelector 中间件后，subscribe 跟 Heo 的 useSelector 类似，不过状态比较函数可以自定义逻辑（有不对的地方请指正）；
4. 可以参考基于 Proxy 的状态管理库，状态 observable 后，自动收集依赖，变更时根据变更项触发相应的组件更新；
5. jotai 、recoil 还没了解过，不清楚他们是怎么解决这个问题的。

[qiuxuqin]

出现了性能问题再来优化就行。