Context

Context 是 React 提供的一个 API
其功能有：

• 统一存放共用参数，实现全局资料管理
• 某层子元件需要使用时才调用，免去 props 传递
• 让不同组件可彼此传递资料

使用方式

使用 createContext() 建立一个 Context 物件，
回传的物件中包含两个子元件：

• Provider：用来传递资料
• Consumer：用来接收资料

const testContext = React.createContext();
const { Provider, Consumer } = testContext;

Provider：传入资料

// App.js
export const ThemeContext = React.createContext() 

const App = () => {
    const [dark, setDark] = useState(true);
    
    return (
        <>
            <ThemeContext.Provider value={dark}>
              <FunctionComponent />
              <ClassComponent />
            </ThemeContext.Provider>
        </>
    );
}

产生了 Context 物件後
就可以呼叫它的 Provider，
被 Provider 包覆的子元件，
以及这些元件的子元件
都能接收到 value 这个参数，
而不需要在使用 props，
可避免产生复杂的巢状结构。

使用多个 Context

而如果需要多个 Provider，
可以一层层包在外面，
让资料传递进去。

// ThemeProvider.js
const ThemeContext = React.createContext();
const ThemeUpdate = React.createContext();

const ThemeProvider = ({children}) => {
  const [dark, setDark] = useState(true);
  
  const changeTheme = () => {
    setDark(prevDark => !prevDark)
  }
  
  return (
    <ThemeContext.Provider value={dark}>
      <ThemeUpdate.Provider value={changeTheme}>
        {children}
      </ThemeUpdate.Provider>
    </ThemeContext.Provider>
   )
}


// App.js
const App = () => {
  return (
    <ThemeProvider>
      <FunctionComponent />
      <ClassComponent />
    </ThemeProvider>
  )
};

Consumer：接收资料

在需要使用 value 的地方
引入 Context 物件与 Consumer，
如此 Consumer 底下的范围内，
便都能自由使用 Provider 传入的变数。

// ButtonGroupComponent.js
import { ThemeContext } from './App.js';

const ButtonGroupComponent = () => {
   const themeStyle = (dark) => {
      return {
        backgroundColor: dark ? '#2c3e50': '#f1c40f',
        color: dark ? '#ecf0f1' : '#2c3e50'
      }
    };
  return (
    <ThemeContext.Consumer>
      { dark =>
        <button style={themeStyle(dark)}>Class Component</button>
      }
   </ThemeContext.Consumer>
  );
} 

参考资料

• [React Hook 笔记] useContext