面试题：React中上下文API的基本使用场景

Question

请阐述在React组件开发中，哪些场景适合使用上下文（Context）API ？并举例说明如何通过上下文API在祖孙组件间传递数据。

Answer 1

适合使用Context API的场景

1. 全局状态管理：当应用中有一些需要在多个组件层级间共享的状态，如用户认证信息、主题设置等，若使用传统的props层层传递会非常繁琐，此时适合用Context。例如一个多页面应用，用户登录状态需要在多个不同层级的组件中使用，用Context可方便共享该状态。
2. 跨层级组件通信：祖孙组件间数据传递，如果中间组件不需要该数据，但仍需通过props层层传递，使用Context可直接跨越中间层级进行通信。

通过Context API在祖孙组件间传递数据示例

1. 创建Context对象

import React from 'react';
// 创建Context对象
const MyContext = React.createContext();
export default MyContext;

2. 在顶层组件提供数据

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

function Grandparent() {
  const data = 'Hello from grandparent';
  return (
    <MyContext.Provider value={data}>
      <Parent />
    </MyContext.Provider>
  );
}

function Parent() {
  return <Child />;
}

function Child() {
  const contextData = React.useContext(MyContext);
  return <div>{contextData}</div>;
}

export default Grandparent;

在上述代码中，Grandparent 组件通过 MyContext.Provider 提供数据，Child 组件通过 React.useContext(MyContext) 获取数据，实现了祖孙组件间的数据传递，而 Parent 组件无需关心和处理该数据。