React - getSnapshotBeforeUpdate() 的使用

最新推荐文章于 2025-02-20 09:00:00 发布

wust_cyl

最新推荐文章于 2025-02-20 09:00:00 发布

阅读量2.6w

点赞数 3

分类专栏： React 文章标签： React - getSnapshotBeforeUpda

本文链接：https://blog.csdn.net/wust_cyl/article/details/84306393

版权

React 专栏收录该内容

15 篇文章

订阅专栏

getSnapshotBeforeUpdate（）方法

1：在render之前调用，state已更新

2：典型场景：获取render之前的dom状态

我们来看一个例子，

每一秒钟都会加入一个新的<div>msg : number</div>

假如我们使用滑轮移到某个地方，内容物会随着时间不断下降，因为新生成的div会把它挤下来，如何保持不动了？

<script type = 'text/babel'>
 
class SnapshotSample extends React.Component {
     constructor(props) {
        super(props);
        this.state = {
          messages: [],//用于保存子div
        }
     }

     handleMessage () {//用于增加msg
       this.setState( pre => ({
         messages: [`msg: ${ pre.messages.length }`, ...pre.messages],
       }))
     }
     componentDidMount () {
        
       for (let i = 0; i < 20; i++) this.handleMessage();//初始化20条
       this.timeID = window.setInterval( () => {//设置定时器
            if (this.state.messages.length > 200 ) {//大于200条，终止
              window.clearInterval(this.timeID);
              return ;
            } else {
              this.handleMessage();
            }
       }, 1000)
     }
     componentWillUnmount () {//清除定时器
       window.clearInterval(this.timeID);
     }
     getSnapshotBeforeUpdate () {//很关键的，我们获取当前rootNode的scrollHeight，传到componentDidUpdate 的参数perScrollHeight
       return this.rootNode.scrollHeight;
     }
     componentDidUpdate (perProps, perState, perScrollHeight) {
       const curScrollTop= this.rootNode.scrollTop;
       if (curScrollTop < 5) return ;
       this.rootNode.scrollTop = curScrollTop + (this.rootNode.scrollHeight  - perScrollHeight);
       //加上增加的div高度，就相当于不动
     }
     render () {
      
       return (
           <div className = 'wrap'  ref = { node => (  this.rootNode = node)} >
               { this.state.messages.map( msg => (
                 <div>{ msg } </div>
               ))}
          </div>
       );
     }
}
ReactDOM.render(
  <SnapshotSample />,
  document.getElementById("root")
)
</script>

  .wrap{
    height: 100px;
    width :200px;
    padding: 1px solid #eee;
    overflow:auto;
  }

关键在于通过getSnapshotBeforeUpdate方法，获取dom信息，然后通过componentDidUpdate反映。

下面是其他方法的用途

Constructor

1: 用于初始化操作，一般很少使用

2：唯一一个直接修改state的地方，其他地方通过调用this.setState()方法。

getDerivedStateFromProps

1：当state需要从props初始化时，使用

2：尽量不使用，维护俩者状态需要消耗额外资源，增加复杂度

3：每次render都会调用

4：典型场景表单获取默认值

componentDidMount

1：UI渲染完成后调用

2：只执行一次

3：典型场景：获取外部资源

componentWillUnmount

1：组件被移除时调用

2：典型场景：资源释放

getSnapshotBeforeUpdate

1：在render之前调用，state已更新

2：典型场景：获取render之前的dom状态

componentDidUpdate

1：每次UI更新被调用

2：典型场景：页面通过props重新获取数据

shouldComponentUpdate

1：觉得Vistual Dom是否重绘

2：一般可以由PuerComponent自动实现

3：典型场景：性能优化