React 之组件之间共享值useContext使用（十五）

**之火2024-05-10 16:02

1. useContext 是 React 中的一个 Hook，它允许你在组件之间共享值，而不必显式地通过组件树逐层传递 props。当你想要在整个应用程序中传递数据时，使用 useContext 可以使代码更加简洁和易于维护。
2. 相当于vue的依赖注入模式：Provide / Inject

useContext 需要与 React.createContext() 一起使用。React.createContext() 会返回一个新的 React Context 对象。这个对象有两个属性：Provider 和Consumer。但是，useContext Hook 使得我们可以直接访问 Context 的值，而不需要使用 Consumer。

使用 useContext 的代码栗子：

javascript 复制代码

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

父组件：ThemeProvider
// 创建一个新的 Context 对象  
const ThemeContext = createContext();  
  
// ThemeProvider 组件，用于包裹子组件，并提供一个 theme 属性  
function ThemeProvider({ children }) {  
  const [theme, setTheme] = useState('light');  
  
  // 返回一个对象，该对象会被 ThemeContext.Provider 使用  
  // 这样，所有 ThemeProvider 的子组件（包括嵌套组件）都可以访问到 theme 和 setTheme  
  return (  
    <ThemeContext.Provider value={{ theme, setTheme }}>  
      {children}  
    </ThemeContext.Provider>  
  );  
}  
 
子组件：ThemedButton
// 使用 useContext 访问 ThemeContext 的值  
function ThemedButton() {  
  // 使用 useContext Hook 获取 ThemeContext 的值  
  const { theme, setTheme } = useContext(ThemeContext);  
  
  return (  
    <button  
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}  
      style={{ background: theme }}  
    >  
      Toggle Theme  
    </button>  
  );  
}  
  
function App() {  
  return (  
    <ThemeProvider>  
      <ThemedButton />  
    </ThemeProvider>  
  );  
}  
  
export default App;

React 之 组件之间共享值useContext使用（十五）

使用 useContext 的代码栗子：

React 之组件之间共享值useContext使用（十五）