Hooks-useContext

useContetn接收一个 context 对象（React.createContext 的返回值），并返回该 context 的当前值。

import { createContext, useState, useMemo, useContext } from 'react';

const GlobalContext = createContext();

const App = () => {
  const [a, updateA] = useState('');
  const [b] = useState('');

  const contextValue = useMemo(() => ({ a, b }), [a, b]);

  return (
    <GlobalContext.Provider value={contextValue}>
      <ConsumeA />
      <ConsumeB />
      <input value={a} onChange={(e) => updateA(e.target.value)} />
    </GlobalContext.Provider>
  );
};

function ConsumeA() {
  const { a } = useContext(GlobalContext);

  return a;
}

function ConsumeB() {
  const { b } = useContext(GlobalContext);

  console.log('render b with: ', b);

  return b;
}

export default App;

参考：
https://zhuanlan.zhihu.com/p/346616580
https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext
https://github.com/facebook/react/issues/15156