React 生命周期详解(新)
React 16之后有三个生命周期被废弃:
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
因为这些生命周期方法容易被误解和滥用。
React 16.8+的生命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段。
挂载阶段
- constructor: 构造函数,最先被执行,我们通常在构造函数里初始化
state
对象或者给自定义方法绑定this
- getDerivedStateFromProps:
static getDerivedStateFromProps(nextProps, prevState)
,这是个静态方法,当我们接收到新的属性想去修改state
,可以使用getDerivedStateFromProps
- render:
render
函数是纯函数,只返回需要渲染的东西,不应该包含其它的业务逻辑,可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容 - componentDidMount: 组件装载之后调用,此时可以获取到DOM节点并操作,比如对canvas,svg的操作,服务器请求,订阅都可以写在这个里面,但是记得在
componentWillUnmount
中取消订阅。
更新阶段
- getDerivedStateFromProps: 此方法在更新个挂载阶段都可能会调用
- shouldComponentUpdate:
shouldComponentUpdate(nextProps, nextState)
,有两个参数nextProps
和nextState
,表示新的属性和变化之后的state
,返回一个布尔值,true
表示会触发重新渲染,false
表示不会触发重新渲染,默认返回true
,我们通常利用此生命周期来优化React程序性能 - render: 更新阶段也会触发此生命周期
- getSnapshotBeforeUpdate:
getSnapshotBeforeUpdate(prevProps, prevState)
,这个方法在render
之后,componentDidUpdate
之前调用,有两个参数prevProps
和prevState
,表示之前的属性和之前的state
,这个函数有一个返回值,会作为第三个参数传给componentDidUpdate
,如果你不想要返回值,可以返回null,此生命周期必须与componentDidUpdate
搭配使用 - componentDidUpdate:
componentDidUpdate(prevProps, prevState, snapshot)
,该方法在getSnapshotBeforeUpdate
方法之后被调用,有三个参数prevProps
,prevState
,snapshot
,表示之前的props,之前的state,和snapshot。第三个参数是getSnapshotBeforeUpdate
返回的,如果触发某些回调函数时需要用到 DOM 元素的状态,则将对比或计算的过程迁移至getSnapshotBeforeUpdate
,然后在componentDidUpdate
中统一触发回调或更新状态。
卸载阶段
- componentWillUnmount: 当组件被卸载或者销毁了就会调用,我们可以在这个函数里去清除一些定时器,取消网络请求,清理无效的DOM元素等垃圾清理工作。
react生命周期图
React 生命周期详解(新)相关推荐
- ES6中的React生命周期详解
太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...
- 1.react生命周期详解(2020.12.05)
刚敲完vue的生命周期,现在来敲敲react的生命周期,当然生命周期只针对类组件(我很不常用类组件). raect生命周期(v16之前) initialization(初始化阶段) mounting( ...
- react 生命周期详解
React-ES6 : class App extends React.Component {static get propTypes() {return {//nameProp: PropTypes ...
- taro生命周期详解
taro生命周期详解 taro介绍 生命周期 react的钩子函数 为兼容小程序的钩子函数 个别生命周期详解以及注意 1.render()函数 2.constructor()构造函数 3.在各个生命周 ...
- Android面试之Activity生命周期详解
Activity生命周期详解 一 Activity的四种状态: Activity的生命周期中存在四种基本的状态:活动状态(Active/Runing),暂停状态(Paused),停止状态(Stoppe ...
- vue 声明周期函数_Vue 生命周期详解
Vue 生命周期详解 Vue 生命周期流程 最开始,用户使用 new Vue() 创建根 Vue 实例,或者 Vue 实例化子组件都会调用_init方法(我们将这两种实例都称为vm): functio ...
- Android Activity 生命周期详解及监听
前言 系列文章: Android Activity 与View 的互动思考 Android Activity 生命周期详解及监听 Android onSaveInstanceState/onResto ...
- Fragment生命周期详解
关于Fragment的生命周期,博主写过Activity与Fragment生命周期详解,基本上把Fragment的生命周期详细介绍过,但是那仅仅是创建一个Fragmnet时的生命周期,而事实上Frag ...
- Fragment的懒加载与生命周期详解
提示:本文仅为笔者学习记录 Fragment的懒加载与生命周期详解 什么是懒加载 了解Fragment的生命周期 onAttach onCreate onCreateView onActivityCr ...
最新文章
- AliSQL 20170716版本发布 Invisible Indexes 功能和 SELECT FROM UPDATE 语法
- 【Python】tqdm创建进度条
- 一、iVX简介(IVX 快速开发教程)
- 123. 买卖股票的最3佳时机 III
- @RestControllerAdvice注解使用
- 这 6 个开源工具 yyds
- Asp.Net SignalR - 简单聊天室实现
- python自动化测试工具开发_Python+Selenium自动化测试教程连载(2)
- Linux调度器 - deadline调度器
- java model1和model2_Java项目(4)——探究两种开发模型的异同-Model1与Model2
- 【vim】vim常用命令
- Softreference | WeakReference
- H5微信授权登录 H5支付 外部浏览器微信支付 前端一个函数搞
- 计算机应用基础论文1000字,计算机应用基础论文.doc
- word读入富文本编辑器,编辑后导出下载word日常总结
- 14 款命令行常用工具的替代品
- JAVA高级篇之Java Reflection详解
- 各地留守过年最全福利盘点
- 3、配置/管理Oracle数据库---监听程序配置
- list和数组间的相互转换(Java)
热门文章
- c++ ANSI与utf8互相转换
- 【C++】STL中deque底层剖析
- 安卓开发入门教程-Fragment
- osgEarth添加线特征
- Casper(CSPR)已在Metal Pay上线,进一步整合到现有的商业模式中
- html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)实现的方法
- 2022-2027年中国速冻米面食品行业发展前景及投资战略咨询报告
- 微信 jssdk的简单使用
- #UNTF致敬我的第一篇wp——(爷的历险记Misc)
- 2018ICPC南京 Problem M. Mediocre String Problem(回文串,马拉车,扩展KMP)