一. react16当前生命周期

  • componentWillMount
    render前,所以setState不会重新渲染,服务端渲染唯一调用,推荐用constructor代替之
  • render
  • componentDidMount
    render后,调用setState会重新渲染,页面可交互,可以请求数据
  • componentWillRecieveProps(nextProps)
    已挂载组件接收到新props触发
  • shouldComponentUpdate(nextProps, nextState)
    在接收到新的props或state时是否重新渲染,默认返回true;首次渲染或forceUpdate时不会触发;
  • componentWillUpdate(nextProps, nextState)
    如果shouldComponentUpdate返回false,update相关的函数都不会触发;不要使用setState;
  • componentDidUpdate(nextProps, nextState)
  • componentWillUnmount
    卸载组件

二. 由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数

  • componentWillMount
  • componentWillRecieveProps
  • componentWIllUpdate

三. 新增两个

  • static getDerivedStateFromProps
    会在初始化和update时触发,用于替换componentWillReceiveProps,可以用来控制 props 更新 state 的过程;它返回一个对象表示新的 state;如果不需要更新,返回 null 即可
  • getSnapshotBeforeUpdate
    用于替换 componentWillUpdate,该函数会在update后 DOM 更新前被调用,用于读取最新的 DOM 数据,返回值将作为 componentDidUpdate 的第三个参数

四. 建议用法

class A extends React.Component {
// 用于初始化 state
constructor() {}
// 用于替换 `componentWillReceiveProps` ,该函数会在初始化和 `update` 时被调用
// 因为该函数是静态函数,所以取不到 `this`
// 如果需要对比 `prevProps` 需要单独在 `state` 中维护
static getDerivedStateFromProps(nextProps, prevState) {}
// 判断是否需要更新组件,多用于组件性能优化
shouldComponentUpdate(nextProps, nextState) {}
// 组件挂载后调用
// 可以在该函数中进行请求或者订阅
componentDidMount() {}
// 用于获得最新的 DOM 数据
getSnapshotBeforeUpdate() {}
// 组件即将销毁
// 可以在此处移除订阅,定时器等等
componentWillUnmount() {}
// 组件销毁后调用
componentDidUnMount() {}
// 组件更新后调用
componentDidUpdate() {}
// 渲染组件函数
render() {}
// 以下函数不建议使用
UNSAFE_componentWillMount() {}
UNSAFE_componentWillUpdate(nextProps, nextState) {}
UNSAFE_componentWillReceiveProps(nextProps) {}
}

react新的生命周期的更多相关文章

  1. react新旧生命周期

    React16.3.0之前生命周期 16.3开始建议使用新的生命周期

  2. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  3. React组件和生命周期简介

        React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...

  4. 2. React组件的生命周期

    2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...

  5. Vue与React的异同 -生命周期

    vue的生命周期 创建前 beforeCreate 创建   create 挂载前 beforeMount 挂载 mounted 更新前 beforeUpdate 更新 updated 销毁前 bef ...

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

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

  7. react第三单元(react组件的生命周期)

    第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...

  8. React 之 组件生命周期

    React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, ...

  9. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

随机推荐

  1. 020-安装centos6.5后的生命历程

    01.配置网络.修改了ifcfg-eth0文件内容. 1)ifcfg-eth0原来的内容如下: 2)ifcfg-eth0配置后的内容如下:   3)然后重启网络服务: 4)测试网络是否可通: 5)查看 ...

  2. Intro to Python for Data Science Learning 5 - Packages

    Packages From:https://campus.datacamp.com/courses/intro-to-python-for-data-science/chapter-3-functio ...

  3. MSF渗透测试-CVE-2017-11882(MSOffice漏洞)

    1.测试环境 2.测试前准备 3.测试过程 -3.1虚拟机环境测试 -3.2局域网靶机测试 4.测试感想 1.测试环境 攻击机: OS:kail IP:192.168.15.132/192.168.1 ...

  4. Python: 正则表达式匹配反斜杠 "\"

    Python正则表达式匹配反斜杠 "\" eg: >>>a='w\w\w' 'w\\w\\w' #  打印出来的 "\\" 被转义成 一个反斜 ...

  5. Google、亚马逊、微软 、阿里巴巴开源软件一览

    Google.亚马逊.微软 .阿里巴巴开源软件一览 大公司为什么要发布开源项目?一是开源能够帮助他人更快地开发软件,促进世界创新,主要是社会价值层面的考虑.二是开源能够倒逼工程师写出更好的代码.三是开 ...

  6. Python Web学习笔记之CPU时间片

    时间片即CPU分配给各个程序的时间,每个线程被分配一个时间段,称作它的时间片,即该进程允许运行的时间,使各个程序从表面上看是同时进行的.如果在时 间片结束时进程还在运行,则CPU将被剥夺并分配给另一个 ...

  7. JS中怎么调用<%%>的值

    JS中怎么调用<%%>的值 示例代码一: <% String usercode = request.getParameter("usercode");//用req ...

  8. 20145104张家明 《Java程序设计》第10周学习总结

    20145104张家明 <Java程序设计>第10周学习总结 教材学习内容总结 网络编程 网络编程就是两个或多个设备(程序)之间的数据交换. 识别网络上的每个设备:①IP地址②域名(Dom ...

  9. libcurl开源库在Win32程序中使用下载文件显示进度条实例

    一.配置工程引用libcurl库 #define CURL_STATICLIB #include "curl/curl.h" #ifdef _DEBUG #pragma comme ...

  10. C++11标准 STL正则表达式 验证电子邮件地址

    转自:http://www.cnblogs.com/yejianfei/archive/2012/10/07/2713715.html 我们最经常遇到的验证,就是电子邮件地址验证.网站上常见.各种网页 ...