首页react的usecontext用法

react的usecontext用法

时间: 2025-03-27 13:03:09 浏览: 48

### React `useContext` Hook 使用示例与最佳实践 #### 创建上下文对象通过调用 `React.createContext(defaultValue)` 来创建一个上下文对象。此函数接受一个默认值参数，在没有任何提供者时会使用该默认值。 ```javascript import React, { createContext } from 'react'; // 定义主题上下文，默认浅色模式 const ThemeContext = createContext('light'); ``` #### 提供上下文数据利用 `<ThemeContext.Provider>` 组件向其子组件树中的所有组件传递自定义数据。 ```jsx function App() { const [theme, setTheme] = useState('dark'); return ( <ThemeContext.Provider value={theme}> {/* 子组件 */} </ThemeContext.Provider> ); } ``` #### 订阅上下文变化在消费方组件内部，可以借助 `useContext(ThemeContext)` 获取当前上下文中存储的数据，并响应式更新UI[^1]。 ```jsx import React, { useContext } from 'react'; import { ThemeContext } from './path-to-context'; function ThemedButton() { const theme = useContext(ThemeContext); return ( <button style={{ background: theme === 'dark' ? '#000' : '#fff' }}> Toggle Theme </button> ); } ``` 为了优化性能并遵循良好的编码习惯： - **避免不必要的渲染**：仅当真正需要访问上下文的组件才应订阅它； - **合理拆分逻辑**：如果多个地方都需要获取相同的信息，则考虑重构成更细粒度的小型上下文； - **谨慎处理嵌套层次过深的情况**：过多层级可能导致难以维护的问题；

阅读全文