react新的生命周期
一. 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新的生命周期的更多相关文章
- react新旧生命周期
React16.3.0之前生命周期 16.3开始建议使用新的生命周期
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React组件和生命周期简介
React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...
- 2. React组件的生命周期
2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...
- Vue与React的异同 -生命周期
vue的生命周期 创建前 beforeCreate 创建 create 挂载前 beforeMount 挂载 mounted 更新前 beforeUpdate 更新 updated 销毁前 bef ...
- React 组件的生命周期方法
React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...
- react第三单元(react组件的生命周期)
第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...
- React 之 组件生命周期
React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
随机推荐
- 网络编程—代码—UDP数据报传输
UDP:数据报传输 1.接收端 public class Udps { //接收端 public static void main(String[] args) throws IOException ...
- bzoj3196: Tyvj 1730 二逼平衡树 树套树
地址:http://www.lydsy.com/JudgeOnline/problem.php?id=3196 题目: 3196: Tyvj 1730 二逼平衡树 Time Limit: 10 Sec ...
- linux 中的定时任务crontab使用方法
linux 中的定时任务crontab使用方法: 切换到root用户,sudo su root (可以设置成不需要输入密码) sudo su - (需要输入当前帐号的密码才能进入.) crontab ...
- linux查看是否有某个运行的进程命令
linux查看是否有某个运行的进程命令:例如,查询是否包含 “my_post” 关键字的进程 ps aux | grep my_post ps aux | grep my_post | grep - ...
- JS重要的内置对象
Array对象: 属性: .length 获得数组的长度: 方法: .concat() 连接内容或者数组,组成新的数组: .join(n) 用n连接数组的每一项组成字符串,可以是空字符串: ...
- web前端----JavaScript(JS)函数
函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...
- ACM题目———— 一种排序(STL之set)
描述 输入 第一行有一个整数 0<n<10000,表示接下来有n组测试数据:每一组第一行有一个整数 0<m<1000,表示有m个长方形:接下来的m行,每一行有三个数 ,第一个数 ...
- [分享] 采用opencv_cascadetrain进行训练的步骤及注意事项 [复制链接]
http://f.dataguru.cn/thread-725364-1-1.html 很有用的一个帖子 转自:http://blog.csdn.net/xidianzhimeng/article/d ...
- 20145332卢鑫 MSF基础应用
20145332卢鑫 MSF基础应用 实验过程 靶机的IP地址:192.168.10.160 Kali的IP地址:192.168.10.128 1.一个主动攻击 攻击XP系统的漏洞:ms08_067 ...
- 20165211 预备作业3 Linux安装与学习
20165211 预备作业3 Linux安装与学习 1. Linux安装 涉及软件:VirtualBox,Ubuntu 参考教程:基于VirtualBox安装Ubuntu图文教程 安装过程的问题 在安 ...