zoukankan      html  css  js  c++  java
  • 帮你理清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)
  • 相关阅读:
    bzoj3505 数三角形 组合计数
    cogs2057 殉国 扩展欧几里得
    cogs333 荒岛野人 扩展欧几里得
    bzoj1123 BLO tarjan求点双连通分量
    poj3352 road construction tarjan求双连通分量
    cogs1804 联合权值 dp
    cogs2478 简单的最近公共祖先 树形dp
    cogs1493 递推关系 矩阵
    cogs2557 天天爱跑步 LCA
    hdu4738 Caocao's Bridge Tarjan求割边
  • 原文地址:https://www.cnblogs.com/10manongit/p/12736874.html
Copyright © 2011-2022 走看看