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

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

有状态组件

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'hello react'
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    )
  }
}

 

• 类组件继承React.Component组件，会从父类中继承一个state属性，通过这个属性可以定义自己的状态

无状态组件

function App() {
  return (
    <div>
      <h1>hello</h1>
    </div>
  )
}

• 函数式组件没有继承React.Component组件，没有state属性，没有自己的状态 (使用HOOK可以给函数式组件添加状态)