React中函数组件与纯类组件的区别及组件概念困惑咨询

一、先理清几个核心概念 #

React Component（React组件） #

这是个统称——不管你用类还是函数写的，只要是React里用来封装UI、逻辑、可复用的代码块，都叫React组件，是React应用的基本组成单元。

Class Component（类组件） #

用ES6类语法写的组件，必须继承React.Component或者React.PureComponent。它自带状态管理（this.state）和一套生命周期方法（比如componentDidMount用来做初始化请求，componentWillUnmount做清理），早期React里管理复杂状态全靠它。
举个简单例子：

class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return <button onClick={() => this.setState({ count: this.state.count + 1 })}>
      点击{this.state.count}次
    </button>;
  }
}

Function Component（函数组件） #

用普通JS函数写的组件，早期就是个纯渲染函数——只接收props，返回JSX。现在有了Hooks（比如useState管状态，useEffect模拟生命周期），完全能实现类组件的所有功能，而且代码更简洁，现在React官方更推荐用这个。
例子：

import { useState } from 'react';

function Counter(props) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>
    点击{count}次
  </button>;
}

二、纯组件 vs 常规组件：该怎么选？ #

先搞懂纯组件的本质：它就是帮你自动做浅比较，避免不必要的重渲染，优化性能。

• 类组件里的纯组件是React.PureComponent，它会对比前后的props和state，只有当它们的值真的变了才重新渲染；而常规类组件（继承React.Component）默认只要父组件渲染，它就跟着重新渲染，不管自己的props/state有没有变化。
• 函数组件里没有“纯组件”这个类，但可以用React.memo这个高阶组件包裹函数组件，作用和PureComponent类似——浅比较props，没变化就不重渲染。

优先用纯组件的场景 #

1. 组件的渲染完全由props和state决定，没有依赖全局变量、上下文这类外部东西
2. 组件经常会收到相同的props，很容易触发无意义的重渲染（比如列表里的每个项，父列表更新但单个项的数据没改）
3. 组件渲染成本高（比如要渲染复杂表格、做大量计算），重渲染会拖慢性能

适合用常规组件的场景 #

1. 组件渲染依赖外部状态（比如全局Redux状态、React Context），浅比较检测不到这些变化，纯组件会导致更新不及时
2. 你需要自定义渲染逻辑（比如类组件里要自己写shouldComponentUpdate，或者函数组件里有每次渲染都要执行的副作用）
3. 组件本身很简单（比如一个显示文本的小组件），重渲染的性能开销可以忽略，没必要多一层浅比较的成本

内容的提问来源于stack exchange，提问作者Janani