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 (
)
}
}
···
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会带来性能问题。