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阶段也会调用一次这个方法。

转载于:https://www.cnblogs.com/mengff/p/9662778.html

React生命周期的变化相关推荐

react生命周期（自己的方式理解）
react生命周期(自己的方式理解) react的生命周期函数有:挂载,渲染/更新,卸载首先要知道react生命周期最初始的要有哪些?最后生命中出现的又有哪些?我本人喜欢把react比作是一个人的一 ...
你不可不知道的React生命周期
点小蓝字加关注! 作者:kim 来源:原创写在前面咱今天聊的话题是React生命周期,灵感来自于最近在网上发现一篇关于react生命周期的文章,里面记录的知识点竟然与小编所get到的有出入.作为一 ...
React 生命周期
生命周期方法组件的生命周期分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数 ...
react生命周期详细介绍
目录挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
React生命周期讲解
React生命周期图解先上图其实总结就是进入当前页面,,然后渲染页面,加载数据,渲染demo,数据更新,组件卸载 constructor /* * constructor 其实是Es6 里面带的 ...
React生命周期大全：
react生命周期分三个阶段: 1.初始化阶段(挂载) a.componentWillMount (): -- 用的较少,组件挂载到DOM前调用,且只会被调用一次,它代表的过程是组件已经经历了cons ...
前端React教程第二课 React生命周期设计思想
02 为什么 React 16 要更改组件的生命周期?(上) React 生命周期已经是一个老生常谈的话题了,几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍.然而,入门教材在设计上往往 ...
React 生命周期、Hooks
React React 生命周期 Hooks Hook 的特点 Effect Hook 自定义 hooks React 生命周期 react 生命周期是组件实例从创建运行到销毁的一系列过程 compo ...
浅谈 React 生命周期
浅谈 React 生命周期浅谈 React 生命周期旧版的生命周期新版的生命周期详解各个生命周期函数 constructor getDerivedStateFromProps render c ...

React生命周期的变化

React生命周期的变化相关推荐

最新文章

热门文章