面试题：React高阶组件与Context的性能优化

shouldComponentUpdate 优化

原理：shouldComponentUpdate 是 React 类组件的生命周期方法，通过在这个方法中自定义判断逻辑，决定组件是否需要重新渲染。如果返回 false，则组件不会重新渲染，从而避免不必要的性能开销。
示例代码：

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

class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 这里可以根据具体业务逻辑判断，例如只在props.id发生变化时才更新
    return this.props.id!== nextProps.id;
  }
  render() {
    return (
      <MyContext.Consumer>
        {context => (
          <div>
            <p>{context.value}</p>
            <p>{this.props.id}</p>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}

export default MyComponent;

性能分析思路：在优化前，Context 更新可能导致组件无论是否需要都重新渲染。使用 shouldComponentUpdate 后，通过合理的判断逻辑，减少了不必要的渲染次数。可以通过在 shouldComponentUpdate 方法内添加日志，观察渲染次数的变化，例如在控制台打印 console.log('shouldComponentUpdate', this.props.id, nextProps.id)，并对比优化前后的打印次数。

React.memo 优化

原理：React.memo 是一个高阶组件，用于对函数组件进行性能优化。它会对组件的 props 进行浅比较，如果 props 没有变化，则不会重新渲染组件。
示例代码：

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

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

export default MyComponent;

性能分析思路：优化前，函数组件可能因为 Context 更新而不必要地重新渲染。使用 React.memo 后，通过浅比较 props 避免了不必要的渲染。可以使用浏览器的性能分析工具（如 Chrome DevTools 的 Performance 面板），录制性能数据，观察优化前后函数组件渲染的时间和频率变化。在录制的性能数据中，查找组件渲染相关的事件，对比优化前后的渲染次数和渲染耗时。

useContext 代替 Context.Consumer 优化

原理：useContext 是 React Hook，相比 Context.Consumer，它在某些情况下能更精准地控制组件的更新。useContext 返回的 context 值变化时，使用它的组件才会重新渲染，而 Context.Consumer 可能因为父组件的一些无关更新而导致不必要的重新渲染。
示例代码：

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

const MyComponent = (props) => {
  const context = useContext(MyContext);
  return (
    <div>
      <p>{context.value}</p>
      <p>{props.id}</p>
    </div>
  );
};

export default MyComponent;

性能分析思路：优化前，使用 Context.Consumer 可能因为父组件或其他无关因素导致不必要的重渲染。使用 useContext 后，通过观察组件重新渲染的时机和频率来分析性能。同样可以借助浏览器性能分析工具，在工具中查看组件重新渲染的事件，对比优化前后的渲染情况，重点关注重新渲染是否只在 context 值真正变化时发生。

星途面试题库

面试题：React高阶组件与Context的性能优化

知识考点

面试题答案

shouldComponentUpdate 优化

React.memo 优化

useContext 代替 Context.Consumer 优化