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

React Context 应该怎么用?

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

    Context 可以跨层级传数据, 和 props 一样, 当 context 数据变动, Consumer 也会更新.

    再一想, context 数据是怎么变化的? Context 数据绑定到 Provider 的 state 中, 需要 setState 来更新 context 数据, 那么 setState 会触发 re-render, 这样子组件自然也会刷新.

    但感觉这种情况也不需要 Context 也能实现啊? 比如全局有一个 themeObj, 在最外层的监听这个 obj 的变化, 如果变化, 手动调用 forceUpdate, 这样子组件也会触发更新, 子组件只需要 import 这个 themeObj 使用即可, 每次 re-render 都会拿到最新的数据.

    第 1 条附言  ·  2022-02-25 14:08:38 +08:00
    我在 2L 贴了代码, 大概就是我想表达的逻辑.

    关于这个问题, 我遇到过两个不明白的地方:

    1. react-redux 中 connect 的实现, 最外层(root)套了一个 <Context.Provider> 但其实并不是任何 store 数据更新会全局刷新, 而是通过 connect 传入的 selector 来绑定更新

    2. 「用 context 你需要注意一个问题 如果你的 context 是个 mutable object 只要其中一个 value 变了所有 consumer 都会 re-render. 这个时候你可以写一些 selector 来规避这个问题 这个时候你基本上就自己写了半个 redux 了」别的地方看到的这个, 没有明白他说的 selector 是什么? 怎么规避这个问题的?
    7 条回复    2022-02-25 21:00:16 +08:00
    wobuhuicode
        1
    wobuhuicode  
       2022-02-25 13:45:12 +08:00
    react 主张的是单向数据流的方式。
    要是各种使用监听的去更新 view 的话,而且项目大了,数据多了,代码就会变得很难看。
    FaiChou
        2
    FaiChou  
    OP
       2022-02-25 13:45:30 +08:00
    coolzjy
        3
    coolzjy  
       2022-02-25 13:49:02 +08:00
    context 基本就是这个思路,只不过你这样把状态放在全局的实现智能有一个 context ,如果要有多个的话要添加一堆 hack ,这样 hack 下来基本就是 react context 的样子了。
    fernandoxu
        4
    fernandoxu  
       2022-02-25 13:55:24 +08:00
    你说的就是代理呗,有 valtio 还有 @ nanxiaobei 搞的类似东西
    fernandoxu
        5
    fernandoxu  
       2022-02-25 13:57:10 +08:00
    https://github.com/jherr/which-react-state-manager

    状态管理五花八门,想咋玩都行,看口味儿
    CokeMine
        6
    CokeMine  
       2022-02-25 16:21:00 +08:00 via Android
    手动 forceUpdate 不太优雅吧
    而且 hook 要想 forceUpdate 也得借助于一个 useState 了
    KuroNekoFan
        7
    KuroNekoFan  
       2022-02-25 21:00:16 +08:00 via iPhone
    因为 useContext 很舒服
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   935 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 22:42 · PVG 06:42 · LAX 15:42 · JFK 18:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.