对于React16.4新生命周期的疑惑

Question

getSnapshotBeforeUpdate 生命周期方法在 render 之后，在更新之前（如：更新 DOM 之前）被调用。给了一个机会去获取 DOM 信息，计算得到并返回一个 snapshot，这个 snapshot 会作为 componentDidUpdate 的第三个参数传入。其中在更新之前调用，我在getSnapshotBeforeUpdate  log了一行为什么拿到的是更新之后的呢（代码如下）？我有点疑惑，麻烦大家帮忙解答一下，谢谢啦

import React, { Component } from 'react';

class childern extends Component {
  constructor(props) {
    super(props);
    this.state = {  };
    this.i = 1
  }
  static getDerivedStateFromProps(props,state){
    console.log('getDerivedStateFromProps==>生命周期')
    return props
  }
  getSnapshotBeforeUpdate(prevProps,prevState){
    console.log('getSnapshotBeforeUpdate==>生命周期',this.ele)
    return this.ele
  }
  componentDidUpdate(snap,a,b){
    console.log('componentDidUpdate==>生命周期',b)
  }
  render() {
    console.log('render==>生命周期')
    return (
      <div 
      onClick={()=>{
        this.setState({a:'我是更新之后的state'})
      }}>
        getDerivedStateFromProps
        <div ref={ele=>{  this.ele = ele }}>{this.state.a}</div>
      </div>
      );
  }
}

export default childern;

Answer 1

盲猜，是打印的问题，他们用的是用一个地址空间，打印出来的变量会随程序的改变而改变，直接打断点查看状态稳一点