React Hooks 系列：useContext 的解析笔记

useContext 是 React 提供的一个 Hook，用于在函数组件中访问 Context 的值。它允许你在组件树中跨层级传递数据，而无需手动通过 props 逐层传递。

1. 创建 Context

首先，你需要使用 React.createContext 创建一个 Context 对象。

import React from 'react';

const MyContext = React.createContext(defaultValue);

• defaultValue 是当组件没有匹配到 Provider 时的默认值。如果不需要默认值，可以传入 null 或 undefined。

2. 提供 Context 值

使用 Context.Provider 组件来提供 Context 的值。Provider 组件接收一个 value 属性，这个值会被传递给所有消费该 Context 的后代组件。

function App() {
  const value = { /* 一些值 */ };

  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

3. 消费 Context 值

在函数组件中，使用 useContext Hook 来消费 Context 的值。

import React, { useContext } from 'react';

function ChildComponent() {
  const contextValue = useContext(MyContext);

  return (
    <div>
      {contextValue.someValue}
    </div>
  );
}

• useContext 接收一个 Context 对象（即 React.createContext 的返回值），并返回该 Context 的当前值。
• 当 Provider 的 value 发生变化时，所有使用 useContext 的组件都会重新渲染。

4. 示例

以下是一个完整的示例，展示了如何使用 useContext 在组件树中传递数据。

import React, { useContext, useState } from 'react';

// 创建一个 Context
const ThemeContext = React.createContext();

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar toggleTheme={toggleTheme} />
    </ThemeContext.Provider>
  );
}

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

function ThemedButton({ toggleTheme }) {
  const theme = useContext(ThemeContext);

  return (
    <button 
      onClick={toggleTheme}
      style={{ 
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff'
      }}
    >
      Toggle Theme
    </button>
  );
}

export default App;

5. 注意事项

• useContext 只能在函数组件中使用。
• 当 Provider 的 value 发生变化时，所有使用 useContext 的组件都会重新渲染。因此，确保 value 的变化是必要的，避免不必要的渲染。
• 如果 Context 的值是一个对象，确保在更新时使用新的对象引用，而不是直接修改现有对象的属性。

6. 总结

useContext 提供了一种在组件树中跨层级传递数据的简便方式。通过结合 React.createContext 和 Context.Provider，你可以轻松地在组件之间共享状态，而无需手动通过 props 逐层传递。