面试题：React useContext在复杂组件结构下的状态管理优化

1. 设计Context结构

创建独立Context：为每种类型的状态创建独立的Context。例如，对于用户信息创建UserContext，主题设置创建ThemeContext，权限信息创建PermissionContext。这样做可以避免因为一种状态的变化导致所有依赖Context的组件不必要的重新渲染。

import React from 'react';

// 用户信息Context
export const UserContext = React.createContext();
// 主题设置Context
export const ThemeContext = React.createContext();
// 权限信息Context
export const PermissionContext = React.createContext();

Context Provider结构：在顶层组件中，使用Provider来包裹需要访问这些状态的组件树。可以将相关状态和更新函数作为value传递给Provider。

import React, { useState } from'react';
import { UserContext, ThemeContext, PermissionContext } from './contexts';

function App() {
  const [user, setUser] = useState({ name: '', age: 0 });
  const [theme, setTheme] = useState('light');
  const [permissions, setPermissions] = useState([]);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ThemeContext.Provider value={{ theme, setTheme }}>
        <PermissionContext.Provider value={{ permissions, setPermissions }}>
          {/* 应用的其余部分 */}
        </PermissionContext.Provider>
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

export default App;

2. 使用useContext避免性能问题

精准依赖：在组件中只使用需要的Context。例如，如果一个组件只关心主题设置，那么只使用ThemeContext。

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

function ThemeComponent() {
  const { theme } = useContext(ThemeContext);
  return <div>{`当前主题: ${theme}`}</div>;
}

export default ThemeComponent;

使用React.memo：对于那些依赖Context但不频繁更新的组件，可以使用React.memo进行包裹。React.memo会浅比较组件的props，如果props没有变化，组件不会重新渲染。因为Context的变化会作为props的变化传递给组件，所以可以有效避免不必要的重新渲染。

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

const ThemeComponent = React.memo(() => {
  const { theme } = useContext(ThemeContext);
  return <div>{`当前主题: ${theme}`}</div>;
});

export default ThemeComponent;

3. 不同层级组件中使用的最佳实践

尽量靠近使用组件：将Provider尽量靠近需要使用这些状态的组件树，而不是在顶层全局包裹。这样可以减少不必要的组件重新渲染范围。
避免过度嵌套：虽然Context可以跨层级传递数据，但过度嵌套Provider可能会导致代码难以维护。尽量保持组件结构清晰，避免过深的嵌套。
使用中间组件传递：如果某些组件需要将Context数据传递给子组件，可以在中间组件中获取Context数据，然后通过props传递给子组件。这样可以让子组件不直接依赖Context，提高组件的可测试性和复用性。

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

function MiddleComponent({ children }) {
  const { theme } = useContext(ThemeContext);
  return <div>{children(theme)}</div>;
}

function ChildComponent() {
  return (
    <MiddleComponent>
      {(theme) => <div>{`当前主题: ${theme}`}</div>}
    </MiddleComponent>
  );
}

export default ChildComponent;

面试题：React useContext在复杂组件结构下的状态管理优化

知识考点

面试题答案

1. 设计Context结构

2. 使用useContext避免性能问题

3. 不同层级组件中使用的最佳实践