V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
FaiChou
V2EX  ›  React

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

  •  
  •   FaiChou ·
    FaiChou · 2022-05-06 13:34:02 +08:00 · 2712 次点击
    这是一个创建于 692 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 源码, 实现起来还是有点复杂的)

    15 条回复    2022-05-08 13:58:14 +08:00
    vsitebon
        1
    vsitebon  
       2022-05-06 13:39:20 +08:00
    我也有同样的问题
    dengqing
        2
    dengqing  
       2022-05-06 13:44:07 +08:00
    单独抽离 Context+Reducer 成一个组件,然后使用组件对传递进来的 children 使用 useMemo 包裹,应该可行
    statumer
        3
    statumer  
       2022-05-06 13:46:48 +08:00 via iPhone
    你不妨从另一个角度去思考,redux ,mobx 能按需更新是因为 redux 可以显式声明依赖,mobx 可以隐式捕捉到依赖,但是 Context 怎么知道子组件和子状态的依赖关系呢?只能你人工做优化。
    FaiChou
        4
    FaiChou  
    OP
       2022-05-06 14:53:47 +08:00
    @statumer 有什么好的优化方案吗? 我感觉无解啊. 只要被 ContextProvider 包围了, 除了 MemoComponent 就都会受影响.
    dany813
        5
    dany813  
       2022-05-06 16:38:07 +08:00
    不优化,默认就是会全部 render ,里面的子组件都 memo 下,另外有性能问题再优化也不迟
    wktrf
        6
    wktrf  
       2022-05-06 17:35:23 +08:00
    可以看看 jotai ,用事件订阅这种机制来实现对应组件的更新而不是从上到下全部更新
    zoeliu
        7
    zoeliu  
       2022-05-06 18:06:29 +08:00 via Android
    xiaojun1994
        8
    xiaojun1994  
       2022-05-06 18:06:38 +08:00
    搜到了这个,能解决问题吗
    https://github.com/dai-shi/use-context-selector
    wobuhuicode
        9
    wobuhuicode  
       2022-05-06 18:23:58 +08:00
    为什么需要代替呢?这两个一起用就好了
    shenyu1996
        10
    shenyu1996  
       2022-05-06 18:33:30 +08:00
    AsZr
        11
    AsZr  
       2022-05-06 18:59:13 +08:00
    https://segmentfault.com/a/1190000040953991

    useContext -> unstated-next -> 解决 unstated-next 的 re-render
    yazoox
        12
    yazoox  
       2022-05-07 08:20:56 +08:00
    这个 re-render 并不是真的重新”渲染“,只是触发了更新,react 需要重新计算一遍。这个过程,是逃不掉的,react 的单向数据流,就是这么设计的。就算是 redux ,dispatch 一个消息后,依然也是从上至下,走一遍。
    在更新过程中,只有 prop 真正改变了的,才需要更新 dom ,才重新渲染。
    这是我的理解,不对请指正
    jjwjiang
        13
    jjwjiang  
       2022-05-07 13:00:12 +08:00
    @yazoox 正解,假设通过 memo 去避免了这次“计算”,但是又会增加 memo 本身缓存、比较的开销,哪个快哪个慢还不一定呢。
    我觉得用 hooks 之后,真的出现了性能问题和重复刷新问题再去(通过拆分重构)解决比脑补要合理
    Jiki
        14
    Jiki  
       2022-05-07 17:30:04 +08:00   ❤️ 1
    总结一下:
    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
        15
    qiuxuqin  
       2022-05-08 13:58:14 +08:00
    出现了性能问题再来优化就行。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5399 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 09:10 · PVG 17:10 · LAX 02:10 · JFK 05:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.