面试题：React 中如何通过 Provider 和 Consumer 实现数据共享

Question

请描述在 React 应用里，使用 Provider 和 Consumer 进行数据共享的基本步骤，并给出一个简单示例，例如传递用户登录信息给多个组件。

Answer 1

基本步骤

1. 创建 Context：使用 React.createContext() 创建一个上下文对象，这个对象包含 Provider 和 Consumer 两个属性。
2. 使用 Provider 传递数据：在需要共享数据的组件树的顶层，通过 Provider 的 value 属性传递数据，所有处于该 Provider 包裹下的子孙组件都可以获取到这个数据。
3. 使用 Consumer 接收数据：在需要使用共享数据的组件中，通过 Consumer 来订阅 Provider 传递的数据。Consumer 接受一个函数作为子元素，这个函数接收 Provider 传递的 value 作为参数，函数返回的 JSX 会使用这个数据进行渲染。

示例代码

import React, { createContext, useState } from 'react';

// 创建 Context
const UserContext = createContext();

// 模拟用户登录信息
const user = { name: 'John Doe', isLoggedIn: true };

function App() {
  const [userInfo, setUserInfo] = useState(user);

  return (
    // 使用 Provider 传递用户登录信息
    <UserContext.Provider value={{ userInfo, setUserInfo }}>
      <div>
        <ChildComponent />
      </div>
    </UserContext.Provider>
  );
}

function ChildComponent() {
  return (
    // 使用 Consumer 接收用户登录信息
    <UserContext.Consumer>
      {({ userInfo }) => (
        <div>
          {userInfo.isLoggedIn ? (
            <p>Welcome, {userInfo.name}!</p>
          ) : (
            <p>Please log in.</p>
          )}
        </div>
      )}
    </UserContext.Consumer>
  );
}

export default App;