react中this.setState的理解

Posted 2021-02-28 liuxiaodi

最近重新整理了一下react知识点,以前博客的内容太乱了,正好趁换博把内容重新整理一下子.

只要写react项目,就必然用到this.setState,那么setState了解多少?setState执行后触发了那些方法?这里做一下解答

作用:

this.setState是用来改变state的方法,因为在react中是单项数据流,我们不能直接修改state,需要使用this.setState

 

写法:

this.setState(()=>{return {}},()=>{})

或

this.setState({},()=>{})

第一个参数用于异步修改state,第二个函数是当state修改完成后,执行的方法,类比componentDidUpdate

 

异步:

this.setState在某些条件下是异步的,在某些条件下是同步的.因为react对原生事件做了包装,生成了合成事件,在合成事件中因为某些特殊的处理,使得setState是异步的;而在原生事件中由于没有这些处理,导致setState是同步执行的.

异步的好处:

setState的异步是为了批量处理state,在react中会有一个队列,在队列内部排列着setState方法,react会将一段时间内要修改的state合并,只执行一次setState方法

 

setState执行后触发了那些函数

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

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