深入React技术栈之setState详解

抛出问题

class Example extends Component {
  contructor () {
    super()
    this.state = {
      value: 0,
      index: 0
    }
  }

  componentDidMount () {
    this.setState({value: this.state.value + 1})
    console.log(this.state.value) // 第一次输出
    this.setState({value: this.state.value + 1})
    console.log(this.state.value) // 第二次输出
    setTimeout(() => {
      this.setState({value: this.state.value + 1})
      console.log(this.state.value) // 第三次输出
      this.setState({value: this.state.value + 1})
      console.log(this.state.value) // 第四次输出
    }, 0);
        this.refs.button.addEventListener('click', this.click)
  }

  click = () => {
    this.setState({value: this.state.index + 1})
    this.setState({value: this.state.index + 1})
  }

  render () {
    return (
      <div><span>value: {this.state.value}index: {this.props.index}</span>
        <button ref="button" onClick={this.click}>点击</button>
      </div>
    )
  }
}
  • 这四次输出,按常理来说分别是: 1,2,3,4。但是,实际输出为: 0, 0, 2, 3

setState的注意点

  1. setState不会立刻改变React组件中state的值(即setState是异步更新)
    • setState通过一个队列机制实现state更新;
    • 当执行setState时,会将需要更新的state合并后放入状态队列,而不会立即更新,队列可以高效的批量更新state;
    • 通过this.state直接修改的值,state不会放入状态队列,当下次调用setState并对状态队列进行合并时,会忽略之前直接被修改的state.
  2. setState通过引发一次组件的更新过程来引发重新绘制
    • 此处重绘指的就是引起React的更新生命周期函数4个函数:
    • shouldComponentUpdate(被调用时this.state没有更新;如果返回了false,生命周期被中断,虽然不调用之后的函数了,但是state仍然会被更新)
    • componentWillUpdate(被调用时this.state没有更新)
    • render(被调用时this.state得到更新)
    • componentDidUpdate
  3. 多个相邻的state的修改可能会合并到一起一次执行
 this.setState({name: 'Pororo'})
 this.setState({age: 20})
  • 等同于
 this.setState({name: 'Pororo',age: 20})
  • 上面两块代码的效果是一样的。如果每次调用都引发一次生命周期更新,那性能就会消耗很大了。所以,React会将多个this.setState产生的修改放进一个队列里,等差不多的时候就会引发一次生命周期更新。

问题分析

  • 对于前两次setState:
this.setState({value: this.state.val + 1});
console.log(this.state.value); // 第一次输出
this.setState({value: this.state.val + 1});
console.log(this.state.value); // 第二次输出
  • 由于setState不会立即改变React组件中state的值,所以两次setState中this.state.value都是同一个值0,故而,这两次输出都是0。因而value只被加1。
  • 既然这样,那么是不是可以直接操作this.state呢?比如:this.state.value=this.state.value+1;
  • 这样的确可以修改this.state.value的状态但是却不可以引发重复渲染。
  • 所以,就必须通过React设定的setState函数去改变this.state,从而引发重新渲染。
  • setTimeout里面的两次setState:
setTimeout(() => {
  this.setState({value: this.state.value + 1})
  console.log(this.state.value) // 第三次输出
  this.setState({value: this.state.value + 1})
  console.log(this.state.value) // 第四次输出
}, 0);
  • 这两次this.state的值同步更新了;
  • 同步更新:是由React引发的事件处理(比如:onClick引发的事件处理),调用setState会异步更新this.state;
  • 异步更新:除此之外的setState调用会同步执行this.setState。 “除此之外”指的是:绕过React通过addEventListener直接添加的事件处理函数和setTimeout/setInterval产生的异步调用。
  • this.setState更新机制图解:
  • 每次setState产生新的state会依次被存入一个队列,然后会根据isBathingUpdates变量判断是直接更新this.state还是放进dirtyComponent里回头再说。
  • isBatchingUpdates默认是false,也就表示setState会同步更新this.state。
  • 但是,当React在调用事件处理函数之前就会调用batchedUpdates,这个函数会把isBatchingUpdates修改为true,造成的后果就是由React控制的事件处理过程setState不会同步更新this.state。

同步更新(函数式setState)

  1. 如果this.setState的参数不是一个对象而是一个函数时,这个函数会接收到两个参数,第一个是当前的state值,第二个是当前的props,这个函数应该返回一个对象,这个对象代表想要对this.state的更改;
  2. 换句话说,之前你想给this.setState传递什么对象参数,在这种函数里就返回什么对象。不过,计算这个对象的方法有些改变,不再依赖于this.state,而是依赖于输入参数state。
function increment(state, props) {
  return {count: state.count + 1};
}

function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState(increment);
}
  • 假如当前this.state.count的值是0,第一次调用this.setState(increment),传给increment的state参数是0,第二调用时,state参数是1,第三次调用是,参数是2,最终incrementMultiple让this.state.count变成了3。
  • 对于多次调用函数式setState的情况,React会保证调用每次increment时,state都已经合并了之前的状态修改结果。

要注意的是,在increment函数被调用时,this.state并没有被改变,依然,要等到render函数被重新执行时(或者shouldComponentUpdate函数返回false之后)才被改变。

同步异步setState的用法混合

function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState({count: this.state.count + 1});
  this.setState(increment);
}
  • 在几个函数式setState调用中插入一个传统式setState调用,最后得到的结果是让this.state.count增加了2,而不是增加4。
  • 这是因为React会依次合并所有setState产生的效果,虽然前两个函数式setState调用产生的效果是count加2,但是中间出现一个传统式setState调用,一下子强行把积攒的效果清空,用count加1取代。
  • 所以,传统式setState与函数式setState一定不要混用。

总结自:掘金(不洗碗工作室)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

791
来自专栏拂晓风起

jQuery中this与$(this)的区别

1192
来自专栏知道一点点

bootstrap快速入门笔记(六)-代码

一,内联代码<code>:For example, <code>&lt;section&gt;</code> should be wrapped as inli...

842
来自专栏技术墨客

React学习(2)——状态、事件与动态渲染 原

    上一篇文章最后说明了组件传入的参数必须是只读的,但是在丰富的前端应用中,页面样式是时时刻刻会发生变化的。在前面的章节中介绍了一个时钟的例子,通过重复调用...

2051
来自专栏我和未来有约会

(收藏)JS验证

1 /* 2 函数名:检验表单的函数 3 作者:xuwen 日期:2007-2-10 4 参数 _obj:验证的对象 ...

23610
来自专栏web前端教室

web前端零基础课-1012上周总结

类组件中的方法内部不绑定this,在方法内部使用this,需要用bind(this)传入

1042
来自专栏简书专栏

基于bs4+requests爬取世界赛艇男运动员信息(进阶篇)

在详情页面,部分页面具有5个字段信息,部分页面具有2个字段信息。 每个字段信息都在li标签中,对每个li标签做循环遍历。 将li标签中的第1个class等于...

772
来自专栏前端说吧

Vue-组件嵌套之——父组件向子组件传值

4339
来自专栏Golang语言社区

【Go 语言社区】在golang里实现类似try catch 的异常处理机制

此文介绍的并非 使用panic/recover. 因为实际使用中不建议使用panic/recover. 但try catch finally 的编程方式 还是...

3796
来自专栏coder修行路

css补充、JavaScript、Dom

css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码...

1798

扫码关注云+社区

领取腾讯云代金券