背景:我在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中进行。

a dive in react lifecycle的更多相关文章

  1. React Lifecycle

    React Lifecycle 分为三种: 初始化阶段 状态的更新 销毁 实例化: ReactDom.render 用于将模板转换成HTML语言,并插入DOM节点. 1.getDefaultProps ...

  2. React LifeCycle API

    React LifeCycle API old API & new API 不可以混用 demo https://codesandbox.io/s/react-parent-child-lif ...

  3. React LifeCycle Methods & re-learning 2019

    React LifeCycle Methods & re-learning 2019 v16.9.0 https://reactjs.org/docs/react-component.html ...

  4. 一图解析 React组件生命周期 (React Component Lifecycle)

     React LifeCycle v1 参考官方文档作成 可放大  参考:https://reactjs.org/docs/react-component.html 数字补丁数字补丁数字补丁数字补丁数 ...

  5. React (Native) Rendering Lifecycle

    How Does React Native Work? The idea of writing mobile applications in JavaScript feels a little odd ...

  6. react与jQuery对比,有空的时候再翻译一下

    参考资料:http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-t ...

  7. 如何用 React Native 创建一个iOS APP?(三)

    前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...

  8. 从性能角度看react组件拆分的重要性

    React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...

  9. 携程React Native实践

    React Native(下文简称 RN)开源已经一年多时间,国内各大互联网公司都在使用,携程也在今年 5 月份投入资源开始引入,并推广给多个业务团队使用,本文将会分享我们遇到的一些问题以及我们的优化 ...

随机推荐

  1. JVM之垃圾收集器与内存分配回收策略(二)

    上一篇JVM垃圾收集器与内存分配策略(一),下面是jdk1.7版本的垃圾收集器之间的关系,其中连线两端的两种垃圾收集器可以进行搭配使用,下面来总结一下这些收集器的一些特点以及关系. 一.Serial收 ...

  2. Akka-CQRS(1)- Write-side, Persisting event sources:CQRS存写端操作方式

    上篇我们提到CQRS是一种读写分离式高并发.大流量数据录入体系,其中存写部分是通过event-sourcing+akka-persistence实现的.也可以这样理解:event-sourcing(事 ...

  3. JavaScript大厦之JS运算符

    运算符用于执行程序代码运算,会针对一个及以上操作数项目来进行运算.2+3,其操作数是2和3,而运算符则是“+”.上一篇我们说过变量用来存储数据,而同一个变量中的数据在不同的时刻可以不同,在程序的运行过 ...

  4. Drools规则引擎入门指南(三)——使用Docker部署Workbench

    其实本来我也是打算使用Tomcat来部署Workbench的,但是在网上看了几篇文章,超级繁琐的配置.各种版本.实在看不下去了索性就直接使用Docker来部署了.本次部署的版本是最新稳定版,对应dro ...

  5. LabVIEW(九):程序结构中的分支结构和顺序结构

    一.分支结构 1.创建分支结构:程序框图右键>结构>条件结构 2.Ctrl + I 会显示错误列表,双击错误列表会定位到该错误在程序框图中地方. 3.有的分支可以不连接分支内容. 在不连接 ...

  6. 本地语音识别开源软件pocketsphinx调试总结

    1问题一: fatal error: pocketsphinx.h: No such file or directory 解决方法: $ cd /usr/include $ sudo ln -s /m ...

  7. 浅谈工作单元 在整个 ABP 框架当中的应用

    ABP在其内部实现了工作单元模式,统一地进行事务与连接管理. 其核心就是通过 Castle 的 Dynamic Proxy 进行动态代理,在组件注册的时候进行拦截器注入,拦截到实现了 Unit Of ...

  8. Spring框架(2)---IOC装配Bean(xml配置方式)

    IOC装配Bean (1)Spring框架Bean实例化的方式提供了三种方式实例化Bean 构造方法实例化(默认无参数,用的最多) 静态工厂实例化 实例工厂实例化 下面先写这三种方法的applicat ...

  9. JavaScript和Ajax部分(4)

    31. 什么是jQuery选择器 1)jQuery选择器继承了CSS与Path语言的部分语法,允许通过标签名.属性名或内容对DOM元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery选 ...

  10. 【杂谈】FilterChain相关知识整理

    前言 做后台的,Filter肯定没少配置,但是知晓其原理的可能不多.在这之前我也不懂,但这并不影响业务开发,同时也有其他的知识要学,所以一直就没看.这阵子有点闲,刚好在看<How Tomcat ...