一. 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. 网络编程—代码—UDP数据报传输

    UDP:数据报传输 1.接收端 public class Udps { //接收端 public static void main(String[] args) throws IOException ...

  2. bzoj3196: Tyvj 1730 二逼平衡树 树套树

    地址:http://www.lydsy.com/JudgeOnline/problem.php?id=3196 题目: 3196: Tyvj 1730 二逼平衡树 Time Limit: 10 Sec ...

  3. linux 中的定时任务crontab使用方法

    linux 中的定时任务crontab使用方法: 切换到root用户,sudo su root (可以设置成不需要输入密码) sudo su - (需要输入当前帐号的密码才能进入.) crontab ...

  4. linux查看是否有某个运行的进程命令

    linux查看是否有某个运行的进程命令:例如,查询是否包含 “my_post” 关键字的进程 ps aux | grep my_post ps aux | grep  my_post | grep - ...

  5. JS重要的内置对象

    Array对象: 属性: .length      获得数组的长度: 方法: .concat() 连接内容或者数组,组成新的数组: .join(n)  用n连接数组的每一项组成字符串,可以是空字符串: ...

  6. web前端----JavaScript(JS)函数

    函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...

  7. ACM题目———— 一种排序(STL之set)

    描述 输入 第一行有一个整数 0<n<10000,表示接下来有n组测试数据:每一组第一行有一个整数 0<m<1000,表示有m个长方形:接下来的m行,每一行有三个数 ,第一个数 ...

  8. [分享] 采用opencv_cascadetrain进行训练的步骤及注意事项 [复制链接]

    http://f.dataguru.cn/thread-725364-1-1.html 很有用的一个帖子 转自:http://blog.csdn.net/xidianzhimeng/article/d ...

  9. 20145332卢鑫 MSF基础应用

    20145332卢鑫 MSF基础应用 实验过程 靶机的IP地址:192.168.10.160 Kali的IP地址:192.168.10.128 1.一个主动攻击 攻击XP系统的漏洞:ms08_067 ...

  10. 20165211 预备作业3 Linux安装与学习

    20165211 预备作业3 Linux安装与学习 1. Linux安装 涉及软件:VirtualBox,Ubuntu 参考教程:基于VirtualBox安装Ubuntu图文教程 安装过程的问题 在安 ...