react生命周期方法有哪些?

React 16.3+

getDerivedStateFromProps:在调用render()之前调用,并在每次渲染时调用。需要使用派生状态的情况是很罕见的

componentDidMount:首次渲染后调用,所有的ajax请求、DOM或状态更新、设置事件监听器都应该在此处发生。

ShouldComponentUpdate:确定组件是否应该更新。默认情况下,它返回true。如果你确定在更新状态或属性后不需要渲染组件,则可以返回false值。它是一个提高性能的好地方,因为它允许你在组件接收新属性时阻止重新渲染。

getSnapshotBeforeUpdate:在最新的渲染输出提交给DOM前将会立即调用,这对于从DOM捕获信息(如:滚动位置)很有用。

componentDidUpdate:它主要用于更新DOM以响应prop或state更改。如果shouldComponentUpdate()返回falsse,则不会触发。

componentWillUnmount:当一个组件被从DOM中移除时,该方法被调用,取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。

React 16.3

componentWillMount:在组件render()前执行,用于根组件中的应用程序级别配置。应该避免在该方法中引入任何的副作用或订阅。该方法在整个组件生命周明只会被调用一次,所以可以利用该方法做些组件内部的初始化工作,这个是在render方法调用前可修改state的最后一次机会。

componentDidMount:首次渲染后调用,所有的ajax请求、DOM或状态更新、设置事件监听器都应该在此处发生。如果嵌套了子组件,子组件会比父组件优先渲染。

componentWillReceiveProps:在组件接收到新属性前调用,若需要更新状态响应属性改变,需要对比this.props和nextProps并在该方法中使用this.setState()处理状态。

shouldComponentUpdate:确定组件是否应该更新。默认情况下,它返回true。如果你确定在更新状态或属性后不需要渲染组件,则可以返回false值。它是一个提高性能的好地方,因为它允许你在组件接收新属性时阻止重新渲染。

componentWillUpdate:当shouldComponentUpdate返回true后重新渲染组件之前执行,注意这里不能调用this.setState()。

componentDidUpdate:它主要用于更新DOM以响应prop或state更改。如果shouldComponentUpdate()返回falsse,则不会触发。

componentWillUnmount:当一个组件被从DOM中移除时,该方法被调用,取消网络请求或者移除与该组件相关的事件监听程序等应该在这里进行。

react生命周期方法有哪些?的更多相关文章

  1. react生命周期方法

    Mounting阶段,当一个组件的实例被创建并插入到DOM中时,下面这些函数会被调用: constructor() componentWillMount:组件即将被渲染到页面上,render之前最后一 ...

  2. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...

  3. React 组件的生命周期方法

    React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...

  4. React生命周期浅析

    引言 关于React的生命周期API,官网,有着详细说明.但在实际写代码的过程中,这些说明不能解决所有的疑惑. 所以我列举了一些编码中常见用例,供大家参考. 示例代码如下 /* use case 1. ...

  5. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  6. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  7. react复习总结(2)--react生命周期和组件通信

    这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...

  8. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  9. react生命周期es6

    基本函数有 import React from 'react' export default class MyClass extends React.Component { constructor(p ...

随机推荐

  1. CF571D Campus(19-1)

    题意 \(n\)个点,维护两个森林,这里\(A,B\)两个森林对应的点都是一样的,相当于对两个森林操作都会影响这\(n\)个点 开始森林里的树都是一个点,\(A,B\)支持合并(但树结构互不影响),\ ...

  2. LeetCode 237. 删除链表中的节点 (单链表遍历)

    题目链接:https://leetcode-cn.com/problems/delete-node-in-a-linked-list/ 请编写一个函数,使其可以删除某个链表中给定的(非末尾)节点,你将 ...

  3. 08-SV面向对象编程的高级技巧指南

    1.原始类与扩展类 (1)原始类被称为父类或者超类,扩展类被称为派生类或者子类.扩展类可以直接访问原始类和其本身的所有变量,应该将原始类中的子程序定义成虚拟的,这样它们就可以在扩展类中重定义.new函 ...

  4. Java锁机制深入理解

    Java锁机制 背景知识 指令流水线 ​ CPU的基本工作是执行存储的指令序列,即程序.程序的执行过程实际上是不断地取出指令.分析指令.执行指令的过程. ​ 几乎所有的冯•诺伊曼型计算机的CPU,其工 ...

  5. eclipse运行错误提示 Failed to load D:\Android\sdk\build-tools\26.0.0-preview\lib\dx.jar

    前几天在ecplise上运行项目还好好,今天一运行就提示这个错误:Your project contains error(s), please fix them before running your ...

  6. 2级搭建类202-Oracle 18c SI ASM 静默搭建(OEL7.7)公开

    Oracle 18c 单实例 ASM UDEV 方式在 OEL 7.7 上的安装

  7. 浅谈C#委托的用法-delegate[转]

    一.委托的概念 委托和类一样是一种用户自定义类型,它存储的就是一系列具有相同签名和返回类型的方法的地址,调用委托的时候,它所包含的所有方法都会被执行. 借用百度上的一句话概括:委托是一个类,它定义了方 ...

  8. 使用vim打开文件的16进制形式,编辑和全文替换

    1.先用vim打开文件的二进制形式,如果不以二进制可能会产生转换错误. vim -b file-to-open.dat 2.用xxd把文件转换成十六进制格式 :%!xxd 现在就可以对待普通文本一样查 ...

  9. Codeforces Round #350 (Div. 2)(670C)

    今天对着算法进阶指南,学了一下离散化.大概对桶排这样的算法优化比较好吧. 离散化:就是把无穷大的集合中若干个元素映射为有限集合以便于统计的方法.例如在很多时候,问题范围定义为整数集合Z,但涉及的元素只 ...

  10. 多线程启动selenium,报NameError: name '__file__' is not defined

    将__file__加上单引号就解决了:   # 获取当前文件名,用于创建模型及结果文件的目录   file_name = os.path.basename('__file__').split('.') ...