面试题：React中useContext在复杂组件树中的性能优化

可能导致性能问题的原因

不必要的重新渲染：当 useContext 中的数据发生变化时，所有使用该 Context 的组件都会重新渲染，即使它们实际上并不依赖于变化的数据。这会导致大量不必要的渲染，从而降低性能。
嵌套层级过深：多层嵌套组件增加了组件树的复杂度，使得 React 在进行渲染优化时变得更加困难。每一层组件的重新渲染都可能触发其所有子组件的重新渲染，进一步加剧性能问题。

性能优化方案及原理

使用 React.memo 或 shouldComponentUpdate：
- 原理：React.memo 是 React 提供的高阶组件，用于对函数组件进行浅比较。它会在组件接收到新的 props 时，对新旧 props 进行浅比较，如果 props 没有变化，则不会触发组件重新渲染。对于类组件，可以使用 shouldComponentUpdate 生命周期方法，手动实现类似的比较逻辑，根据 props 或 state 的变化来决定是否重新渲染组件。
- 示例：

import React from'react';

const MyComponent = React.memo((props) => {
  // 组件逻辑
  return <div>{props.value}</div>;
});

export default MyComponent;

拆分 Context：
- 原理：将大的 Context 拆分成多个小的 Context，每个 Context 只包含相关的数据。这样，当某个 Context 中的数据发生变化时，只有依赖该 Context 的组件会重新渲染，而不是所有使用 Context 的组件。
- 示例：

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

// 创建多个 Context
const UserContext = createContext();
const ThemeContext = createContext();

const UserProvider = ({ children }) => {
  const user = { name: 'John', age: 30 };
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

const ThemeProvider = ({ children }) => {
  const theme = { color: 'blue' };
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

const MyComponent = () => {
  const user = useContext(UserContext);
  const theme = useContext(ThemeContext);
  // 组件逻辑
  return (
    <div>
      <p>{user.name}</p>
      <p>{theme.color}</p>
    </div>
  );
};

export { UserProvider, ThemeProvider };
export default MyComponent;

使用 useReducer 替代部分 useContext：
- 原理：useReducer 可以将复杂的状态逻辑提取到一个 reducer 函数中，并且可以通过 dispatch 来控制状态变化。相比于直接使用 useContext 传递状态，useReducer 可以更好地管理状态更新，减少不必要的重新渲染。同时，可以将 useReducer 与 Context 结合使用，只在需要的地方传递 dispatch 和部分状态，而不是整个状态对象。
- 示例：

import React, { createContext, useContext, useReducer } from'react';

const CounterContext = createContext();

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
};

const MyComponent = () => {
  const { state, dispatch } = useContext(CounterContext);
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export { CounterProvider };
export default MyComponent;

星途面试题库

面试题：React中useContext在复杂组件树中的性能优化

知识考点

面试题答案

可能导致性能问题的原因

性能优化方案及原理