美文网首页
react 生命周期详解

react 生命周期详解

作者: G_whk | 来源:发表于2019-04-19 19:06 被阅读0次
react组件挂载的过程,图解: 1639548946e168e6 (1).png
getDefaultProps

执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组件指定的
这个方法在对象被创建之前执行,因此不能在方法内调用this.props ,另外,注意任何getDefaultProps()返回的对象在实例中共享,不是复制

getInitialState

控件加载之前执行,返回值会被用于state的初始化值

componentWillMount

执行一次,在初始化render之前执行,如果在这个方法内调用setState,render()知道state发生变化,并且只执行一次(React v16.3后废弃该生命周期,可以在constructor中完成设置state)

componentDidMount

在初始化render之后只执行一次,在这个方法内,可以访问任何组件,componentDidMount()方法中的子组件在父组件之前执行从这个函数开始,就可以和 js 其他框架交互了,例如设置计时 setTimeout 或者 setInterval,或者发起网络请求

shouldComponentUpdate

这个方法在初始化render时不会执行,当props或者state发生变化时执行,并且是在render之前,当新的props或者state不需要更新组件时,返回false,默认情况下,shouldComponentUpdate方法返回true防止state快速变化时的问题,但是如果·state不变,props只读,可以直接覆盖shouldComponentUpdate用于比较props和state的变化,决定UI是否更新,当组件比较多时,使用这个方法能有效提高应用性能

componentWillUpdate

当props和state发生变化时执行,并且在render方法之前执行,当然初始化render时不执行该方法,需要特别注意的是,在这个函数里面,你就不能使用this.setState来修改状态。这个函数调用之后,就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数,就会调用render()来更新界面了(React v16.3后废弃该生命周期,可以用新的周期 getSnapshotBeforeUpdate)

componentDidUpdate

组件更新结束之后执行,在初始化render时不执行

componentWillReceiveProps

当props发生变化时执行,初始化render时不执行,在这个回调函数里面,你可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用(React v16.3后废弃该生命周期,可以用新的周期 static getDerivedStateFromProps 代替)

componentWillUnmount

当组件要被从界面上移除的时候,就会调用componentWillUnmount(),在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等

react v16.3删掉以下三个生命周期

componentWillMount
componentWillReceiveProps
componentWillUpdate

新增两个生命周期

static getDerivedStateFromProps
getSnapshotBeforeUpdate

static getDerivedStateFromProps

1.触发时间:在组件构建之后(虚拟dom之后,实际dom挂载之前) ,以及每次获取新的props之后。
2.每次接收新的props之后都会返回一个对象作为新的state,返回null则说明不需要更新state.
3.配合componentDidUpdate,可以覆盖componentWillReceiveProps的所有用法

getSnapshotBeforeUpdate

1.触发时间: update发生的时候,在render之后,在组件dom渲染之前。
2.返回一个值,作为componentDidUpdate的第三个参数。
3.配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法。

相关文章

  • React 生命周期详解

    React 生命周期详解 生命周期的三个阶段 装载过程: Mouth React组件的第一次渲染DOM的过程, 更...

  • react组件生命周期

    下图详细列述了 React 组件在整个生命周期中所涉及的方法和行为: 生命周期详解 组件在整个 ReactJS 的...

  • vue生命周期

    vue生命周期详: vue生命周期详解图: vue生命周期详解代码展示:

  • React 经典案例--TodoList

    上次写了一个React生命周期详解,给新手看还是不是特别容易理解(其实我也是新手),这边再做一个React的tod...

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React基础篇之组件的生命周期

    引出生命周期 react生命周期(旧) react生命周期(新) getSnapshotBeforeUpdate的...

  • React生命周期详解

    Mounting / 挂载阶段 getDefaultProps->getInitialState->compone...

  • react生命周期详解

    这一部分内容一直一知半解,最近发现一篇文章,非常好的解释了生命周期的问题,留存在这里,以备后查! 简介 一个rea...

  • React生命周期详解

    1 React生命周期流程 调用流程可以参看上图。分为实例化,存在期和销毁三个不同阶段。介绍生命周期流程的文章很多...

  • react生命周期详解

    上面的这幅图已经很好地诠释一个react组件的生命周期,所以认真看图!认真看图!认真看图! 一、getDefaul...

网友评论

      本文标题:react 生命周期详解

      本文链接:https://www.haomeiwen.com/subject/mticgqtx.html