React心得之降龙十八掌：第三式-见龙在田（组件生命周期详解）

引言

（乾卦九二）《彖》曰：“‘见龙在田’，德施普也。”“见龙在田，利见大人。”

在傅佩荣《自我的觉醒》中这样说道，见龙在田：龙出现在地上。这时候开始崭露头角，表现也可圈可点，像个青年才俊，让大家寄予厚望，但是仍须努力，安于偏下的位置。
对于我们学习React也是一样，前俩篇只是讲了一些概念性的知识点，后面的知识点会不断的深入到前面的知识点的每一个细节及原理，更多的时候我们需要想先是怎么用，自己创建几个小demo用一下、接着想为什么要这么用、最后再深究其原理、知其然用其所以然，根据项目的需求使用不同的用法
这一章主要是对于React组件的生命周期的原理详解

概念

在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为组件的生命周期；

组件的生命周期分为三部分：

组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；
- componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOM
- render：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了
- componentDidMount: 组件完成了挂载，此时，组件已经显示到了页面上，当这个方法执行完，组件就进入都了运行中的状态
组件运行阶段：也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次；
- componentWillReceiveProps: 组件将要接收新属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值；
- shouldComponentUpdate: 组件是否需要被更新，此时，组件尚未被更新，但是，state 和 props 肯定是最新的
- componentWillUpdate: 组件将要被更新，此时，尚未开始更新，内存中的虚拟DOM树还是旧的
- render: 此时，又要重新根据最新的 state 和 props 重新渲染一棵内存中的虚拟DOM树，当 render 调用完毕，内存中的旧DOM树，已经被新DOM树替换了！此时页面还是旧的
- componentDidUpdate: 此时，页面又被重新渲染了，state 和虚拟DOM 和页面已经完全保持同步
组件销毁阶段：也有一个显著的特点，一辈子只执行一次；
- componentWillUnmount: 组件将要被卸载，此时组件还可以正常使用；

图解：

defaultProps

在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 constructor 构造器中的 this.state = {}，来初始化组件的状态。

React生命周期的回调函数总结成表格如下：

组件生命周期的执行顺序：

• Mounting：
• constructor()
• componentWillMount()
• render()
• componentDidMount()
• Updating：
• componentWillReceiveProps(nextProps)
• shouldComponentUpdate(nextProps, nextState)
• componentWillUpdate(nextProps, nextState)
• render()
• componentDidUpdate(prevProps, prevState)
• Unmounting：
• componentWillUnmount()

总结

组件的生命周期可分成三个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

生命周期的方法有：

componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

愿你在这个代码繁杂、头发渐秃的编码世界里，可以温暖疲倦的自己，坚持学习

React心得之降龙十八掌：第三式-见龙在田（组件生命周期详解）相关推荐

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 ...
flutter 生命周期详解
flutter 生命周期详解简介一.widget 生命周期二.APP 生命周期总结简介众所周知,程序是有生命周期的,那么flutter 的生命周期是什么呢? flutter 的生命周期大体 ...
Android Activity 生命周期详解及监听
前言系列文章: Android Activity 与View 的互动思考 Android Activity 生命周期详解及监听 Android onSaveInstanceState/onResto ...
Cocos Creator 预制体(Prefab) - 生命周期详解
说明本文章适用于2.4.x版本的介绍,另外部分逻辑例如start或者enable的调用关系在编辑器或者其他运行环境下可能存在差异,建议大家自行去看源码! 创建可通过拖拉场景内节点到文件目录上生成一 ...
Fragment生命周期详解
关于Fragment的生命周期,博主写过Activity与Fragment生命周期详解,基本上把Fragment的生命周期详细介绍过,但是那仅仅是创建一个Fragmnet时的生命周期,而事实上Frag ...
Fragment的懒加载与生命周期详解
提示:本文仅为笔者学习记录 Fragment的懒加载与生命周期详解什么是懒加载了解Fragment的生命周期 onAttach onCreate onCreateView onActivityCr ...
01.软件项目管理与敏捷方法——敏捷项目生命周期详解笔记
01.软件项目管理与敏捷方法--敏捷项目生命周期详解笔记 00.与其说是船还不如说是熟练的航行技术保证了成功的航行.--George William Curtis 01.敏捷项目是一个按照敏捷宣言宗旨 ...

React心得之降龙十八掌：第三式-见龙在田（组件生命周期详解）

引言

概念

组件的生命周期分为三部分：

图解：

defaultProps

React生命周期的回调函数总结成表格如下：

组件生命周期的执行顺序：

总结

React心得之降龙十八掌：第三式-见龙在田（组件生命周期详解）相关推荐

最新文章

热门文章

React心得之降龙十八掌：第三式-见龙在田（ 组件生命周期详解）

引言

概念

组件的生命周期分为三部分：

图解：

defaultProps

React生命周期的回调函数总结成表格如下：

组件生命周期的执行顺序：

总结

React心得之降龙十八掌：第三式-见龙在田（ 组件生命周期详解）相关推荐

最新文章

热门文章

React心得之降龙十八掌：第三式-见龙在田（组件生命周期详解）

React心得之降龙十八掌：第三式-见龙在田（组件生命周期详解）相关推荐