编辑“︁Next.js React Context”︁

{{DISPLAYTITLE:Next.js React Context}}  
{{Stub|This article is a comprehensive guide to using React Context in Next.js for state management.}}  

== 介绍 ==  
'''React Context''' 是 React 提供的一种跨组件共享数据的机制，无需通过逐层传递 props。在 Next.js 中，Context 可以用于管理全局状态（如用户认证、主题偏好或语言设置），避免“prop drilling”问题。  

Context 由两部分组成：  
* '''Provider'''：包裹组件树并传递数据。  
* '''Consumer'''（或 `useContext` Hook）：在子组件中访问数据。  

== 核心概念 ==  
=== Context 的创建 ===  
使用 `createContext` 初始化一个 Context 对象，并定义默认值：  
<syntaxhighlight lang="javascript">  
import { createContext } from 'react';  

const ThemeContext = createContext('light'); // 默认值为 'light'  
</syntaxhighlight>  

=== Provider 的使用 ===  
通过 `Provider` 将数据传递给子组件：  
<syntaxhighlight lang="javascript">  
function App({ children }) {  
  const [theme, setTheme] = useState('dark');  

  return (  
    <ThemeContext.Provider value={{ theme, setTheme }}>  
      {children}  
    </ThemeContext.Provider>  
  );  
}  
</syntaxhighlight>  

=== Consumer 的访问 ===  
子组件通过 `useContext` Hook 获取数据：  
<syntaxhighlight lang="javascript">  
function Button() {  
  const { theme, setTheme } = useContext(ThemeContext);  

  return (  
    <button onClick={() => setTheme('light')}>  
      Current Theme: {theme}  
    </button>  
  );  
}  
</syntaxhighlight>  

== 实际案例：主题切换 ==  
以下是一个完整的 Next.js 示例，实现动态主题切换：  

1. **创建 Context**：  
<syntaxhighlight lang="javascript">  
// contexts/ThemeContext.js  
import { createContext, useState } from 'react';  

export const ThemeContext = createContext();  

export function ThemeProvider({ children }) {  
  const [theme, setTheme] = useState('light');  

  return (  
    <ThemeContext.Provider value={{ theme, setTheme }}>  
      {children}  
    </ThemeContext.Provider>  
  );  
}  
</syntaxhighlight>  

2. **包裹应用**（在 `_app.js` 中）：  
<syntaxhighlight lang="javascript">  
// pages/_app.js  
import { ThemeProvider } from '../contexts/ThemeContext';  

export default function MyApp({ Component, pageProps }) {  
  return (  
    <ThemeProvider>  
      <Component {...pageProps} />  
    </ThemeProvider>  
  );  
}  
</syntaxhighlight>  

3. **在组件中使用**：  
<syntaxhighlight lang="javascript">  
// components/ThemeToggle.js  
import { useContext } from 'react';  
import { ThemeContext } from '../contexts/ThemeContext';  

export default function ThemeToggle() {  
  const { theme, setTheme } = useContext(ThemeContext);  

  return (  
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>  
      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>  
        Toggle Theme  
      </button>  
    </div>  
  );  
}  
</syntaxhighlight>  

== 性能优化 ==  
默认情况下，Context 的更新会触发所有消费者的重渲染。可通过以下方式优化：  
* 将 Provider 的 `value` 记忆化（使用 `useMemo`）。  
* 拆分高频和低频更新的 Context。  

<syntaxhighlight lang="javascript">  
function App() {  
  const [user, setUser] = useState(null);  
  const userValue = useMemo(() => ({ user, setUser }), [user]);  

  return (  
    <UserContext.Provider value={userValue}>  
      <Content />  
    </UserContext.Provider>  
  );  
}  
</syntaxhighlight>  

== 与其他状态管理方案的对比 ==  
{| class="wikitable"  
|+  
! 方案 !! 适用场景 !! 优缺点  
|-  
| React Context | 中小型应用、低频更新 | ✅ 无依赖；❌ 频繁更新性能差  
|-  
| Redux | 大型应用、复杂状态 | ✅ 可预测性；❌ 样板代码多  
|-  
| Zustand | 轻量级全局状态 | ✅ 简单；❌ 功能较少  
|}  

== 常见问题 ==  
=== 何时使用 Context？ ===  
* 需要跨多层组件共享状态时（如用户信息、主题）。  
* 避免用于高频更新的状态（如表单输入）。  

=== 如何避免不必要的渲染？ ===  
* 使用 `memo` 包裹子组件。  
* 拆分 Context（如分离 `state` 和 `dispatch`）。  

== 总结 ==  
React Context 是 Next.js 中管理全局状态的有效工具，适合中低频数据共享。通过合理优化，可以平衡开发效率与性能。  

<mermaid>  
graph TD  
  A[App] --> B[ThemeProvider]  
  B --> C[Page]  
  C --> D[ComponentA]  
  C --> E[ComponentB]  
  D --> F[使用useContext]  
  E --> F  
</mermaid>

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js状态管理]]