1.react生命周期详解(2020.12.05)

刚敲完vue的生命周期，现在来敲敲react的生命周期,当然生命周期只针对类组件(我很不常用类组件)。

raect生命周期(v16之前)

initialization(初始化阶段)
mounting(挂载阶段)
updation(更新阶段）
unmounting(卸载阶段)

1.initialization(初始化阶段)
自然是创建一个类，然后创建构造函数了

这里看一下，我们创建了Hello类并继承了React.Component这个基类，如果不继承的话，函数都没有，就没有接下来所有的生命周期了。然后我们看构造函数constructor(props)，传入一个来自父组件的props，也叫接口，这样子组件就可以读取来自父组件的值了。当然，我们还可以在构造函数里面去设定state，子组件里所有的数据都存放在这里，但记住，this.state=必须是一个object类型或是null(你不定义也没关系)。这样咱们的初始化就完成了。

2.mounting(挂载阶段)
挂载阶段里面有3个阶段，先后顺序是

componentWillMount（组件挂载前）
render （组件渲染）
componentDidMount （组件挂载完成）

输出：

里就可以看到，componentWillMount其实非常鸡肋，它在组件生成中只会被调用一次，而且只能修改修改state了，所以我们如果要修改，为啥不直接在初始化的时候改呢…这里，大家有没有注意到一个bug，我们setState完后，输出的仍是原state，这里就是setState的机制了，它会在你执行完整个函数之后才会生效，然后就是render()渲染了。最后就是componentDidMount完成挂载了。

3.updation(更新阶段)

这里我们看到，props和states的变化都会触发更新，这里要注意一点是，setState的更新以及父组件的更新引起的props更新，都将会迫使子组件更新，无论这个更新是否有变化。
我们先来看一下props触发更新的过程
第一步，componentWillReceiveProps，也就是接收props。这里要分两个情况，第一种如果是父组件的重新render，而导致的重新传props，那么子组件也会跟着直接更新渲染。第二种是如果是props发生了改变，导致子组件的state改变，也就是转化成state更新了，但是这并不会引起二次重复渲染，react不会这么傻。
第二步，shouldComponentUpdate(需要更新)，
接下来，componentWillUpdate ->render - >componentDisUpdate，是不是很似曾相识？，咱这里就是用Update替换了之前的Mount，过程是一样的，原理都是通过diff算法比较新虚拟dom节点和旧dom节点，找出需要更新的节点，然后再更新重新渲染真实dom树。
这样的话，更新state触发的就是一样的流程了。
unmounting(卸载阶段)
这个阶段只有一个函数componentWillUnmount，也就是在销毁之前做一些解绑工作，比如说清除定时器等以此来消除一些副作用。

这样v16前版本的生命周期就如上所述了。
我们现在来看一下v16.3版本的生命周期

可以看到，相比于之前，在render()之前我们删除了
componentWillReceiveProps
componentWillMount
componentWillUpdate
所有的will操作都被删除了，因为实在是太鸡肋了和繁琐，在图上看来，增加getDerivedStateFromProps以此来代替他们。(并不是完全替代，如果是因为自身setState引发或者forceUpdate引发，而不是不由父组件引发，那么getDerivedStateFromProps也不会被调用，所以这是一个大伏笔)
这个getDerivedStateFromProps是一个静态函数，所以函数体内不能访问this。

在render()之后,添加了一个新的函数getSnapshotBeforeUpdate，这个函数是在update中被调用的，在render()和dom节点更新之前，会触发这个函数。这给了一个机会去获取DOM信息，计算得到一个snapshot，这个snapshot会作为componentDidUpdate的第三个参数传入。但实际上其实目前并没有啥软用。
紧接着我们直接上最新的图

发生了啥，一眼就看得出来，之前所说的伏笔在v16.4中被填上了。

总的来说，react的生命周期相较于vue我觉得是比较难以理解(因为我真的真的不怎么用类组件的原因吧。。。)，但是基本过程都是一样的。

but，其实两者的diff算法还是有些区别的，等下我会再写一篇来介绍一下react和vue的diff算法差异，以及diff算法的原理。

最后，感谢参考！！！
https://zhuanlan.zhihu.com/p/38030418
https://www.jianshu.com/p/514fe21b9914

1.react生命周期详解(2020.12.05)相关推荐

1.vue生命周期详解(2020.12.05)
vue生命周期,直接上官方图补一下引用vue的链接( src = "https://cdn.bootcss.com/vue/2.4.2/vue.js) 要明确生命周期,我们必须从钩子下手: ...
ES6中的React生命周期详解
太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...
react 生命周期详解
React-ES6 : class App extends React.Component {static get propTypes() {return {//nameProp: PropTypes ...
React 生命周期详解（新）
React 16之后有三个生命周期被废弃: componentWillMount componentWillReceiveProps componentWillUpdate 因为这些生命周期方法容易被 ...
Android面试之Activity生命周期详解
Activity生命周期详解一 Activity的四种状态: Activity的生命周期中存在四种基本的状态:活动状态(Active/Runing),暂停状态(Paused),停止状态(Stoppe ...
01.软件项目管理与敏捷方法——敏捷项目生命周期详解笔记
01.软件项目管理与敏捷方法--敏捷项目生命周期详解笔记 00.与其说是船还不如说是熟练的航行技术保证了成功的航行.--George William Curtis 01.敏捷项目是一个按照敏捷宣言宗旨 ...
taro生命周期详解
taro生命周期详解 taro介绍生命周期 react的钩子函数为兼容小程序的钩子函数个别生命周期详解以及注意 1.render()函数 2.constructor()构造函数 3.在各个生命周 ...
Android Activity 生命周期详解及监听
前言系列文章: Android Activity 与View 的互动思考 Android Activity 生命周期详解及监听 Android onSaveInstanceState/onResto ...
Fragment生命周期详解
关于Fragment的生命周期,博主写过Activity与Fragment生命周期详解,基本上把Fragment的生命周期详细介绍过,但是那仅仅是创建一个Fragmnet时的生命周期,而事实上Frag ...

1.react生命周期详解(2020.12.05)

raect生命周期(v16之前)

1.react生命周期详解(2020.12.05)相关推荐

最新文章

热门文章