持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

前言

之前文章说了更新state的数据，千万不要直接赋值，而是使用setState,这样页面才会更新数据。

今天来看看setState的语法。

react

setState

setState方法，可以直接传入对象，也可以传入函数。

要是传入对象，则key是要更新的的key，value是更新后的value。

  state = {
    text: 'hello world'
  }
  clickFn (text) {
    this.setState({
      text
    })
  }
  render () {
    return (
      < div onClick={this.clickFn.bind(this, '答案cp3')}>
        {this.state.text}
      </div>
    )
  }

text默认是hello world，点击后text就会变成答案cp3

你也可以传入函数,函数接受2个参数，state，props。state就是上面定义的state，props就是引用组件传入的props。

然后返回新的对象，会通过返回的对象更新state的值。

  this.setState((state, props) => {
    return {
      text: props.text
    }
  })

用props.text的值来更新state的text。

可能大家会有疑问，那setState是同步的还是异步的？

可以来试试，以第一个例子为例

  clickFn (text) {
    this.setState({
      text
    })
    console.log(text)
  }
  render () {
    return (
      < div onClick={this.clickFn.bind(this, '答案cp3')}>
        {this.state.text}
      </div>
    )
  }

可以看到打印的是hello world。那是不是可以说明setState是异步函数？

非也非也。它只是react对性能的一种优化，如果每次更新都要同步更新state，那么dom就要频繁更新，这对性能来说是很大的挑战。

react会把多个setState的更新只执行一遍。

如果你想要获取到更新后的state，可以在setState传入第二个参数，回调函数。在这个回调函数里面可以拿到更新后的state.

  clickFn (text) {
    this.setState({
      text
    }, () => {
      console.log(this.state.text)
    })
  }
  render () {
    return (
      < div onClick={this.clickFn.bind(this, '答案cp3')}>
        {this.state.text}
      </div>
    )
  }

可以看到打印的是答案cp3。

总结

react更新state的数据不要通过直接赋值，而是通过setState来更新，然后它会表现的像是异步函数。

可以在第二个参数，传入回调函数，拿到更新后的state。

学习react的语法（4）

前言

react

setState

总结