帮你理清React的生命周期
这是一个从印记中文 | react官方文档提取总结的,算是帮自己理清并且强化记忆
React
的生命周期,以便以后编写组件的时候能够有更清晰的思路。本文如有纰漏,欢迎指正
整体上来讲,React
生命周期分为了 挂载(装配) 、 更新 、 卸载 以及 捕错 四个状态阶段。每种状态里需要执行若干个生命周期函数,这些函数可能会在不同的阶段里重新被调用。
用流程图来形象地归纳总结如下:
挂载(装配)
这些方法会在组件实例创建和插入DOM中时被调用
1.constructor()
构造函数会在装配前调用。
constructor(props){
//...
}
2.static getDerivedStateFromProps()
组件实例化后和接受新属性时调用,返回一个对象以更新状态,或返回null
表明不需要更新状态
static getDerivedStateFromProps(nextProps,prevState)
3.componentWillMount()/UNSAFE_componentWillMount()
[UNSAFE_]componentWillMount()
:装配前立刻调用,发生在render()
之前
17版前,这一生命周期函数名字都可以写为
componentWillMount()
4.render()
必须的钩子函数,不应该改变组件的状态,且不与浏览器交互
5.componentDidMount()
componentDidMount()
:组件装配后立刻调用,实现远端网络请求的地方
更新
属性或状态发生改变后,会触发一次更新,组件重新渲染,下述方法会被调用。
1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
在挂载了的组件接收到新属性前调用。推荐使用getDerivedStateFromProps
生命周期而不是该函数。
UNSAFE_componentWillReceiveProps(nextProps)
2. static getDerivedStateFromProps()
见挂载
章节该钩子
3. shouldComponentUpdate()
在挂载了的组件属性变化和状态变化时调用。通过控制返回的boolean
值告诉React是否重新渲染该组件。
无法控制子组件的重新渲染与否
4. componentWillUpdate() / UNSAFE_componentWillUpdate()
当接收到新属性或状态时,UNSAFE_componentWillUpdate()
在渲染前被立即调用
UNSAFE_componentWillUpdate(nextProps, nextState)
注意
若shouldComponentUpdate()返回false,UNSAFE_componentWillUpdate()将不会被调用。
5. render()
见挂载
章节该钩子
6. getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate()
在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会作为参数被传递给componentDidUpdate()
。
getSnapshotBeforeUpdate(prevProps, prevState)
7. componentDidUpdate()
在更新发生后立即被调用。适合发送请求的地方
componentDidUpdate(prevProps, prevState)
卸载
1. componentWillUnmount()
componentWillUnmount()
在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作,例如解绑定时器,取消网络请求,清理任何在componentDidMount环节创建的DOM元素。
错误处理
1. componentDidCatch()
错误边界捕捉发生在子组件树中任意地方的JavaScript错误,一个错误边界并不能捕捉它自己内部的错误。
componentDidCatch(error, info)
来源:https://segmentfault.com/a/1190000017175195
帮你理清React的生命周期的更多相关文章
- react.js 生命周期componentDidUpdate的另类用法:防止页面过渡刷新
场景:数据新增成功之后,需要返回原来的查询表,这时候的查询,需要使用react的生命周期:componentDidUpdate componentDidUpdate() 这个生命周期的作用是当prop ...
- React的生命周期
我们先来看一张图,其实看完这张图基本就懂了,如果还不懂,请继续往下看. getDefaultProps 执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组 ...
- 附实例!图解React的生命周期及执行顺序
本文由云+社区发表 作者:前端林子 1.七个可选的生命周期 可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...
- React之生命周期
哈喽,这是我的第一篇博客,请大家多多关照~ 追根溯源:What's the lifeCycle? 生命周期函数指在某一时刻组件会自动调用执行的函数: React生命周期概览: 接下来我们就着生命周期的 ...
- React组件生命周期小结
React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- React 函数生命周期
React 函数生命周期基础 1 ,概念 在组件创建.到加载到页面上运行.以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件,统称为组件的生命周期:* 2,组件生命周 ...
- 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法
生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
随机推荐
- Java多线程_生产者消费者模式2
在我的上一条博客中,已经介绍到了多线程的经典案列——生产者消费者模式,但是在上篇中用的是传统的麻烦的非阻塞队列实现的.在这篇博客中我将介绍另一种方式就是:用阻塞队列完成生产者消费者模式,可以使用多种阻 ...
- mac安装conda后,终端的用户名前面有一个(base),最佳解决方案
mac安装了conda后,前面会有一个(base),很烦人,终于找到最佳解决方案了: $ conda config --set auto_activate_base false 原因: 安装conda ...
- 4GL之Non-SCROLLING CURSOR
在4gl中CURSOR可以说是每一个程序中都会有的,而CURSOR又分为三种SCROLLING CURSOR.Non-SCROLLING CURSOR.LOCKING CURSOR. Non-SCRO ...
- 两台Linux服务器文件同步
在给公司或者学校做系统部署的时候,为了数据安全往往我们至少需要两台服务器,接下来请看: 我们要实现的是把客户端(192.168.0.1)的复制到目标服务器(192.168.0.2) 一.目标服务器 1 ...
- 整站死链接检测与查询工具 Xenu(可以用来制作sitemap)
http://www.wocaoseo.com/thread-286-1-1.html 很多新手朋友们都会去找一些工具来检查网站死链接,这里给大家分享一款非常好用的检查网站死链接的工具xenu,大家可 ...
- JAVA开源软件的技术选型--开源软件诞生2
技术准备--第2篇 用日志记录“开源软件”的诞生 赤龙ERP开源地址,点亮星标,支持一下,万分感谢 码云:https://gitee.com/redragon/redragon-erp github: ...
- 手摸手 Elastic Stack 使用教程 - 环境安装
前言 在日常的开发中,会涉及到对一些中间件以及基础组件的使用,日志汇总分析.APM 监控.接口的健康检查.站内搜索,以及对于服务器.nginx.iis 等等的监控,最近的几个需求点,都和 Elasti ...
- DataPicker 日期选择器
问题描述:DataPicker 日期选择器,如何选取时间段(本日,昨日,上周,上月,当月) 代码实现: <el-date-picker v-model="searchForm.data ...
- android开发之动画的详解 整理资料 Android开发程序小冰整理
/** * 作者:David Zheng on 2015/11/7 15:38 * * 网站:http://www.93sec.cc * * 微博:http://weibo.com/mcxiaob ...
- 在C++/CLI环境下,千万不要把普通全局函数当标准C/C++的函数指针传递给native的库使用
先上一个简单代码: #include <cstdlib> #include <cstdio> // native apis extern "C" { typ ...