面试题：React中如何通过Context管理用户认证状态的基本实现

创建Context对象：

使用createContext方法从react库中创建Context对象。例如：

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

在组件中使用Provider传递认证状态：

在需要传递认证状态的组件（通常是较高层级的组件）中，使用创建好的Context的Provider组件。
将认证状态作为value属性传递给Provider。假设认证状态是一个包含isAuthenticated（布尔值表示是否已认证）和user（用户信息对象）的对象。

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

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [user, setUser] = useState(null);
  const authState = { isAuthenticated, user };
  return (
    <AuthContext.Provider value={authState}>
      {/* 应用的其他组件 */}
    </AuthContext.Provider>
  );
};

export default App;

子组件如何消费该状态：

方法一：使用Context.Consumer（适用于类组件和函数组件）：

在子组件中引入Context对象。
使用Context.Consumer组件，它接受一个函数作为子元素，该函数接收value（即Provider传递的认证状态）作为参数。

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

const ChildComponent = () => {
  return (
    <AuthContext.Consumer>
      {authState => {
        const { isAuthenticated, user } = authState;
        return (
          <div>
            {isAuthenticated? <p>Welcome, {user.name}</p> : <p>Please log in</p>}
          </div>
        );
      }}
    </AuthContext.Consumer>
  );
};

export default ChildComponent;

方法二：使用useContext钩子（仅适用于函数组件）：

引入useContext钩子和Context对象。
使用useContext钩子获取认证状态。

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

const AnotherChildComponent = () => {
  const authState = useContext(AuthContext);
  const { isAuthenticated, user } = authState;
  return (
    <div>
      {isAuthenticated? <p>Hello, {user.name}</p> : <p>Not logged in</p>}
    </div>
  );
};

export default AnotherChildComponent;

面试题：React中如何通过Context管理用户认证状态的基本实现

知识考点

面试题答案