使用react钩子跨组件携带页面上下文/状态

基础概念

React 钩子（Hooks）是 React 16.8 版本引入的新特性，允许你在不编写类组件的情况下使用状态（state）和其他 React 特性。useContext 是其中之一，用于在组件树中传递数据，而不必在每一层手动传递 props。

类型与应用场景

全局状态管理：适用于需要在多个组件间共享的状态，如用户登录信息、主题设置等。
主题切换：在不同页面或组件间保持一致的主题风格。
国际化：根据用户选择的语言显示不同的文本内容。

示例代码

假设我们有一个应用，需要在不同页面间共享用户的登录状态。

创建上下文

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

export const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

使用上下文

在应用的顶层组件中包裹 UserProvider：

import React from 'react';
import { UserProvider } from './UserContext';
import AppContent from './AppContent';

const App = () => {
  return (
    <UserProvider>
      <AppContent />
    </UserProvider>
  );
};

export default App;

在需要访问用户状态的组件中使用 useContext：

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

const UserProfile = () => {
  const { user, setUser } = useContext(UserContext);

  return (
    <div>
      {user ? (
        <div>
          <h1>Welcome, {user.name}!</h1>
          <button onClick={() => setUser(null)}>Logout</button>
        </div>
      ) : (
        <button onClick={() => setUser({ name: 'John Doe' })}>Login</button>
      )}
    </div>
  );
};

export default UserProfile;

遇到的问题及解决方法

问题：上下文值未更新

原因：可能是由于上下文提供者（Provider）的值没有正确更新，或者组件没有正确订阅上下文变化。

解决方法：

确保 UserProvider 中的状态更新逻辑正确。
使用 useEffect 监听上下文变化，确保组件重新渲染。

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

const UserProfile = () => {
  const { user, setUser } = useContext(UserContext);

  useEffect(() => {
    console.log('User context updated:', user);
  }, [user]);

  return (
    <div>
      {user ? (
        <div>
          <h1>Welcome, {user.name}!</h1>
          <button onClick={() => setUser(null)}>Logout</button>
        </div>
      ) : (
        <button onClick={() => setUser({ name: 'John Doe' })}>Login</button>
      )}
    </div>
  );
};

export default UserProfile;

通过这种方式，可以确保组件在上下文值变化时正确更新。