面试题：React中Context的基本使用场景

适合使用Context管理数据的场景

跨层级传递数据：当组件嵌套层次较深，而深层组件需要使用顶层组件的数据时，使用props逐层传递数据会变得繁琐且不便于维护。例如，一个多层嵌套的用户信息展示组件，顶层组件获取了用户登录信息，深层的某个子组件需要展示用户头像，但中间层组件并不需要该数据，此时使用Context可直接将用户头像信息传递给深层组件，而无需经过中间层。
全局状态管理：一些应用级别的状态，如主题模式（暗黑模式/亮色模式）、用户登录状态等，多个组件都可能需要访问和更新。通过Context可以方便地在整个应用中共享这些状态，而不必在每个相关组件中重复设置状态管理逻辑。

创建和使用简单Context示例

创建Context
- 首先，在React项目中创建一个Context对象。假设我们要创建一个用于管理主题模式的Context，在一个名为ThemeContext.js的文件中编写以下代码：

import React from'react';

// 创建ThemeContext
export const ThemeContext = React.createContext();

export default ThemeContext;

使用Context
- 提供数据（Provider）：在顶层组件或合适的父组件中使用ThemeContext.Provider来提供数据。例如，在App.js中：

import React, { useState } from'react';
import ThemeContext from './ThemeContext';

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

    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            {/* 应用的其他组件 */}
        </ThemeContext.Provider>
    );
}

export default App;

- **消费数据（Consumer）**：在需要使用主题数据的子组件中，可以使用`ThemeContext.Consumer`来获取数据。例如，创建一个`ThemeComponent.js`组件：

import React from'react';
import ThemeContext from './ThemeContext';

function ThemeComponent() {
    return (
        <ThemeContext.Consumer>
            {({ theme, setTheme }) => (
                <div>
                    <p>当前主题: {theme}</p>
                    <button onClick={() => setTheme(theme === 'light'? 'dark' : 'light')}>
                        切换主题
                    </button>
                </div>
            )}
        </ThemeContext.Consumer>
    );
}

export default ThemeComponent;

这样就完成了一个简单的Context的创建和使用，实现了主题模式在组件间的共享和更新。

星途面试题库

面试题：React中Context的基本使用场景

知识考点

面试题答案

适合使用Context管理数据的场景

创建和使用简单Context示例