React V16.x 生命周期调整

生命周期 | 属于阶段 | 是否可以setState | 作用

constructor() | 创建阶段 Mounting | | 注意:ES6 子类的构造函数必须执行一次 super()。React 如果构造函数中要使用 this.props,必须先执行 super(props)。

getDerivedStateFromProps | 当创建时、接收新的 props 时、setState 时、forceUpdate 时会执行 || 注意:v16.3 setState 时、forceUpdate 时不会执行这个方法,v16.4 修复了这个问题。

  • 逐渐废弃的生命周期方法(3个Will):
componentWillMount()
componentWillReceiveProps()
componentWillUpdate()

虽然废弃了这三个生命周期方法,但是为了向下兼容,将会做渐进式调整。

V16.3 并未删除这三个生命周期,同时还为它们新增以 UNSAFE_ 前缀为别名的三个函数 UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()。

在 16.4 版本给出警告将会弃用 componentWillMount()、componentWillReceiveProps()、componentWillUpdate() 三个函数

然后在 17 版本将会删除 componentWillMount()、componentWillReceiveProps()、componentWillUpdate() 这三个函数,会保留使用 UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps()、UNSAFE_componentWillUpdate()

  • 一般将生命周期分成三个阶段:

    创建阶段(Mounting)

    更新阶段(Updating)

    卸载阶段(Unmounting)

原文地址:https://www.cnblogs.com/cag2050/p/9692757.html

时间: 2024-11-14 11:24:51

React V16.x 生命周期调整的相关文章

react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之前对react使用不多,正好我目前在做的项目也在使用react+redux,借着这个机会系统的学习下react+redux. react是什么 react是一个JavaScript类库,通过react,我们可以构建可组合的UI,也就是说,我们可以通过重用组件来组合出我们的UI.可以说react的核心便是

2. React组件的生命周期

2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中React组件为我们提供了很多钩子,以便更加方便精细的控制程序. 钩子包括:componentWillMount/componentDidMount,同时在调用setState时候会触发:componentWillReceiveProps/shouldComponentUpdate/ComponentW

Vue与React的异同 -生命周期

vue的生命周期 创建前 beforeCreate 创建   create 挂载前 beforeMount 挂载 mounted 更新前 beforeUpdate 更新 updated 销毁前 beforeDestroyed 销毁  destoryed methods --方法 -----------------------------------华丽的分割线------------------------- 一个React组件的生命周期分为三个部分:挂载期(Mounting).存在更新期(Up

React 的组件生命周期

React组件的state或者props发生改变后会导致这个组件重新渲染,此时DOM也会有相应的变化.其中只有Render方法在上一篇博文中提到过,就是DOM渲染时的方法.当然,只有这个方法是不够的哦!,引文在实际的开发中,开发者们需要对组件的各个阶段进行控制,这样就可以高效的进行开发了,为此,就有了React的组件生命周期的概念. 对于一个基本的React组件,可以把每一个React组件的生命周期分为初始化.挂载.更新.卸载四个阶段,在React的这四个阶段中提供了不同的方法,以方便开发者有足

React 之 组件生命周期

React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作 生命周期详述1) 组件的三个生命周期状态: * Mount:插入真实 DOM * Update:被重新渲染 * Unmount:被移出真实 DOM2) React 为每个状态都提供了勾子(hook)函数 * componentWillMount()

React组件的生命周期

整个组件,从创建组件类开始,到渲染,到消亡的过程,就是组件的生命周期. 组件的生命周期可以分为三个阶段: 挂载阶段 更新阶段 卸载阶段 挂载阶段 在这个过程中,会触发以下几个事件 getDefaultProps,设置默认属性 getInitialState,设置初始状态 componentWillMount 即将挂载 render 渲染,就是挂载 componentDidMount 挂载完成 <!DOCTYPE html> <html> <head> <meta

React Native组件生命周期

概述 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点.就像 Android 开发中组件 一样,React Native的组件也有生命周期(Lifecycle). React Native组件的生命周期大致上可以划分为实例化阶段.存在阶段和销毁阶段.我们只有在理解组件生命周期的基础上,才能开发出高性能的app. React Native中组件的生命周期大致可以用以下图表示: 如图: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,

React Native之生命周期

React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分). 如图: 下面简单讲解一下三大阶段中各自的函数: 实例化阶段: 在日常开发中,最为常用的就是实例化阶段,因为该阶段是组件的构建,展示阶段. getDefaultProps: 该函数用于初始化一些默认的属性,开发中,通常将一些固定不变的值放在该函数内进行初始化,比如url.可以利用this.props.XXX 来获取该属性值.由于被初始化后,以后就不会再调用getDef

react-webpack,react中组件生命周期简单展示

首先配置下webpack.config.js module.exports={ entry:{ demo:'./app/app.js' }, output:{ path:__dirname+'/build', filename:'[name].js', library:'game', libraryTarget:'umd' }, module:{ loaders:[ { test:/\.js$/, loader:'jsx-loader' } ] } } 入口文件entry,整合js后输出outp