React 中 useContext 的使用方式和使用场景有哪些？ - 前端面试题

React 中的 useContext 钩子是一个用于让组件能够访问 React 上下文（Context）的工具。这个上下文设计用于共享那些对于一个组件树而言是“全局”的数据，如当前认证的用户、主题或首选语言等。

使用方式：

首先，你需要创建一个 Context 对象。这可以通过 React.createContext() 完成，并且通常会在组件树的较高层级上完成。

javascript
import React from 'react';

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

一旦你有了一个 Context 对象，就可以使用 Context.Provider 组件包裹你的组件树的一部分，以在其下所有的组件中提供上下文数据。

javascript
<MyContext.Provider value={/* 某些值 */}>
  {/* 组件树 */}
</MyContext.Provider>

然后，在组件树中的任何层级上，你都可以使用 useContext 钩子来访问该上下文。

javascript
import React, { useContext } from 'react';

function MyComponent() {
  // 使用 useContext 钩子获取上下文值
  const contextValue = useContext(MyContext);
  return <div>{/* 使用 contextValue 做些什么 */}</div>;
}

通过使用 useContext 钩子，你不需要通过组件的 props 手动传递数据，可以直接访问上层组件通过 Context.Provider 提供的数据。

使用场景：

主题切换：当你想要在应用程序中切换主题时，你可以使用上下文来保持当前主题的状态，并在整个应用程序中轻松访问它。
用户认证：在需要知道当前用户是否已经登录的多个组件中，你可以使用上下文来共享用户的登录状态和用户信息。
国际化：你可以使用上下文来存储当前的语言设置，并在组件树中的任何地方访问它，以便于国际化。
状态管理：在某些简单的情况下，你可以使用上下文来代替其他状态管理库（如 Redux），来存储和管理全局状态。

示例：

假设我们有一个需要在多个组件之间共享的用户认证状态，可以这样使用 useContext：

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

// 创建上下文对象，初始值为 null
export const AuthContext = createContext(null);

// 创建一个提供者组件
export const AuthProvider = ({ children }) => {
  const [authUser, setAuthUser] = useState(null);

  // 登录逻辑
  const signIn = (username, password) => {
    // 假设验证逻辑在这里
    const user = { name: 'Mock User', username };
    setAuthUser(user);
  };

  // 登出逻辑
  const signOut = () => {
    setAuthUser(null);
  };

  return (
    <AuthContext.Provider value={{ authUser, signIn, signOut }}>
      {children}
    </AuthContext.Provider>
  );
};

// App.js
import React from 'react';
import { AuthProvider } from './AuthContext';
import MyComponent from './MyComponent';

function App() {
  return (
    <AuthProvider>
      <MyComponent />
    </AuthProvider>
  );
}

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

function MyComponent() {
  const { authUser, signIn, signOut } = useContext(AuthContext);

  return (
    <div>
      {authUser ? (
        <div>
          <p>Welcome, {authUser.name}!</p>
          <button onClick={signOut}>Sign out</button>
        </div>
      ) : (
        <button onClick={() => signIn('user', 'password')}>
          Sign in
        </button>
      )}
    </div>
  );
}