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 ...

随机推荐

rabbitmq实现向各服务广播消息
广播fanout 主要是将一个消息,分发到绑定了它的队列上,而这些队列如消费者自己去建立和绑定! 对生产者是解耦的生产者不需要关心消费者有多少,消费者如果需要这种消息,只需要把队列绑定到exchan ...
Java进阶篇设计模式之四 -----适配器模式和桥接模式
前言在上一篇中我们学习了创建型模式的建造者模式和原型模式.本篇则来学习下结构型模式的适配器模式和桥接模式. 适配器模式简介适配器模式是作为两个不兼容的接口之间的桥梁.这种类型的设计模式属于结构型 ...
编译安装Keepalived2.0.0
简介 Keepalived是基于vrrp协议的一款高可用软件.Keepailived有一台主服务器和多台备份服务器,在主服务器和备份服务器上面部署相同的服务配置,使用一个虚拟IP地址对外提供服务,当主 ...
SpringBoot + Spring Security 学习笔记（二）安全认证流程源码详解
用户认证流程 UsernamePasswordAuthenticationFilter 我们直接来看UsernamePasswordAuthenticationFilter类, public clas ...
Java开发笔记（八十四）文件与目录的管理
程序除了处理内存中的数据结构,还要操作磁盘上的各类文件,这里的磁盘是个统称,泛指可以持久保留数据的存储介质,包括但不限于:插在软驱中的软盘.固定在机箱中的硬盘.插在光驱中的光盘.插在USB接口上的U盘 ...
MyBatis入门简述
MyBatis前身是iBatis,为Apache的一个开源项目.2010年迁移到了Google Code,改名为MyBatis.2013年迁移到Github. MyBatis是一个优秀的持久层框架,它 ...
04 入门 - ASP.NET MVC应用程序的结构
目录索引:<ASP.NET MVC 5 高级编程>学习笔记用Visual Studio创建了一个新的ASP.NET MVC应用程序后,将自动向这个项目中添加一些文件和目录. 如图所示: ...
ubuntu server 16.04 开启root密码登录
0x00 ubuntu server 16.04 开启root密码登录由于众多VPS默认使用证书验证登录,虽然安全但使用十分不便,所以特提供开启root用户并使用密码登录方法. 0x01 为root ...
我的世界 ParaCraft 结合开源地图 OpenStreetMap 生成3D校园的方法简介
我的世界ParaCraft结合开源地图OpenStreetMap生成3D校园的方法简介版本1.0 日期2019.2.3 作者Ray (82735589@qq.com) www.TimeGIS.com ...
用Jenkins搭建自动构建服务
Jenkins是BS跨平台构建工具,之前名为Hundson.wiki [chs en] 最新windows安装包:下载下文以1.593版本为例,讲述Jenkins的Windows版本的一些要注意 ...