关于react setState

看了一些关于setState的知识 过来记录一下
直接出结论

  1. 在react控制的上下文(如事件处理,生命周期内)中会对setState做batch处理
    在调用react事件,生命周期时预先开启batch开关,在当前event loop中setState会加入队列做合并处理(提升效率,避免每一次setState触发所有更新相关的生命周期函数)

  2. 而在非react控制的上下文中setState将同步更新,每一次setState触发一次所有更新的生命周期,如以下回调中setTimeout, Promise.resolve().then(), dom api addEventListener()

  3. 父组件的props和state变化将触发其所有子组件的更新生命周期
    willReceiveProps, shouldUpdate, willUpdate, render, didUpdate
    无论props和state是否被父组件使用,即使更新一个从未使用过的props和state也会触发子组件整套更新生命周期

  4. didUpdate内可以使用dom节点更新后的数据,setState()第二个参数回调方法在didUpdate之后触发

  5. 为何去掉willReceiveProps?
    willReceiveProps的目的是监听props的变化而随之做一些side effect或添加引起数据更新的逻辑,去掉的原因官方说法是 无论是否更新组件数据渲染组件,父组件的渲染都会触发其钩子函数(参见3)官方推荐使用didUpdate来做side effect,但didUpdate不是会有同样的问题吗?(我在自己的demo中发现didUpdate在此情况下和willReceiveProps有一样的触发)
    我只能理解为
    一 didUpdate可以通过shouldUpdate做处理
    二 既然一样,就可以去掉了 可是willReceiveProps在组件内部更新时可以只监听props的变化,但didUpdate props和state的变化都会监听到

  6. 如何代替willReceiveProps?getDerivedStateFromProps, didUpdate

你可能感兴趣的:(关于react setState)