面试题：React路由中Context如何在组件间传递数据

创建Context对象：

使用createContext方法创建一个Context对象。例如：

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

在父组件中提供数据：

导入创建的Context对象。
使用Context.Provider组件包裹需要传递数据的子树。在Provider组件的value属性中传递要共享的数据。例如：

import React, { useState } from'react';
import UserContext from './UserContext';
import { BrowserRouter as Router } from'react-router-dom';

const App = () => {
  const [userLoginInfo, setUserLoginInfo] = useState({});
  // 假设这里有获取或更新用户登录信息的逻辑
  return (
    <Router>
      <UserContext.Provider value={{ userLoginInfo, setUserLoginInfo }}>
        {/* 其他子组件 */}
      </UserContext.Provider>
    </Router>
  );
};
export default App;

在子组件中消费数据：

有两种方式。

使用Context.Consumer：

导入Context对象。
在子组件中使用Context.Consumer组件，通过函数作为子元素的方式获取Context中的数据。例如：

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

const DeepNestedComponent = () => {
  return (
    <UserContext.Consumer>
      {({ userLoginInfo }) => (
        <div>
          {JSON.stringify(userLoginInfo)}
        </div>
      )}
    </UserContext.Consumer>
  );
};
export default DeepNestedComponent;

使用useContext Hook（适用于函数组件）：

导入useContext Hook和Context对象。
在函数组件中使用useContext获取Context中的数据。例如：

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

const AnotherDeepNestedComponent = () => {
  const { userLoginInfo } = useContext(UserContext);
  return (
    <div>
      {JSON.stringify(userLoginInfo)}
    </div>
  );
};
export default AnotherDeepNestedComponent;

路由切换时Context数据的更新机制：
- 由于React Router的路由切换会导致组件树的更新，Context数据更新的关键在于确保Provider组件中的value属性值发生变化时，依赖该Context的组件能重新渲染。
- 例如在App组件中，当用户登录信息发生变化时调用setUserLoginInfo更新userLoginInfo状态，Provider的value发生变化，所有依赖UserContext的组件会重新渲染从而获取到最新的数据。例如：
```
const App = () => {
  const [userLoginInfo, setUserLoginInfo] = useState({});
  const handleLogin = (newInfo) => {
    setUserLoginInfo(newInfo);
  };
  return (
    <Router>
      <UserContext.Provider value={{ userLoginInfo, setUserLoginInfo }}>
        {/* 登录组件可能在子树中，调用handleLogin更新用户登录信息 */}
      </UserContext.Provider>
    </Router>
  );
};
```
- 当路由切换到包含登录逻辑的组件，登录成功后调用handleLogin更新userLoginInfo，依赖UserContext的组件会重新渲染获取新的用户登录信息。

星途面试题库

面试题：React路由中Context如何在组件间传递数据

知识考点

面试题答案