什么是纯组件？有什么作用？

纯组件是面向 React 的组件类型。它实现浅层比较（shallow comparison）机制，仅在 props 或 state 发生改变时才触发重新渲染，避免不必要的更新，从而提升性能。

具体定义与工作原理

• 定义：在 React 中，纯组件可以定义为通过 React.PureComponent 扩展的类组件或使用 React.memo 函数包裹的函数组件：

  import React, { PureComponent, memo } from 'react';
  
  // PureComponent 类写法
  class PureDemo extends PureComponent {
    render() {
      return <div>Pure Class Component</div>;
    }
  }
  
  // React.memo 函数写法
  const MemoizedComponent = memo(function MyComponent(props) {
    return <div>Pure Function Component</div>;
  });
  

• 工作原理：纯组件使用浅层比较检查 props 或 state 的变化：
  • 比较当前 props/state 和上一次的值（递归比较值类型或对象的一级属性）。
  • 若有差异则重新渲染，确保一致性。

主要作用

1. 优化性能：
   • 减少不必要的重渲染操作，尤其是在大型应用或频繁更新组件场景中。
   • 避免重复的计算，提高应用的响应速度和效率。
2. 简化开发：
   • 自动处理比较逻辑，无需手动编写 shouldComponentUpdate 代码实现比较。
   • 组件内部可保持简洁和关注核心功能的封装。
3. 状态解耦：
   • 仅依赖变化的部分进行渲染，有利于架构稳定和维护。

使用考虑点

• 适用于纯数据展示组件，不涉及复杂副作用操作。

• 避免使用于深层复杂对象，浅层比较可能缺失深层改变。需通过创建新对象来确保触发更新：

  <Example list={[...this.props.list]} />