请问 app.js 中注入的 Context，为何只更新使用 Context 的组件？

[nanxiaobei]

这个问题不太好描述，大概是这样。

---

默认在页面组件比如 pages/home.jsx 里使用 React Context：

// pages/home.jsx

const Home = () => (
  <HomeContext.Provider>
    <A />
    <B />
  </HomeContext.Provider>
);

const A = () => {};
const B = () => {
  const val = useContext(HomeContext)
  // ...
};

如果在 B 中更新 HomeContext，那么 Home、A、B 都将 re-render

---

但如果把 Context 放在 Taro 项目的 app.js 里：

// app.js

const App = ({ children }) => (
  <AppContext.Provider>
    {children}
  </AppContext.Provider>
);

而在 pages/home.jsx 里只使用：

// pages/home.jsx

const Home = () => (
  <>
    <A />
    <B />
  </>
);

const A = () => {};
const B = () => {
  const val = useContext(AppContext)
};

此时在 B 中更新 AppContext，那么只有 App、B 会 re-render。Home 和 A 并不会 re-render。

---

请问这个是怎么做到的？Taro 做了什么特殊处理，实现了这个类似 react-redux 节流的效果呢？

[tourze]

这个应该是react的能力吧

[Chen-jj]

@nanxiaobei 把 JSX 展开为 React.createElement 的形式就能理解了，原因在于 this.props.children。

例子一

React.createElement 写作 h

Home 每次更新都会调用 h(A)，h(B)，当然会重新渲染了。

const Home = () => (
  h(HomeContext.Provider, {}, [
    h(A)
    h(B)
  ])
)

例子二

App 每次更新时，传给 HomeContext.Provider 的是 this.props.children。不会调用 h(Home)，h(A)，h(B)。

又根据 Provider 只会更新相关组件的能力，最终只会更新 App 和 B。

const App = () => (
  h(HomeContext.Provider, {}, this.props.children)
)