React第三弹——什么是有状态组件和无状态组件

React第三弹——什么是有状态组件和无状态组件

提示：本人是自学前端的一枚小小程序媛，以下内容是自己总结的笔记，如有错误，欢迎大家批评指正！！！！

---

废话不多说，首先先要了解一个词"状态"，什么是状态呢？

通俗的说就是指组件中需要的数据。在React中，是以数据为驱动来进行页面更新的，要记住是数据改变，页面更新。在React中，用state表示状态，也就是组件内部的数据，在组件外部是拿不到的。

那对于有状态组件和无状态组件最简单的理解就是一个组件里面有状态(state)，一个组件里没有状态(state)，在React中规定，类组件是有状态组件，函数组件是无状态组件。 用户点击页面显示用到的就是用到类组件。当页面是静态的，不需要和用户进行交互的时候，就会用到函数组件。

有状态组件：
在类组件中是允许有state的，组件状态初始化有两种方式，一种是在constructor中，一种是直接定义

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
  state={
    count:10
  }
  render(){
    return (
    <div>组件{this.state.count}</div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
   constructor(){
     super()
     this.state={
       count:0
     }
   }
  render(){
    return (
    <div>组件{this.state.count}</div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

那么有了状态，我们在某些情况下需要修改状态，需要怎么修改呢，你可能首先会想到通过this.state.count来修改，但是不能这样修改。因为如果直接给state赋值并不能从本质改变state值，页面不会发生改变，因为那样修改是改变类实例的属性，组件的状态不发生改变，页面就不发生改变，要通过setState来修改。(状态驱动页面)，当state中还有其他数据的时候，setState更新数据只会改要改变的数据，不会替换里面的数据。

class App extends React.Component{
  state={
    count:10,
    test:0
  }
  render(){
    return (
    <div>
      计数器：{this.state.count}
      <button onClick={()=>{
        this.setState({
        count:this.state.count+1
      })}}>+1</button>
    </div>
    )
  }
}

函数组件中没有状态的概念，也就是说没有数据，但是函数组件的写法照比类组件简单了很多，所以后来为了简便组件的写法而且还需要状态，就出现了Hooks，Hooks就是让函数组件也可以使用状态，并且还有很多方便的使用技巧，在后期我会继续分享关于Hooks的知识点。