面试题：React中Context API的基本使用场景是什么

适合使用Context API的情况

跨组件层级传递数据：当需要在组件树中多个层级之间传递数据，而不必在每个中间组件手动传递时。例如，一个应用的主题（亮色或暗色）需要在多个深层组件中使用，不必在每一层组件都进行props传递。
共享状态管理：对于一些需要在多个不相关组件间共享的状态，如用户登录信息等，使用Context API可以方便地实现共享，而无需复杂的状态提升。

创建和使用简单Context示例

创建Context：

import React from 'react';

// 创建一个Context对象
const MyContext = React.createContext();

export default MyContext;

使用Context - 提供数据：

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

function App() {
  const data = { message: 'Hello from Context' };
  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  return <GrandChildComponent />;
}

function GrandChildComponent() {
  return (
    <MyContext.Consumer>
      {contextData => <p>{contextData.message}</p>}
    </MyContext.Consumer>
  );
}

export default App;

在上述示例中，首先创建了MyContext。然后在App组件中通过MyContext.Provider提供数据data，在深层的GrandChildComponent组件中通过MyContext.Consumer消费数据并展示。从React 16.8+起，还可以使用useContext Hook来消费Context，如下：

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

function GrandChildComponent() {
  const contextData = useContext(MyContext);
  return <p>{contextData.message}</p>;
}

export default GrandChildComponent;

星途面试题库

面试题：React中Context API的基本使用场景是什么

知识考点

面试题答案

适合使用Context API的情况

创建和使用简单Context示例