面试题：React 中 memo 如何优化 Context 子组件更新

使用 memo 优化 Context 子组件更新的原理

在 React 中，memo 是一个高阶组件，它用于对函数式组件进行浅比较优化。当组件的 props 没有发生变化时，memo 会阻止组件重新渲染。

在 Context 场景下，由于 Context 的变化会导致所有使用该 Context 的组件重新渲染，即使子组件自身的 props 并未改变。memo 通过对传入子组件的 props 进行浅比较，如果 props 没有变化，就不会触发子组件的重新渲染，从而达到优化的目的。

示例代码

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

// 创建 Context
const MyContext = createContext();

// 上下文提供组件
const ContextProvider = ({ children }) => {
  const contextValue = { message: 'Hello, Context!' };
  return (
    <MyContext.Provider value={contextValue}>
      {children}
    </MyContext.Provider>
  );
};

// 子组件，使用 memo 进行优化
const MemoizedChild = memo(({ someProp }) => {
  const context = useContext(MyContext);
  return (
    <div>
      <p>{context.message}</p>
      <p>{someProp}</p>
    </div>
  );
});

// 父组件
const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  return (
    <ContextProvider>
      <MemoizedChild someProp="Some value" />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </ContextProvider>
  );
};

export default ParentComponent;

在上述代码中，MemoizedChild 组件使用了 memo 进行包裹。当 ParentComponent 中的 count 状态变化时，由于 MemoizedChild 的 props（即 someProp）没有改变，并且 memo 进行了浅比较，所以 MemoizedChild 不会因为 Context 变化或者父组件状态变化而重新渲染，除非 someProp 发生改变。

星途面试题库

面试题：React 中 memo 如何优化 Context 子组件更新

知识考点

面试题答案

使用 memo 优化 Context 子组件更新的原理

示例代码