面试题：React中Context在中等规模应用里的常见使用场景

使用Context实现状态共享步骤

创建Context对象：在项目合适位置（通常是src目录下的一个单独文件，如UserContext.js），使用createContext方法创建Context对象。

import React from'react';
const UserContext = React.createContext();
export default UserContext;

提供Context：在应用层级较高的组件（如App.js）中，通过UserContext.Provider来提供共享数据。假设我们有一个userLoggedIn状态表示用户登录状态。

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

function App() {
    const [userLoggedIn, setUserLoggedIn] = useState(false);
    return (
        <UserContext.Provider value={{ userLoggedIn, setUserLoggedIn }}>
            {/* 应用的其他组件 */}
        </UserContext.Provider>
    );
}

export default App;

消费Context：在需要使用用户登录状态的组件中，可以通过两种方式消费Context。
- 使用Context.Consumer（适用于类组件和函数组件）：

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

function SomeComponent() {
    return (
        <UserContext.Consumer>
            {({ userLoggedIn }) => (
                <div>
                    {userLoggedIn? <p>用户已登录</p> : <p>用户未登录</p>}
                </div>
            )}
        </UserContext.Consumer>
    );
}

export default SomeComponent;

- **使用`useContext`钩子（仅适用于函数组件）**：

import React, { useContext } from'react';
import UserContext from './UserContext';

function SomeComponent() {
    const { userLoggedIn } = useContext(UserContext);
    return (
        <div>
            {userLoggedIn? <p>用户已登录</p> : <p>用户未登录</p>}
        </div>
    );
}

export default SomeComponent;

使用Context相较于props drilling的优势

减少组件层级间数据传递繁琐性：在props drilling中，如果一个深层嵌套的组件需要某个数据，这个数据必须从顶层组件逐层传递下去，经过多个中间组件，即使这些中间组件并不需要该数据。而使用Context，深层组件可以直接获取到共享数据，无需经过不必要的中间传递。例如，在一个多层级菜单组件结构中，底层菜单项需要根据用户登录状态显示不同内容，使用props drilling会使数据传递链条冗长，而Context可以直接提供数据给底层菜单项。
提高代码可维护性：由于减少了props在组件间的层层传递，当共享数据发生变化时，只需要在Provider处修改，而不需要担心影响中间组件。例如，如果登录状态的管理逻辑改变，使用props drilling可能需要修改多个中间组件传递props的逻辑，而Context只需要修改Provider中的逻辑，降低了维护成本。
更好的组件复用性：使用Context，组件可以独立于数据的传递路径，只关心自身需要的数据。这使得组件在不同的应用场景下复用更加容易，因为不需要依赖特定的props传递结构。例如，一个显示用户信息的组件，无论它在应用的哪个位置，只要在UserContext.Provider作用范围内，都可以获取到用户登录状态数据进行展示，而props drilling可能因为传递路径不同导致组件复用困难。

星途面试题库

面试题：React中Context在中等规模应用里的常见使用场景

知识考点

面试题答案

使用Context实现状态共享步骤

使用Context相较于props drilling的优势