React有状态组件和无状态组件

1.分别是什么

• 函数组件又叫做无状态组件，类组件又叫做有状态组件
• 状态（state）即数据
• 函数组件没有自己的状态，只负责数据显示（静）
• 类组件有自己的状态，负责更新UI，让页面“动起来”

案例如下：（需要使用有状态组件完成）

1.2state的基本使用

• 状态即数据，即组件内部的私有数据，只能在组件内部使用
• state的值是对象，表示一个组件中可以有多个数据

 class Hi extends React.Component{
   
      constructor(){
   
        super()
        //初始化state
        this.state = {
   
          count:0
        }
      }
      //简化写法
      //state = {
   
      	//count:0
//      }
      render(){
   
        return(
          <div>有状态组件{
   this.state.count}</div>
        )
      }
     }

     ReactDOM.render(<Hi></Hi>,document.getElementById('root'))

1.3setState（）修改状态

• 信息是可变的

• 语法：this.setState（{要修改的数据}）

• 注意：不要直接修改state中的值，这是错误的！！！！

• setState（）作用：1.修改state 2.更新UI

• 思想：数据驱动视图

class Hi extends React.Component{
   
      constructor(){
   
        super