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 ...
随机推荐
- POST—GET—两种提交方式的区别
主要区别: 安全性 长度限制 数据结构. 总结起来: get方式:以URL字串本身传递数据参数,在服务器端可以从UERY_STRING'这个变量中直接读取,效率较高,但缺乏安全性,也无法来 ...
- B轮公司技术问题列表
B轮公司技术问题列表 1.异构系统的接口对接我们有自己的一套统一接口,但是需要与其它公司的接口做对接,但是各个公司的接口各不相同,有什么好的方式能够方便与各公司的接口做对接的同时我们这边也能尽量少或者 ...
- ACM题目————STL练习之求次数
题目地址:http://acm.nyist.net/JudgeOnline/problem.php?pid=1112 描述 题意很简单,给一个数n 以及一个字符串str,区间[i,i+n-1] 为一个 ...
- ELK+Kafka学习笔记之搭建ELK+Kafka日志收集系统集群
0x00 概述 关于如何搭建ELK部分,请参考这篇文章,https://www.cnblogs.com/JetpropelledSnake/p/9893566.html. 该篇用户为非root,使用用 ...
- 添加用户到 sudo
sudo 简介: 在 Linux 中系统管理员可以通过 sudo 实用程序让用户或组能够作为另一个用户运行命令.换句话说,可以分派命令特权,而不需要另一个用户的密码.root 用户通过在 /etc/s ...
- 安装mysql_cluster报错: Data::Dumper丢失
步骤 安装包:mysql-cluster-gpl-7.3.5-linux-glibc2.5-x86_64.tar.gz 下载解压到/usr/local/mysql mkdir /usr/local/m ...
- linux内核分析 第三周
一.Linux内核源码(简单分析) README 一开始刚接触内核源码的时候,不知道代码文件是什么功能.不清楚如何使用文件的时候,就需要打开README. README提供了内核的各种编译方法.生成文 ...
- Socket:读写处理及连接断开的检测
作为进程间通信及网络通信的一种重要技术,在实际的开发中,socket编程是经常被用到的.关于socket编程的一般步骤,这里不再赘述,相关资料和文章很多,google/baidu即可. 本文主要是探讨 ...
- 怎样用QtCreator编辑运行python脚本
QtCreator作为一款开发基于qt库的程序.以及开发C语言.c++语言项目都是一个利器,轻便好用.那么作为开发者来说,经常换着使用各种IDE是家常便饭,但是要是这些语言都能够集成到一个工具里岂不是 ...
- python如何安装第三方库
1.python集成开发环境pycharm如何安装第三方库 http://blog.csdn.net/qiannianguji01/article/details/50397046 有的时候安装不上第 ...