getSnapshotBeforeUpdate

2024年03月06日

柏拉文

越努力，越幸运

一、认识

---

getSnapshotBeforeUpdate 获取更新前的快照,此时是获取 DOM 信息的最佳时期，执行时机: 该周期函数在render后执行，执行之时DOM元素还没有被更新。getSnapshotBeforeUpdate 这个生命周期意义就是配合 componentDidUpdate 一起使用，getSnapshotBeforeUpdate 将返回一个值作为一个snapShot(快照)，传递给 componentDidUpdate 作为第三个参数, 保存一次更新前的信息。

此方法的目的在于获取组件更新前的一些信息，比如组件的滚动位置之类的，在组件更新后可以根据这些信息恢复一些UI视觉上的状态

二、语法

---

getSnapshotBeforeUpdate(prevProps,preState){}

• prevProps更新前的props

• preState更新前的state

三、场景

---

getSnapshotBeforeUpdate(prevProps,prevState) {
    return {
        value:3
    }
}

componentDidUpdate(prevProps,prevState,snapshot) {
    console.log(prevProps);
    console.log(prevState);
    console.log(snapshot);
}