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

时间: 2024-08-03 14:50:55

React生命周期的变化的相关文章

vue与 react 生命周期

Vue vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到的created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调.mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染beforeMount:在挂载开始之前被调用:相关的 render

vue生命周期和react生命周期对比

一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></

Activity在弹出对话框之后生命周期的变化

实践证明,弹出对话框的时候,不会引起任何Activity的任何生命周期的变化,除非你利用的Theme以Dialog的形式出现的Activity的时候,会出现引起生命周期变化.

react生命周期方法

每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的"生命周期方法".方法中带有前缀 will 的在特定环节之前被调用,而带有前缀 did 的方法则会在特定环节之后被调用. react生命周期可分为三个状态以及对应的方法 Mounting(装配) constructor() React组件的构造函数将会在装配之前被调用. componentWillMount() 在渲染前调用,在客户端也在服务端. render() 所有组件类都必须有自己的 render 方法,用于输出组件.

前端005/React生命周期

ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生命周期函数 (一).初始化阶段 1.设置组件的默认属性 static defaultProps = { name: 'sls', age:23 }; //or Counter.defaltProps={name:'sls'} 复制代码 2.设置组件的初始化状态 constructor() { sup

react生命周期知识点

react生命周期知识点 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.render5.componentDidMount 当组件在服务端被实例化,首次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.r

React生命周期学习整理

一.React生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性. 2.getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state.此时可以访问this.props 3.componentWillMount() 组件初始化时只调用,以后组件更新不调用,整个生命周期

react生命周期总结

当通过createClass创建了组件之后,该React组件就有了生命周期.通常一个React组件的生命周期可分为三个阶段: Mounting:挂载组件,也就是组件实例化 ReciveProps:存在期,在这个时期组件的props和state会变化,重新渲染组件 Unmounting:卸载组件,也就是组件被销毁 React在生命周期中提供了10种API: 1.getDefaultProps():作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享. 2.getI

随便扯扯React生命周期 --《爱看不看系列》

生命周期嘛,顾名思义,就是说组件这辈子从生下来到死掉经历的事情.先来看看一张图片,温故温故,如图: 你会发现有些周期的名字都能找出点规律,我找到的规律是凡是 Will 字母的,表示该钩子函数会在该生命周期发生之前调用:包含前缀did表示该钩子函数会在该生命周期发生之后调用. 大概给生命周期分及各类: 1.Mounting(挂载) constructor() componentWillMount() render() componentDidMount() 上面几个函数会在组件被创建和插入到DOM