react中this.setState的理解

this.setState作用?

在react中要修改this.state要使用this.setState,因为this.state只是一个对象,单纯的修改state并不会触发ui更新.所以我们需要用this.setState来修改,this.setState在修改state的同时,可以触发组件的更新,因为this.setState会调用render函数

(实际上this.setState修改完数据后,在调用的生命周期顺序为:shouldComponentUpdate->componentWillUpdate->

render->componentDidUpdate)

this.setState写法?

this.setState有两个参数,写法如下:

或者this.setState(()=>{return {msg:’xxx’}},()=>{});

或者this.setState(()=>({msg:’xxx’}),()=>{});

第一个参数是异步执行,第二个参数是异步执行完后执行.

第二个参数的作用是获取最新的数据和最新的dom,可以用来验证数据是否修改成功等同于componentDidMount

this.setState都是异步的吗?

不是的,this.setState在原生js中是同步执行的,比如在react生命周期中是同步,但是在普通方法中是异步

为什么是异步的?

setState异步是因为在state更新量大的时候,可以批量更新state,在一段时间内等待一部分数据更新完,在更新

this.setState为什么在原声中是同步的?

因为react自己封装了一套机制代理原生事件,这就是合成事件,比如onClick,在合成事件中有原生事件没有的功能,这些多出来的导致setState执行是异步的.而在原生事件也就是非合成事件中是同步的