react中this.setState的理解

在react中要修改this.state要使用this.setState,因为this.state只是一个对象,单纯的修改state并不会触发ui更新.

this.setState在修改state的同时,会调用render函数从而触发组件的更新

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

render->componentDidUpdate)

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

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

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

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

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

由React控制的事件处理程序，以及生命周期函数调用setState不会同步更新state 。

React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval等。

大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等，这些事件处理程序中的setState都是异步处理的

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

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

我们知道setState执行后会触发render渲染,但并不只是render这一个生命周期,具体是:

setState->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate