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>
      <ChildComponent count={count} />
      <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>
        <ChildComponent count={this.state.count} />
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
      </div>
    );
  }
}

export default ParentComponent;

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