组件的state和setState

state

---

Component的显示形态是有它的数据状态和参数决定的。React.js的state就是用来存储这种可变化的状态。
例如以下代码：

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class LikeButton extends Component {
  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    return (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked ? '取消' : '点赞'} 
      </button>
    )
  }
}
···

isLiked被存放在实例的state对象中，这个对象在构造函数里被初始化。这个Component的render方法里，会根据state中isLiked的不同显示‘取消’或者‘点赞’，并且button加上了点击的事件监听。

在 handleClickOnLikeButton 事件监听方法中，使用setState方法，每次点击会更新isLiked的属性为!isLiked，这样就完成了点赞和取消。

setState方法是由父类Component提供的。当我们调用这个函数的时候，React.js会更新组件的状态state，并且重新调用render方法，更新显示页面内容。

注意，不能直接使用 this.state = xxx 的方式来修改，如果这样做React.js就没法知道你修改了的组件的状态，也就没法刷新页面。所以，一定要使用setState的方法，它接受一个对象或者函数作为参数。

传入一个对象的时候，只需要传递要更新的属性就可以了。例如：

  constructor (props) {
    super(props)
    this.state = {
      name: 'Sam',
      isLiked: false
    }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

handleClickOnLikedButton方法里不需要改吗state中的name属性，因此在setState方法中是需要传入isLiked属性就可以了。

setState接受函数作为参数

---

当你调用setState方法时，React.js并不会马上修改state，而是把这个对象放到一个更新队列中，稍后才会从队列中把新的状态提取出来合并到state当中，然后再出发组件更新。这一点要特别注意，可以体会一下以下代码：

  handleClickOnLikeButton () {
    console.log(this.state.isLiked)//false
    this.setState({
      isLiked: !this.state.isLiked
    })
    console.log(this.state.isLiked)//false
  }

此时控制台会输出两次false，即使中间调用了一次setState方法，也没有什么bug，但是isLiked得值并没有改变。只是React.js得setState把传进来的状态缓存了，没有立即更新，所以第二次打印时，还是原来的isLiked。

所以如果想在setState之后使用新的state来做后续的运算就做不到了，例如：

  handleClickOnLikeButton () {
    this.setState({ count: 0 }) // => this.state.count 还是 undefined
    this.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN
    this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN
  }

上面的代码的运行结果并不能达到我们的预期，我们希望 count 运行结果是 3 ，可是最后得到的是 NaN。但是这种后续操作依赖前一个 setState 的结果的情况并不罕见。

来看第二种setState方法的第二种使用方式，可以传入一个函数作为参数。React.js会把上一个setState的结果传入这个函数，你就可以使用该结果进行运算、操作，然后返回一个对象为更新state对象：

  handleClickOnLikeButton () {
    this.setState((prevState) => {
      return { count: 0 }
    })
    this.setState((prevState) => {
      return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
    })
    this.setState((prevState) => {
      return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
    })
    // 最后的结果是 this.state.count 为 3
  }

这样就可以达到上述的利用上一次 setState 结果进行运算的效果。

setState合并

---

上面进行了三次setState，但实际上组件只会重新渲染一次，而不是三次。这是因为React.js内部会把JavaScript事件循环中的消息队列的同一个消息中的setState都进行合并以后再重新渲染组件。

深层的原理我也没搞太清楚，现阶段只要记住：在使用React.js的时候，并不需要担心多次进行setState会带来性能问题。