React组件状态

1. 什么是状态？

状态就是组件内部特有数据的载体（组件数据挂载方式），改变数据页面就会刷新，由组件自己设置和更改，也就是说由组件自己产生、维护，使用状态的目的就是为了在不同的状态下使组件的显示不同（自己管理），这在 React 中称为：条件渲染。

为什么用状态？

React 不能直接修改 DOM 来更新页面。React 采用声明式设计，需要通过状态的改变来更新页面

2. 使用状态 ：state 关键字

import React, { Component } from 'react'

export default class App extends Component {
  // 组件状态两种写法
  // state = {
  //   isLove: false
  // }

  constructor() {
    super()
    this.state = {
      isLove: false
    }
  }

  isLoveFunc = ()=> {
    this.setState({
      isLove: !this.state.isLove
    })
  }

  render() {
    return (
      <div>
        <h1>喜欢就收藏吧！</h1>
        <button onClick={ ()=>{ this.isLoveFunc() } }>{this.state.isLove?"取消收藏":"收藏"}</button>
      </div>
    )
  }
}

3. 使用状态 ：setState 关键字

this.state 是纯 js 对象，在 vue 中，data 属性是利用 object.defineproperty 处理过的，更改 data 的数据的时候会触发数据的 getter 和 setter，但是 React 中没有做这样的处理，如果直接更改的话，React 是无法得知的，所以，需要使用特殊的更改状态的方法 setState。

4. setState 同步异步

setState 处在同步逻辑中，异步更新状态，更新真实 Dom。

setState 处在异步逻辑中，V18：异步更新状态，更新真实 Dom，V17：同步更新状态，更新真实 Dom。但是要在 V18 中使用 createRoot 这个新的 renderapi。如果在 V18 中使用的还是 ReactDOM.render()这种老的 api 那结果是和 V17一致的。

setState 接受第二个参数，第二个参数是回调函数，状态和 Dom 更新完后就会被触发。