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. 0009 基于DRF框架开发(02 创建模型)

    上一节介绍了DRF开发的基本流程,共五个步骤: 1 创建模型 2 创建序列化器 3 编写视图 4 配置URL 5 运行测试 本节主要讲解创建模型. 构建学校,教师,学生三个模型,这三个模型之间的关系是 ...

  2. 将字符串日期格式化为yyyy-mm-dd

    (CONVERT(varchar(100), CONVERT(datetime,a.con_ret_time), 23))

  3. 微信小程序报错TypeError: this.setData is not a function

    今天在练习小程序的时候,遇到小程序报错 对于处于小白阶段的我,遇到这种报错,真还不知道是错从何来,只有一脸蒙逼,后来通过查询,终于知道了问题所在,下面对这一问题做一记录 小程序默认中是这么写的 onL ...

  4. 541-反转字符串 II

    541-反转字符串 II 给定一个字符串和一个整数 k,你需要对从字符串开头算起的每个 2k 个字符的前k个字符进行反转.如果剩余少于 k 个字符,则将剩余的所有全部反转.如果有小于 2k 但大于或等 ...

  5. 【巨杉数据库SequoiaDB】巨杉再获企业级认可,分布式数据库领跑“一亿中流”

    据全球最具权威的IT研究与顾问咨询公司 Gartner 预测,DBMS(数据库管理系统)市场从2017年到2018年增长了18.4%,达到461亿美元,这是有史以来最大幅的增长,并有望在2019年超过 ...

  6. P1002 过河卒【dp】

    P1002 过河卒 题目描述 棋盘上AAA点有一个过河卒,需要走到目标BBB点.卒行走的规则:可以向下.或者向右.同时在棋盘上CCC点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制 ...

  7. 记录 Docker 的学习过程 (数据挂载)

    docker 存储篇 容器中的存储是分层的, 在容器中,如果我们要创建一个文件,会在文件的最上层(可写层)创建 容器中内置的文件,默认来讲是只读的,只有自己创建的文件才是可写状态 比如说 /etc/p ...

  8. Nginx配置服务器宕机策略

    Nginx解决服务器宕机问题,Nginx配置服务器宕机策略,如果服务器宕机,会找下一台机器进行访问        配置nginx.cfg配置文件,在映射拦截地址中加入代理地址响应方案 location ...

  9. 使用ScrollRect制作翻页

    1.标准的层级结构 ScrollRect->ViewPort->Content,Viewport负责显示区域的大小一般和Mask一起配合使用,Content使用Layout来布局,如果想使 ...

  10. Python并发学习

    #Python并发 多任务 多进程 多线程 线程同步 #多任务处理 多任务处理:使得计算机可以同时处理多个任务 听歌的同时QQ聊天.办公.下载文件 实现方式:多进程.多线程 #程序和进程 程序:是一个 ...