React生命周期详解
React生命周期图解:
一、旧版图解:
二、新版图解:
从图中,我们可以清楚知道React的生命周期分为三个部分: 实例化、存在期和销毁时。
旧版生命周期如果要开启async rendering,在render函数之前的所有函数,都有可能被执行多次。
旧版的React生命周期看图就可以啦,我们就不详细讲解了,下面我们来详细讲下,V16.4React的生命周期。
由图中可以看到,React生命周期新引入了两个生命周期函数:getDerivedStateFromProps, getSnapShotBeforeUpdate。
getDerivedStateFromProps:
getDerivedStateFromProps无论是Mounting还是Updating,也无论是因为什么引起的Updating,全部都会被调用。
getSnapshotBeforeUpdate:
getSnapshotBeforeUpdate()被调用于render之后,可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息(例如滚动位置)。此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
React官网中getSnapshotBeforeUpdate的例子:
class ScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
} getSnapshotBeforeUpdate(prevProps, prevState) {
// 我们是否要添加新的 items 到列表
// 捕捉滚动位置,以便我们可以稍后调整滚动
if (prevProps.list.length < this.props.list.length) {
const list = this.listRef.current;
return list.scrollHeight - list.scrollTop;
}
return null;
} componentDidUpdate(prevProps, prevState, snapshot) {
// 如果我们有snapshot值, 我们已经添加了 新的items
// 调整滚动以至于这些新的items 不会将旧items推出视图
// (这边的snapshot是 getSnapshotBeforeUpdate方法的返回值)
if (snapshot !== null) {
const list = this.listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
} render() {
return (
<div ref={this.listRef}>{/* ...contents... */}</div>
);
}
}
这篇文章对React生命周期的讲解就到这里啦,可以前往React官网深入学习。
React生命周期详解的更多相关文章
- react 生命周期详解
state有时候很不听话,在某些时候,我不想他渲染,偏偏react非常智能的帮我们重复渲染. 比如最常见的就是传递的对象为空,组件依旧渲染了一次或者多次. 更多场景不举例了,对症下药. shouldC ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- ASP.NT运行原理和页面生命周期详解及其应用
ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用. ...
- ASP.NET生命周期详解
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
- ASP.NET生命周期详解 [转]
最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...
- ASP.NET生命周期详解(转)
看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...
- Vue生命周期详解
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
- vue组件生命周期详解
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
- React(v16.8.4)生命周期详解
当前版本v16.8.4 装载过程(组件第一次在DOM树中渲染的过程): constructor(常用) -> getInitialState(v16.0已废弃) -> getDefault ...
随机推荐
- Linux 中查看进程及资源使用情况
top 自带的 top 命令类似于平时我们使用的任务管理器,能够列出当前系统中的进程及资源的使用情况. $ man top top - display Linux tasks 使用起来很简单,不加任何 ...
- windows快捷键十八式(win10)
胖友,如果你的电脑是windows系统,下面这十八招windows快捷键都不会,还敢说你会用windows? 说到windows的快捷键,当然不是只有ctrl+c,ctrl+v这么简单,今天我整理了一 ...
- Python:黑板课爬虫闯关第五关
第五关是最后一关了,至此之后黑板课就没有更新过关卡了. 第五关地址:http://www.heibanke.com/lesson/crawler_ex04/ 可以看到,是在第三关的基础上加了验证码. ...
- 图像检索(2):均值聚类-构建BoF
在图像检索时,通常首先提取图像的局部特征,这些局部特征通常有很高的维度(例如,sift是128维),有很多的冗余信息,直接利用局部特征进行检索,效率和准确度上都不是很好.这就需要重新对提取到的局部特征 ...
- httpclient绕过证书验证进行HTTPS请求
http请求是我们常用的一种web应用的应用层协议,但是由于它的不安全性,现在正在逐渐向https协议过渡.https协议是在http的基础上进行了隧道加密,加密方式有SSL和TLS两种.当serve ...
- 我的Python之旅第六天--面向对象初识
一.概念 类:是具有相同属性的技能的一类实物 对象:实例化的一个类,是类的具体体现 class Person: '''内容''' animal='高级动物' soul='有思想' #animal,so ...
- Android - 文字向上翻滚效果的实现
本文转载https://xwc2013.iteye.com/blog/1976051 今天看到了一种文字翻滚的效果,感觉非常实用.所以就自己试着做出了这种效果,现在把它分享给大家! 首先在res目录下 ...
- QT之setstylesheet防止子窗体继承父窗体样式
/* 1.这里的#号表示,主控件不会影响子控件 2.设置多个样式,可以用双引号和分号 */ ui->groupBox_1->setStyleSheet("#groupBox_1{ ...
- Numpy库的学习(二)
今天来继续学习一下Numpy库的使用 接着昨天的内容继续 在Numpy中,我们如果想要进行一个判断使用“==” 我们来看下面的代码 vector = np.array([5,10,15,20,25]) ...
- DataPipeline |《Apache Kafka实战》作者胡夕:Apache Kafka监控与调优
胡夕 <Apache Kafka实战>作者,北航计算机硕士毕业,现任某互金公司计算平台总监,曾就职于IBM.搜狗.微博等公司.国内活跃的Kafka代码贡献者. 前言 虽然目前Apache ...