面试题：React 中 shouldComponentUpdate 的性能优化策略

shouldComponentUpdate 基础使用

shouldComponentUpdate 是 React 组件的生命周期方法，它接收 nextProps 和 nextState 作为参数。该方法返回一个布尔值，true 表示组件应该更新，false 则表示组件不应该更新。
示例代码：

class MyComplexComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 这里开始进行对比逻辑
    return true; // 初始默认返回 true，即每次都更新
  }
  render() {
    return (
      // 组件的渲染内容
    );
  }
}

对比 props 的变化
- 浅对比：
  - 对于简单数据类型（如字符串、数字、布尔值）的 props，可以直接进行比较。例如，如果组件接收一个 count 的数字 prop：
```
shouldComponentUpdate(nextProps, nextState) {
  if (this.props.count!== nextProps.count) {
    return true;
  }
  return false;
}
```
- 深对比：
  - 当 props 是对象或数组时，浅对比可能会失效，因为对象和数组比较的是引用。此时需要进行深对比。可以使用 lodash 库中的 isEqual 方法来进行深对比。例如，如果组件接收一个 config 对象 prop：
```
import _ from 'lodash';
shouldComponentUpdate(nextProps, nextState) {
  if (!_.isEqual(this.props.config, nextProps.config)) {
    return true;
  }
  return false;
}
```
对比 state 的变化
- 同样可以采用类似对比 props 的方式。对于简单数据类型的 state 直接比较，对于复杂数据类型（对象、数组）进行深对比。
- 例如，如果组件有一个 userInfo 对象的 state：
```
import _ from 'lodash';
shouldComponentUpdate(nextProps, nextState) {
  if (!_.isEqual(this.state.userInfo, nextState.userInfo)) {
    return true;
  }
  return false;
}
```
处理子组件的更新问题
- 使用 React.memo：
  - 对于函数式子组件，可以使用 React.memo 进行包裹。React.memo 会对函数式组件的 props 进行浅对比，如果 props 没有变化，则不会重新渲染该子组件。例如：
```
const MyFunctionalChild = React.memo((props) => {
  return (
    // 子组件渲染内容
  );
});
```
- 控制子组件 props 的传递：
  - 确保传递给子组件的 props 是稳定的。如果父组件中有一些数据在频繁变化但对子组件没有影响，不要将这些数据作为 props 传递给子组件。这样可以减少子组件不必要的更新。例如，如果父组件有一个 loading 状态，而子组件并不关心这个状态，就不要将 loading 作为 prop 传递给子组件。
- shouldComponentUpdate 在子组件中的使用：
  - 如果子组件是类组件，也可以在子组件中实现 shouldComponentUpdate 方法。按照与父组件类似的方式对比 props 和 state 的变化，来决定子组件是否需要更新。例如：
```
class MyClassChild extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 对比逻辑
    return true;
  }
  render() {
    return (
      // 子组件渲染内容
    );
  }
}
```

通过以上方法，可以有效利用 shouldComponentUpdate 对复杂 React 组件及其子组件进行性能优化，避免不必要的渲染。

星途面试题库

面试题：React 中 shouldComponentUpdate 的性能优化策略

知识考点

面试题答案