React 重新渲染：深入剖析 PureComponent 与 Hooks 函数组件

PureComponent 与 Hooks 函数组件

React 组件有两种主要类型：类组件和函数组件。类组件使用 class 声明，而函数组件使用 function 关键字声明。

类组件有许多生命周期方法，可以用来在组件的不同阶段执行特定任务。PureComponent 是一个特殊的类组件，它继承自 React.Component，并提供了一个 shouldComponentUpdate 方法。shouldComponentUpdate 方法用于决定组件是否需要在接收到新的 props 或 state 时重新渲染。

Hooks 函数组件是 React 16.8 中引入的新特性。它们与类组件具有相同的功能，但使用函数而不是类来声明。Hooks 函数组件没有生命周期方法，而是使用 useState 和 useEffect 等 Hooks 来管理状态和副作用。

PureComponent 是否可以在 Hooks 和函数组件的世界中被替换？

PureComponent 可以用来优化组件的性能，因为它可以防止组件在不必要的情况下重新渲染。然而，在 Hooks 和函数组件的世界中，PureComponent 并不是必需的。

Hooks 函数组件可以通过使用 useMemo 和 useCallback Hooks 来实现与 PureComponent 相同的优化效果。useMemo Hook 用于缓存组件的某些计算结果，而 useCallback Hook 用于缓存组件的某些函数。

例如，以下类组件使用 PureComponent 来优化其性能：

class MyComponent extends React.PureComponent {
  render() {
    const expensiveCalculation = this.calculateSomething();

    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{expensiveCalculation}</p>
      </div>
    );
  }
}

以下 Hooks 函数组件使用 useMemo 和 useCallback Hooks 来实现与 PureComponent 相同的优化效果：

const MyComponent = () => {
  const expensiveCalculation = useMemo(() => this.calculateSomething(), []);

  return (
    <div>
      <h1>{this.props.title}</h1>
      <p>{expensiveCalculation}</p>
    </div>
  );
};

React 重新渲染的一个有趣行为

React 重新渲染的一个有趣行为是，它会在组件的 render 方法中调用 console.log() 时重新渲染组件。

例如，以下组件会在每次重新渲染时在控制台中打印一条消息：

const MyComponent = () => {
  console.log('MyComponent rendered');

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};

这可能是因为 React 在组件的 render 方法中调用 console.log() 时会触发组件的重新渲染。

结论

PureComponent 可以用来优化组件的性能，因为它可以防止组件在不必要的情况下重新渲染。然而，在 Hooks 和函数组件的世界中，PureComponent 并不是必需的。

Hooks 函数组件可以通过使用 useMemo 和 useCallback Hooks 来实现与 PureComponent 相同的优化效果。

React 重新渲染的一个有趣行为是，它会在组件的 render 方法中调用 console.log() 时重新渲染组件。