捋一捋React的生命周期

MobService 发布于2019-08-23 15:20 / 3321人阅读

摘要：卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用，只跟实例的创建有关。

前言：React 的版本从 v15 到 v16.3 ，再到v16.4，现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入，而最令人困惑的却是它的生命周期，新旧生命周期函数混杂在一起，难免会让许多新来者有很多困惑。所以这一篇我们来分析一下 React 生命周期的演变及原因，进一步理解其使用。

组件生命周期的四个阶段

Initialization （初始化阶段：组件实例的创建）

Mounting （加载阶段：组件插入 dom中）

Updating （更新阶段：属性或状态每改变一次都将会触发一次，组件重新渲染。）

Unmounting （卸载阶段：组件卸载和销毁）

老版生命周期（16.3之前的生命周期）

Initialization （初始化阶段：涉及4个钩子函数）

这些方法会在组件初始化的时候被调用，只跟实例的创建有关。
如果用createReactClass进行创建，则还有getInitialState这些生命周期函数，但很少使用，我们这里不提及。

static defaultProps{} （getDefaultProps()）

定义默认props，会和父组件传下来的props进行合并，且以父组件中的props优先级更高，相当于{...defaultProps, props}。

static propTypes{} （getInitialState()）

定义props的数据类型，可以帮助我们确定其有效性，减少许多开发中不必要的错误。

constructor()

在加载阶段前调用一次，进行 state 的初始化。

constructor(props){
    super(props)
}

super(props)用来调用父类的构建方法。

Mounting （加载阶段：涉及3个钩子函数） componentWillMount()

新版中为UNSAFE_componentWillMount()。

只在组件加载时调用，整个生命周期只调用一次，以后组件更新也不会调用，此时可以修改 state。

render()

react 中最重要的生命周期函数，创建虚拟 dom，并进行 diff 算法，更新 dom 树也在此进行。所以不应该在此改变组件的状态或者与浏览器进行交互。

注意：这个函数不能缺少，如果不创建虚拟 dom，可以return null。

componentDidMount()

组件加载完成后立即调用，整个生命周期只调用一次，可以获取到更新后的 DOM，在此处可以进行网络请求等。

Updating （更新阶段：涉及5个钩子函数） componentWillReceiveProps()

新版中为UNSAFE_componentWillReceiveProps()。

在组件加载后，如果有新的props传递过来，会先调用这个函数，可以在这里调用setState()修改state。

componentWillReceiveProps(nextProps)

shouldComponentUpdate()

react中一个重要的性能优化点，组件接收到新的props或者state，返回true表示需要更新 dom，返回false阻止更新。

shouldComponentUpdate(nextProps, nextState)

componentWillUpdate()

新版中为UNSAFE_componentWillUpdate()。

组件加载时不调用，只有在组件需要更新（即shouldComponentUpdate返回true）时调用。

componentWillUpdate(nextProps, nextState)

注意：不能在这个方法中调用setState()修改state。

render()

同上。

componentDidUpdate()

在组件更新完成后立即被调用，可以进行网络请求等。

componentDidUpdate(prevProps, prevState)

Unmounting （卸载阶段：涉及1个钩子函数） componentWillUnmount()

在组件被卸载和销毁之前调用，可以在这里处理任何必要的清理工作，比如解除定时器，取消已经发起的网络请求，清理在componentDidMount函数中创建的 DOM 元素。

componentWillUnmount()

Error Handling（错误处理：涉及1个钩子函数） componentDidCatch()

错误边界捕获，在v16.0刚推出的时候新增加的一个生命周期函数，用于捕获在子组件树中任意地方发生的 JavaScript 错误，一个错误边界不能捕获它自己内部的错误。

componentDidCatch(error, info)

组件的基本写法

import React, {Component} from "React"

export default class OldReactComponent extends Componet{
    static defaultProps={}
    static propTypes={}
    constructor(props){
        super(props)
    }
    state={}
    componentWillMount(){}
    render(){
        return null
    }
    componentDidMount(){}
    componentWillReceivePorps(nextProps){}
    componentShouldUpdate(nextProps,nextState){
        return true
    }
    componentWillUpdate(nextProps,nextState){}
    componentDidUpdate(){}
    componentWillUnmount(){}
}

新版生命周期（16.4之后的生命周期）

（带UNSAFE_的函数在以后将会被丢弃，官方也不建议使用，这里不再列出。）

新版本中，新增了三个生命周期函数：

static getDerivedStateFromProps()

getSnapshotBeforeUpdate

static getDerivedStateFromError()

同时deprecate了一组生命周期API，包括：

componentWillReceiveProps

componentWillMount

componentWillUpdate

可以看出除了shouldComponentUpdate之外，render 之前的所有生命周期都被消灭了。原因是这些生命周期太多时候没有被正确使用，而且在Fiber之后，如果要开启async rendering，在render函数之前的所有函数，都有可能被执行多次。

Initialization （初始化阶段：涉及4个钩子函数）

同上。

Mounting （加载阶段：涉及3个钩子函数） static getDerivedStateFromProps()

因为是静态方法，所以无法访问到组件实例。每次组件调用render前都会被调用，获取新的props和state（v16.3只会为props的而调用，v16.4修正为props和state)之后，返回一个对象作为新的state，如果返回null则表示不需要更新；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法。并且它应该是个纯函数，没有副作用(side effect)。

static getDerivedStateFromProps(props,state)

render()

同上。

componentDidMount()

同上。

Updating （更新阶段：涉及5个钩子函数） static getDerivedStateFromProps()

同上。

shouldComponentUpdate()

同上。

render()

同上。

getSnapshotBeforeUpdate()

触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法，常用于 scroll 位置的定位。

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate()

同上。

Unmounting （卸载阶段：涉及1个钩子函数） componentWillUnmount()

同上。

Error Handling（错误处理：涉及2个钩子函数） componentDidCatch()

同上。

static getDerivedStateFromError()

用于在“render”阶段（非render函数）的错误捕获，应该是个纯函数，没有副作用(side effect)。

static getDerivedStateFromError(error)

组件的基本写法

import React, {Component} from "React"

export default class OldReactComponent extends Componet{
    static defaultProps={}
    static propTypes={}
    constructor(props){
        super(props)
    }
    state={}
    static getDerivedStateFromProps(props,state){}
    render(){
        return null
    }
    componentDidMount(){}
    componentShouldUpdate(nextProps,nextState){
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState){}
    componentDidUpdate(){}
    componentWillUnmount(){}
}

总结

React新的生命周期新增static getDerivedStateFromProps、getSnapshotBeforeUpdate并弃用componentWillMount，componentWillReceiveProps，componetWillUpdate（这三个函数将在 React 17中删除）。

新增static getDerivedStateFromError捕获“render”阶段的错误。

参考

帮你理清React的生命周期

React-新的生命周期（React16版本）

React v16.3之后的组件生命周期函数

清晰大图请点击这里

云服务器 GPU云服务器捋一捋线程的生命周期 bug的生命周期 activity的生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101888.html

捋一捋服务器端渲染和客户端渲染的区别

摘要：常听到服务器端渲染和浏览器端渲染这兄弟俩，一直不是很理解，尤其对于我这种没有后台开发经验的小白来说，理解起来异常困难，最近花时间查了很多资料，总算弄明白了，于是整理下，加深记忆。常听到服务器端渲染和浏览器端渲染这兄弟俩，一直不是很理解，尤其对于我这种没有后台开发经验的小白来说，理解起来异常困难，最近花时间查了很多资料，总算弄明白了，于是整理下，加深记忆。这边文章是参考下面的文章做的总...

muzhuyu 2019-08-02 15:10 评论0 收藏0
捋一捋服务器端渲染和客户端渲染的区别

摘要：常听到服务器端渲染和浏览器端渲染这兄弟俩，一直不是很理解，尤其对于我这种没有后台开发经验的小白来说，理解起来异常困难，最近花时间查了很多资料，总算弄明白了，于是整理下，加深记忆。常听到服务器端渲染和浏览器端渲染这兄弟俩，一直不是很理解，尤其对于我这种没有后台开发经验的小白来说，理解起来异常困难，最近花时间查了很多资料，总算弄明白了，于是整理下，加深记忆。这边文章是参考下面的文章做的总...

chunquedong 2019-08-23 17:50 评论0 收藏0
捋一捋Python中的List（下）

摘要：以上函数默认会对一个数字组成的数组进行按数字面值大小排序下午雷学委列表的其他函数持续学习持续开发效果如下，读者可以仔细看看是否如学委所说。正式的Python专...

instein 2021-11-15 11:39 评论0 收藏0
捋一捋这些年一起薅过的羊毛 – 包含永久免费vps、域名等

摘要：特点，永久免费，数据中心多达个，之前好用的首尔和东京因为众多的涌入导致线路拥堵不堪此外机型可自由分配个，内存，最大空间容量和的带宽。是乌克兰官方为个人提供的免费二级域名后缀，任何人都可以申请。由乌克兰官方运行，稳定性有保障。作为一个mjj，最喜欢做的事情就是薅羊毛，这篇文章就来整理一些特别优质的，不容错过的羊毛！算是薅羊毛的一个指南！！一：永久VPS篇这里整理一些永久...

mrli2016 2021-10-15 09:42 评论0 收藏1
你还认为JS中万物皆对象？

摘要：这也解答了我曾经的一个疑问同样的道理，在调用属性的瞬间，也是使用先来实例化一个对象，所以那一瞬间他们的构造函数以及原型对象是相同的，但也仅仅是那一瞬间。经常在国内的各大网站博客上看到一句话，叫做JS中万物皆对象，那是否真是如此？那么，我们先来捋一捋JS中的数据类型，JS中的数据类型有下面几种 Undefined Null Boolean Number String Symbol ...

levinit 2019-08-21 17:39 评论0 收藏0