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

本文主要是介绍React 之组件之间共享值useContext使用（十五），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

使用 useContext 的代码栗子：

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;