什么是有状态组件？什么是无状态组件？

本文链接：https://blog.youkuaiyun.com/www61621/article/details/127745712

本文对比了React中的有状态组件和无状态组件，阐述了它们的区别，包括有状态组件如何管理状态，无状态组件的纯展示特性，以及如何通过Hook为函数组件添加状态以提升性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有状态组件和无状态组件指的是组件是否有自己的数据（state）

有状态组件

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: '张三'
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    )
  }
}
注：类组件继承React.Component组件，会从父类中继承一个state属性，通过这个属性可以定义自己的状态

无状态组件

function App() {
  return (
    <div>
      <h1>hello</h1>
    </div>
  )
}
注：函数式组件没有继承React.Component组件，没有state属性，没有自己的状态 (使用HOOK可以给函数式组件添加状态)

函数式无状态组件特点

● 它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到state状态的操作。  
● 组件不能访问this对象  
● 不能访问生命周期方法

函数式组件的性能优化

减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。
减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。