面试题：深入剖析React Context API的性能陷阱及优化策略

潜在性能问题

不必要的重渲染：当Context的Provider组件更新时，无论其传递的值是否变化，所有使用该Context的组件都会重新渲染。例如：

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

const MyContext = createContext();

const Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <MyContext.Provider value={{ count }}>
      <Child />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </MyContext.Provider>
  );
};

const Child = () => {
  const context = React.useContext(MyContext);
  console.log('Child re - rendered');
  return <div>{context.count}</div>;
};

在上述代码中，每次点击按钮更新count，Child组件都会重新渲染，即便Child组件可能并不关心count的变化。

嵌套过深导致性能损耗：如果Context嵌套层级过多，数据传递链条过长，会增加不必要的计算和渲染开销。

优化策略

使用React.memo：对于那些只依赖Context而不需要在其他props变化时更新的组件，可以使用React.memo进行包裹。例如：

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

const MyContext = createContext();

const Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <MyContext.Provider value={{ count }}>
      <React.memo(Child) />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </MyContext.Provider>
  );
};

const Child = () => {
  const context = React.useContext(MyContext);
  console.log('Child re - rendered');
  return <div>{context.count}</div>;
};

React.memo会浅比较组件的props，只有当props变化时才会重新渲染。由于这里Child组件只依赖Context，这样就避免了不必要的重新渲染。

精细化Context拆分：不要把过多的数据放在同一个Context中，将不同类型或变化频率不同的数据拆分到不同的Context。例如：

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

const UserContext = createContext();
const ThemeContext = createContext();

const Parent = () => {
  const [user, setUser] = useState({ name: 'John' });
  const [theme, setTheme] = useState('light');
  return (
    <UserContext.Provider value={user}>
      <ThemeContext.Provider value={theme}>
        <Child />
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
};

const Child = () => {
  const user = React.useContext(UserContext);
  const theme = React.useContext(ThemeContext);
  console.log('Child re - rendered');
  return (
    <div>
      {user.name} - {theme}
    </div>
  );
};

这样，如果user变化，只影响依赖UserContext的组件，theme变化只影响依赖ThemeContext的组件，减少了不必要的重渲染范围。

使用useReducer和useContext结合：通过useReducer来管理Context的值，利用useReducer的批处理特性减少不必要的渲染。例如：

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

const MyContext = createContext();

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

const Parent = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <MyContext.Provider value={{ state, dispatch }}>
      <Child />
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </MyContext.Provider>
  );
};

const Child = () => {
  const { state } = React.useContext(MyContext);
  console.log('Child re - rendered');
  return <div>{state.count}</div>;
};

useReducer可以将多个更新合并成一次，避免多次更新导致的多次渲染。

星途面试题库

面试题：深入剖析React Context API的性能陷阱及优化策略

知识考点

面试题答案

潜在性能问题

优化策略