【Day 21】Hook 04：useContext

useContext

useContext 本质上是 Context 的语法糖，
精简了 Context 取得值的方式。

使用方法

useContext 会接收一个
「Context Object」作为参数
也就是 React.createContext() 的回传值，
并回传该 Context 目前的值。

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

// MyComponent.js
const value = useContext(ThemeContext);

Context 目前的值则取决於上层 component
距离最近的 <ThemeContext.Provider> 的 value prop。

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

当 component 上层最近的
<ThemeContext.Provider> 更新时，
useContext 会触发重新 render，
并取得最新传递到 ThemeContext 里的 value。

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

const ButtonGroupComponent = () => {
  const darkTheme = useContext(ThemeContext)
  
  const themeStyle = {
    backgroundColor: darkTheme ? '#2c3e50': '#f1c40f',
    color: darkTheme ? '#ecf0f1' : '#2c3e50'
  }
  
  return (
    <button style={themeStyle}>useContext</button>
  );
}

useContext(ThemeContext) 等同於 class 中的 static contextType = ThemeContext 或 <ThemeContext.Consumer>。

完整使用范例


const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}