React Context 应该怎么用?

› React

This topic created in 1545 days ago, the information mentioned may be changed or developed.

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

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

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

Supplement 1 · Feb 25, 2022

我在 2L 贴了代码, 大概就是我想表达的逻辑.

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

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

2. 「用 context 你需要注意一个问题如果你的 context 是个 mutable object 只要其中一个 value 变了所有 consumer 都会 re-render. 这个时候你可以写一些 selector 来规避这个问题这个时候你基本上就自己写了半个 redux 了」别的地方看到的这个, 没有明白他说的 selector 是什么? 怎么规避这个问题的?

7 replies • 2022-02-25 21:00:16 +08:00