react中的state和setstate_react 里state和setstate-CSDN博客

本文链接：https://blog.csdn.net/wangzhen12138/article/details/123987596

首先react中的state可以用来储存可以变化的状态

在我们想要改变组件的状态的时候，不能直接用this.state=XXX这种方式来进行修改，如果这样做react就没有办法知道修改组建的状态，这里需要用react提供的setstate方法，通过运用setstate的方法来将对象传入，这个对象表示组建的新状态，但是

只需要传入需要更新的部分就可以了

...
  constructor (props) {
    super(props)
    this.state = {
      name: '学代码的小臻',
      isLiked: false
    }
  }
  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }
...

这里我们不需要修改name所以只传入了islike的变量

setstate接受函数参数

当我们调用setstate的时候，react不会马上修改state，而是将这个对象放入到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到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
  }
...

在react中的setstate函数中会进行合并，将js的事件循环中的消息队列的同一个消息中的setstate进行合并之后在进行重新的渲染组件，不需要担心多次的setstate会带来性能的问题