React—有状态--无状态组件

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

有状态组件和无状态组件指的是组件是否有自己的数据（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 都会重新从头开始执行函数调用。

总结：

以上是本节内容，希望有帮到你，想了解更多可以看我主页，谢谢观看！