# React.memo 与 PureComponent

URL: https://caijiao.org/react/chapter16/react-memo
Source: docs/react/chapter16/react-memo.md
Description: React.memo 和 PureComponent 都是优化 React 组件性能的工具。React.memo 是一个高阶组件，用于优化函数组件的渲染，而 PureComponent 是类组件的一个基类，自动进行浅层比较以避免不必要的渲染。本文将比较这两者的使用方式和不同之处。

在 React 中，组件的重新渲染是性能优化中的一个重要考虑因素。特别是在复杂的应用中，不必要的渲染可能会导致性能下降。为了避免这种情况，React 提供了两种优化方法：`React.memo` 和 `PureComponent`。这两者都有相似的目标，都是通过减少不必要的渲染来提升性能，但它们适用于不同类型的组件：`React.memo` 适用于函数组件，而 `PureComponent` 适用于类组件。

## React.memo

`React.memo` 是一个高阶组件（HOC），它用于包裹函数组件，并通过浅层比较 props 来决定是否重新渲染组件。如果组件的 props 没有变化，`React.memo` 会跳过渲染，从而优化性能。

### 示例：使用 React.memo

```javascript
import React, { useState } from 'react';

const ChildComponent = React.memo(({ count }) => {
  console.log('ChildComponent rendered');
  return <div>Count: {count}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ParentComponent;
````

在这个示例中，`ChildComponent` 被 `React.memo` 包裹。只有当 `count` 改变时，`ChildComponent` 才会重新渲染。即使 `ParentComponent` 重新渲染，`ChildComponent` 如果 `count` 没有变化则不会重新渲染。

## PureComponent

`PureComponent` 是 React 中的一个基类，它与 `Component` 类似，但它自动实现了 `shouldComponentUpdate` 方法，进行浅层比较 props 和 state。如果 props 和 state 没有变化，`PureComponent` 会阻止组件的重新渲染。

### 示例：使用 PureComponent

```javascript
import React, { PureComponent } from 'react';

class ChildComponent extends PureComponent {
  render() {
    console.log('ChildComponent rendered');
    return <div>Count: {this.props.count}</div>;
  }
}

class ParentComponent extends React.Component {
  state = { count: 0 };

  render() {
    return (
      <div>
        
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
      </div>
    );
  }
}

export default ParentComponent;
```

在这个示例中，`ChildComponent` 继承自 `PureComponent`，它会根据 props 和 state 的变化来决定是否重新渲染。当 `count` 改变时，`ChildComponent` 会重新渲染，否则不会重新渲染。

## React.memo 与 PureComponent 的区别

1. **适用类型**：

   * `React.memo` 适用于函数组件。
   * `PureComponent` 适用于类组件。

2. **功能实现**：

   * `React.memo` 是一个高阶组件，使用它可以包装函数组件并优化渲染。
   * `PureComponent` 是一个基类，它自动实现了 `shouldComponentUpdate` 方法，执行浅层比较来决定是否重新渲染。

3. **使用场景**：

   * `React.memo` 通常用于优化一些频繁渲染的函数组件，尤其是当 props 没有变化时。
   * `PureComponent` 用于类组件，当类组件的 props 或 state 没有变化时，它会自动阻止重新渲染。

## 总结

* `React.memo` 和 `PureComponent` 都可以帮助优化 React 组件的性能，通过减少不必要的渲染来提高应用的响应速度。
* `React.memo` 适用于函数组件，而 `PureComponent` 适用于类组件。二者都通过浅层比较 props 来决定是否进行渲染，从而避免不必要的更新。
* 如果你使用的是函数组件，`React.memo` 是首选的优化方法；如果是类组件，可以选择继承 `PureComponent` 来进行优化。