React生命周期的变化
1、ES6语法的引入,砍掉了getDefaultProps和getInitialState
getDefaultProps 使用 static default={}的方式代替
getInitialState 使用 state属性替代,初始化可以写在constructor里,也可以写成类属性
2、下一代React版本,生命周期又有改变
componentWillMount – 使用constructor或componentDidMount代替
componentWillUpdate – 使用componentDidUpdate代替
componentWillReceiveProps – 使用一个新的方法:static getDerivedStateFromProps来代替
React 16.3版本中:
componentWillMount,componentWillUpdate,componentWillReceiveProps还能用
React 16.x版本中:
启用弃用警告,三个方法变为:
UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate
在React17.0版本中:
会移除这三个周期。
详见https://github.com/facebook/react/issues/12152
3. static getDerivedStateFromProps
在下列三种情况下,会调用getDerivedStateFromProps方法:
1. 组件实例化。
2. 组件的props发生变化。
3. 父组件重新渲染。
this.setState()不会触发getDerivedStateFromProps(),但是this.forceUpdate()会。
在update阶段也会调用一次这个方法。
React生命周期的变化的更多相关文章
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...
- React 生命周期及使用场景
对比版本:16.4.0 VS 16.3.0 VS 16.2.0 发现最近几次React版本更改比较大,在为17.0的大版本作准备.总结了一下React生命周期函数的变化. 综合对比图如下: 各版本分别 ...
- react复习总结(2)--react生命周期和组件通信
这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
- React 生命周期
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- Android N分屏模式Activity生命周期的变化
昨天Google发布了Android N Preview, balabala....我是用模拟器去验证的, 通过长按多任务窗口(口)进入分屏模式, 这里只进行了简单的测试, 不排除通过配置哪个参数, ...
- React生命周期详解
React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分: 实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...
- React生命周期简单详细理解
前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...
- Activity切换的时候生命周期的变化
之前在做笔试题的时候遇到一个问题:Activity A切换到ActivityB时,A和B的生命周期变化. 事实上,它们的生命周期变化是这样的: 1.A的onPause()方法被执行. 2.B的onCr ...
随机推荐
- Mac环境下RabbitMq安装与测试教程
RabbitMq安装与测试教程 Installing on Mac I. 安装 123456789 brew install rabbitmq ## 进入安装目录cd /usr/local/Cella ...
- Fiddler使用总结(二)
在上一篇中介绍了Fiddler的基本使用方法.通过上一篇的操作我们可以直接抓取浏览器的数据包.但在APP测试中,我们需要抓取手机APP上的数据包,应该怎么操作呢? Andriod配置方法: .确保手机 ...
- Java enum类型笔记
用途: 定义命令行参数,菜单选项,星期,方向(东西南北)等 与普通类的不同 有默认的方法 value() 每个enum类都已默认继承java.lang.Enum,所以enum类不能继承其他类 构造方法 ...
- [JSON].valueOf( keyPath )
语法:[JSON].valueOf( keyPath ) 返回:[任意类型 | null] 说明:获取键名路径原值,它保留原始值的类型 示例: b = sysFile.binary("tes ...
- 聊一聊 Flex 中的 flex-grow、flex-shrink、flex-basis
在使用 flex 布局的时候难以理解的是 flex-grow.flex-shrink.flex-basis 几个属性的用法,下面通过几个例子来演示. flex-basis flex-basis 用于设 ...
- 创建https证书
第一个里程碑:创建https证书 创建文件认证目录 mkdir /application/nginx/key/ -p 在认证目录下创建认证文件 openssl req -new -x509 -node ...
- HADOOP docker(一):安装hadoop实验集群(略操蛋)
一.环境准备 1.1.机器规划 主机名 别名 IP 角色 9321a27a2b91 hadoop1 172.17.0.10 NN1 ZK RM 7c3a3c9cd595 hadoo ...
- Thunder团队——文案+美工
团队名称:Thunder 组长:王航 成员:李传康.代秋彤.邹双黛.苗威.宋雨.胡佑蓉.杨梓瑞 项目名称:爱阅app 需求概述: 现在市面上有很多手机阅读器,但是基本上不是收费就是广告满天飞.基于这种 ...
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- lintcode-196-寻找缺失的数
196-寻找缺失的数 给出一个包含 0 .. N 中 N 个数的序列,找出0 .. N 中没有出现在序列中的那个数. 样例 N = 4 且序列为 [0, 1, 3] 时,缺失的数为2. 挑战 在数组上 ...