React - getSnapshotBeforeUpdate() 的使用

getSnapshotBeforeUpdate（） 方法

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

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

我们来看一个例子，

每一秒钟都会加入一个新的

msg : number

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

  .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：典型场景：性能优化