面试题：React中Context订阅模式下如何避免不必要的渲染

shouldComponentUpdate

原理：在类组件中，shouldComponentUpdate 方法用于控制组件是否需要重新渲染。它接收 nextProps 和 nextState 作为参数，通过返回 true 或 false 来决定组件是否更新。当 Context 变化时，如果我们能确定组件不需要更新，可以返回 false 来避免不必要渲染。
示例：

import React, { Component } from 'react';
import MyContext from './MyContext';

class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 这里假设只有当props中的特定字段变化时才更新，而忽略Context变化
    return this.props.someProp!== nextProps.someProp;
  }

  render() {
    return (
      <MyContext.Consumer>
        {context => (
          <div>
            {context.value}
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

export default MyComponent;

React.memo

原理：React.memo 是一个高阶组件，用于对函数组件进行浅比较优化。它会对组件的 props 进行浅比较，如果 props 没有变化，就不会重新渲染组件，从而避免由于 Context 变化带来的不必要渲染（前提是组件只依赖 props，不依赖 Context 变化引起的其他状态改变）。
示例：

import React from'react';
import MyContext from './MyContext';

const MyComponent = React.memo((props) => {
  return (
    <MyContext.Consumer>
      {context => (
        <div>
          {context.value}
        </div>
      )}
    </MyContext.Consumer>
  );
});

export default MyComponent;

useMemo

原理：useMemo 用于在函数组件中缓存计算结果。当依赖项没有变化时，不会重新计算 useMemo 中的函数。在 Context 订阅场景下，如果组件中有一些基于 Context 的复杂计算，可以使用 useMemo 缓存结果，避免不必要的重新计算，进而减少因 Context 变化带来的不必要渲染。
示例：

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

const MyComponent = () => {
  const context = useContext(MyContext);
  const complexValue = useMemo(() => {
    // 复杂计算，依赖context.value
    return context.value * 2;
  }, [context.value]);

  return (
    <div>
      {complexValue}
    </div>
  );
};

export default MyComponent;

面试题：React中Context订阅模式下如何避免不必要的渲染

知识考点

面试题答案

shouldComponentUpdate

React.memo

useMemo