a dive in react lifecycle

背景：我在react文档里找生命周期的图，居然没有，不敢相信我是在推特上找到的。。。

正文

react v16.3 新生命周期：

• static getderivedstatefromprops
• getsnapshotbeforeupdata

1： getderivedstatefromprops， 在render之前，返回一个obj更新state，或者null不更新state， 这个生命周期的使用场景是：state根据props变化。

 static getderivedstatefromprops(nextprops: searchprops, prevstate: searchstate) {
    const { location } = nextprops
    const state = location.state
    if (state && (state.keyword !== prevstate.keyword)) {
      const { keyword } = statereturn {
        pagestate: 0,
        employee: {
          hit: 0,
          count: 0,
          data: [],
          currentoffset: 0
        },
        document: {
          hit: 0,
          count: 0,
          data: [],
          currentoffset: 0
        },
        keyword,
        needexact: false
      }
    }
    return null
  }

2： getsnapshotbeforeupdata  触发时间：在实际dom挂载之前，虚拟dom构建之后。返回的任何数据或者null，都将作为componentdidupdate()的参数。

 getsnapshotbeforeupdate(prevprops, prevstate) {
    // are we adding new items to the list?
    // capture the scroll position so we can adjust scroll later.
    if (prevprops.list.length < this.props.list.length) {
      const list = this.listref.current;
      return list.scrollheight - list.scrolltop;
    }
    return null;
  }

  componentdidupdate(prevprops, prevstate, snapshot) {
    // if we have a snapshot value, we've just added new items.
    // adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getsnapshotbeforeupdate)
    if (snapshot !== null) {
      const list = this.listref.current;
      list.scrolltop = list.scrollheight - snapshot;
    }
  }

建议用法总结请移步：https://juejin.im/post/5aca20c96fb9a028d700e1ce

这里拷贝一个我用到的一种情况：props更新时重新请求

// old
  componentwillreceiveprops(nextprops) {
    if (nextprops.id !== this.props.id) {
        this.setstate({externaldata: null});
      this._loadasyncdata(nextprops.id);
    }
  }

// new
  static getderivedstatefromprops(nextprops, prevstate) {
    // store previd in state so we can compare when props change.
    if (nextprops.id !== prevstate.previd) {
      return {
        externaldata: null,
        previd: nextprops.id,
      };
    }
    // no state update necessary
    return null;
  }
  componentdidupdate(prevprops, prevstate) {
    if (this.state.externaldata === null) {
      this._loadasyncdata(this.props.id);
    }
  }

我的使用：

  componentdidupdate(prevprops: searchprops, prevstate: searchstate) {
    const { keyword, needexact } = this.state
    if (keyword && (keyword !== prevstate.keyword)) {  // 上一次的state和这一次的对比，如果需要，就进行fetch数据，并setstate。其中this.state就是getderivedstatefromprops返回的 更新后的state
      if (needexact) {
        this._fetchexactdata(this.state.keyword)
        this.setstate({
          needexact: false
        })
      } else {
        promise.all([this._fetchinitdata('document'), this._fetchinitdata('employee')])
          .then(values => {
            let pagestate = 0
            const { state } = this.props.location 
            if (state && state.type) {
              pagestate = state.type
            } else if (!values[1] && values[0]) {
              pagestate = 1
            }
            this.setstate({
              pagestate,
            })
          })
      }
    }
  }

最后，记录一个小知识点：

由于state变化，需要出发请求数据的，在componentdidupdate中进行。