开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

useContext

获取 ThemeContext.Provider value 值

当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定

组件上层最近的 <MyContext.Provider> value 更新时，该 Hook 会触发重渲染

即使祖先使用 React.memo 或 shouldComponentUpdate，也会重新渲染

拆分 context，从原有 context 内部拆分为另一 context

function Button() {
let theme = useContext(ThemeContext);
// The rest of your rendering logic
return <ExpensiveTree className={theme} />;
}

拆分组件，接收 context 组件拆分为两个组件，父组件接收 context 传递给子组件，子组件使用 memo

    function Button() {
      let appContextValue = useContext(AppContext);
      let theme = appContextValue.theme; // Your "selector"
      return <ThemedButton theme={theme} />
    }

    const ThemedButton = memo(({ theme }) => {
      // The rest of your rendering logic
      return <ExpensiveTree className={theme} />;
    });

组件内部 return 一个 useMemo 函数，指定依赖列表

function Button() {
  let appContextValue = useContext(AppContext);
  let theme = appContextValue.theme; // Your "selector"

  return useMemo(() => {
    // The rest of your rendering logic
    return <ExpensiveTree className={theme} />;
  }, [theme])
}

你不知道的React系列（十五）useContext（掌握）

useContext