帮你理清React的生命周期

wfc_666 发布于2019-08-29 17:25 / 1170人阅读

摘要：推荐使用生命周期而不是该函数。这一生命周期返回的任何值将会作为参数被传递给。在更新发生后立即被调用。

这是一个从 印记中文 | 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)

GPU云服务器云服务器线程的生命周期 bug的生命周期 activity的生命周期 ios应用的生命周期

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

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

帮你理清React的生命周期

摘要：推荐使用生命周期而不是该函数。这一生命周期返回的任何值将会作为参数被传递给。在更新发生后立即被调用。这是一个从印记中文 | react官方文档提取总结的，算是帮自己理清并且强化记忆React的生命周期，以便以后编写组件的时候能够有更清晰的思路。本文如有纰漏，欢迎指正整体上来讲，React生命周期分为了挂载（装配）、更新、卸载以及捕错四个状态阶段。每种状态里需要...

itvincent 2019-08-23 13:45 评论0 收藏0
捋一捋React的生命周期

摘要：卸载阶段组件卸载和销毁老版生命周期之前的生命周期初始化阶段涉及个钩子函数这些方法会在组件初始化的时候被调用，只跟实例的创建有关。前言：React 的版本从 v15 到 v16.3 ，再到v16.4，现在最新的版本是 v16.8了。其中最大的变化可能是React Hooks的加入，而最令人困惑的却是它的生命周期，新旧生命周期函数混杂在一起，难免会让许多新来者有很多困惑。所以这一篇我们来...

MobService 2019-08-23 15:20 评论0 收藏0
浅谈React Fiber

摘要：因为版本将真正废弃这三生命周期到目前为止，的渲染机制遵循同步渲染首次渲染，更新时更新时卸载时期间每个周期函数各司其职，输入输出都是可预测，一路下来很顺畅。通过进一步观察可以发现，预废弃的三个生命周期函数都发生在虚拟的构建期间，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景前段时间准备前端招聘事项...

izhuhaodev 2019-08-26 10:43 评论0 收藏0
React Fiber 架构理解

摘要：架构理解引用原文是核心算法正在进行的重新实现。构建的过程就是的过程，通过来调度执行一组任务，每完成一个任务后回来看看有没有插队的更紧急的，把时间控制权交还给主线程，直到下一次回调再继续构建。 React Fiber 架构理解引用原文：React Fiber ArchitectureReact Fiber is an ongoing reimplementation of Reacts...

Berwin 2019-08-23 16:32 评论0 收藏0