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 更新完后就会被触发。

5. 列表 key 值

React 的高效依赖于所谓的 Virtual-DOM，尽量不碰 DOM。对于列表元素来说会有一个问题：元素可能会在一个列表中改变位置。要实现这个操作，只需要交换一下 DOM 位置就行了，但是 React 并不知道其实我们只是改变了元素的位置，所以它会重新渲染后面两个元素 （再执行 virtua-DOM），这样会大大增加 DOM 操作。但如果给每个元素加上唯一的标识，React 就可以知道这两个元素只是交换了位置，这个标识就是 key，这个 key 必须是每个元素唯一的标识。为了列表的复用和重排，设置 key 值提高性能。理想 key 值为 item.id。然而在不涉及到列表的增加删除、重排设置成索引值也没有问题。