面试题：React中shouldComponentUpdate与React.memo的区别

shouldComponentUpdate原理

shouldComponentUpdate 是React类组件的生命周期方法。当组件接收到新的props或state时，React会调用此方法。如果返回 true，则组件会重新渲染；返回 false，则阻止组件重新渲染。其原理是通过在该方法中手动比较新旧props和state，决定是否有必要重新渲染，从而跳过不必要的渲染过程，提升性能。

shouldComponentUpdate使用场景

复杂计算场景：当组件重新渲染涉及复杂的计算或昂贵的DOM操作时，通过 shouldComponentUpdate 来判断是否真正需要更新。例如一个表格组件，只有在数据发生变化时才重新渲染表格，而不是每次父组件更新都渲染。
性能敏感场景：在性能要求较高的应用中，对频繁更新的组件使用 shouldComponentUpdate 优化。比如实时显示数据的仪表盘组件，避免无意义的重新渲染。

React.memo原理

React.memo 是一个高阶组件，它对函数组件进行了浅比较优化。当函数组件的props没有变化时，React.memo 会阻止组件重新渲染。它内部通过对新老props进行浅比较（只比较对象的第一层属性），如果相同则返回缓存的结果，不触发重新渲染。

React.memo使用场景

纯展示组件：对于只接收props并展示数据，不涉及复杂逻辑和内部state的组件非常适用。例如一个简单的展示用户名的组件，只要用户名props不变，就不需要重新渲染。
函数组件性能优化：在函数组件中方便地实现类似 shouldComponentUpdate 的功能，减少不必要的渲染。

实际应用差异举例

类组件使用shouldComponentUpdate

import React, { Component } from 'react';

class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 比较新旧props的某个属性
    return this.props.value!== nextProps.value;
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

函数组件使用React.memo

import React from'react';

const MyFunctionComponent = React.memo((props) => {
  return <div>{props.value}</div>;
});

在上述例子中，shouldComponentUpdate 是在类组件内部定义逻辑，可进行复杂的比较。而 React.memo 直接包裹函数组件，默认进行浅比较，使用更简洁，但不适用于props为复杂对象且需深度比较的场景。如果 MyFunctionComponent 的 props 是一个复杂对象且内部属性变化需要重新渲染，就需要传入自定义比较函数作为 React.memo 的第二个参数来进行深度比较。而 shouldComponentUpdate 则可在类组件内灵活实现深度比较逻辑。

星途面试题库