看了一些关于setState的知识 过来记录一下
直接出结论
-
在react控制的上下文(如事件处理,生命周期内)中会对setState做batch处理
在调用react事件,生命周期时预先开启batch开关,在当前event loop中setState会加入队列做合并处理(提升效率,避免每一次setState触发所有更新相关的生命周期函数) -
而在非react控制的上下文中setState将同步更新,每一次setState触发一次所有更新的生命周期,如以下回调中setTimeout, Promise.resolve().then(), dom api addEventListener()
-
父组件的props和state变化将触发其所有子组件的更新生命周期
willReceiveProps, shouldUpdate, willUpdate, render, didUpdate
无论props和state是否被父组件使用,即使更新一个从未使用过的props和state也会触发子组件整套更新生命周期 -
didUpdate内可以使用dom节点更新后的数据,setState()第二个参数回调方法在didUpdate之后触发
-
为何去掉willReceiveProps?
willReceiveProps的目的是监听props的变化而随之做一些side effect或添加引起数据更新的逻辑,去掉的原因官方说法是 无论是否更新组件数据渲染组件,父组件的渲染都会触发其钩子函数(参见3)官方推荐使用didUpdate来做side effect,但didUpdate不是会有同样的问题吗?(我在自己的demo中发现didUpdate在此情况下和willReceiveProps有一样的触发)
我只能理解为
一 didUpdate可以通过shouldUpdate做处理
二 既然一样,就可以去掉了 可是willReceiveProps在组件内部更新时可以只监听props的变化,但didUpdate props和state的变化都会监听到 -
如何代替willReceiveProps?getDerivedStateFromProps, didUpdate
网友评论