reactjs的setState

setState接受参数

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

handleClickOnLikeButton () {

    console.log(this.state.isLiked)

    this.setState({

      isLiked: !this.state.isLiked

    })

    console.log(this.state.isLiked)

  }

你会发现两次打印的都是 false，即使我们中间已经 setState 过一次了。这并不是什么 bug，只是 React.js 的 setState 把你的传进来的状态缓存起来，稍后才会帮你更新到 state 上，所以你获取到的还是原来的 isLiked。

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

深层的原理并不需要过多纠结，你只需要记住的是：在使用 React.js 的时候，并不需要担心多次进行 setState 会带来性能问题。