精华内容
下载资源
问答
  • React生命周期执行顺序详解

    千次阅读 2019-03-30 12:06:00
    二、React生命周期执行顺序详解 一、组件生命周期的执行次数是什么样子的??? 二、组件的生命周期执行顺序是什么样子的??? 三、什么时候该用componentWillReceiveProps? 有状态组件从挂在到卸载经历...

    目录

    一、Ract生命周期

    二、React生命周期执行顺序详解

    一、组件生命周期的执行次数是什么样子的???

    二、组件的生命周期执行顺序是什么样子的???

    三、什么时候该用componentWillReceiveProps?

     

     

    有状态组件从挂在到卸载经历一下生命周期:

    constructor() {
        super() // 必须在定义在内部state之前
    }           // super指代父类实例,调用super继承父类的this对象
     
    UNSAFE_componentWillMount(){}    //组件即将加载componentWillMount在16.3.0被弃用但目前前依然可用,以下UNSAFE_开头的均同理
    render(){}                //组件被渲染
    componentDidMount(){}     //组件已加载
     
    UNSAFE_componentWillReceiveProps(nextProps){}            // 组件将要从父组件获得props
    shouldComponentUpdate(nextProps, nextState){}     // 是否确认重新渲染组件
    render() {}               // 重新渲染组件
    UNSAFE_componentWillUpdate(){}   // 组件将要更新
    componentDidUpdate(){}    // 组价被更新
     
    componentWillUnmount(){}  // 组件将要卸载
     

     

    一、Ract生命周期

    React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁

    • 初始化

    1、getDefaultProps()

    设置默认的props,也可以用dufaultProps设置组件的默认属性.

    2、getInitialState()

    在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.props

    3、componentWillMount()

    组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。

    4、 render()

    react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。

    5、componentDidMount()

    组件渲染之后调用,只调用一次。

    • 更新

    6、componentWillReceiveProps(nextProps)

    组件初始化时不调用,组件接受新的props时调用。

    7、shouldComponentUpdate(nextProps, nextState)

    react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候

    8、componentWillUpdata(nextProps, nextState)

    组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state

    9、render()

    组件渲染

    10、componentDidUpdate()

    组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。

    • 卸载

    11、componentWillUnmount()

    组件将要卸载时调用,一些事件监听和定时器需要在此时清除。

     

    二、React生命周期执行顺序详解

    一、组件生命周期的执行次数是什么样子的???

    只执行一次: constructorcomponentWillMountcomponentDidMount
    
    执行多次:render 、子组件的componentWillReceivePropscomponentWillUpdatecomponentDidUpdate
    
    有条件的执行:componentWillUnmount(页面离开,组件销毁时)
    
    不执行的:根组件(ReactDOM.renderDOM上的组件)的componentWillReceiveProps(因为压根没有父组件给传递props

    二、组件的生命周期执行顺序是什么样子的???

      假设组件嵌套关系是 App里有parent组件,parent组件有child组件。

    如果不涉及到setState更新,第一次渲染的顺序如下: 

    App:   constructor --> componentWillMount -->  render --> 
    parent: constructor --> componentWillMount -->  render --> 
    child:    constructor --> componentWillMount -->  render  --> 
    componentDidMount (child) -->  componentDidMount (parent) --> componentDidMount (App)
    

    这时候触发App的setState事件

    App:   componentWillUpdate --> render --> 
    parent: componentWillReceiveProps --> componentWillUpdate --> render --> 
    child:    componentWillReceiveProps --> componentWillUpdate --> render -->
    componentDidUpdate (child) -->  componentDidUpdate (parent) --> componentDidUpdate (App)

    那如果是触发parent的setState呢?

    parent: componentWillUpdate --> render --> 
    child:     componentWillReceiveProps --> componentWillUpdate --> render --> 
    componentDidUpdate (child) -->  componentDidUpdate (parent) 

    那如果是只是触发了child组件自身的setState呢?

    child: componentWillUpdate --> render -->  componentDidUpdate (child)

    结论:

    1. 如图:完成前的顺序是从根部到子部,完成时时从子部到根部。(类似于事件机制)

    2. 每个组件的红线(包括初次和更新)生命周期时一股脑执行完毕以后再执行低一级别的红线生命周期。

    1. 第一级别的组件setState是不能触发其父组件的生命周期更新函数,只能触发更低一级别的生命周期更新函数。

    总结起来就如下图:


    提问:
    那么这里提一个问题,如果App里面有多个parent1 parent2 ...,parent里由多个child,那么生命周期执行顺序应该时什么样的????

    结论:
    一套组件(父包括子,子包括孙)执行的时候一个整体,执行完毕在执行下一套,用到这里就是App里先执行parent1和parent1的子,子的子。。。,然后完毕再执行parent2这一套。

    三、什么时候该用componentWillReceiveProps?

    是否每个子组件都需要componentWillReceiveProps生命周期函数来更新数据吗? 你的原则是??

    A、开始前首先需要知道componentWillReceiveProps函数有一个参数nextProps,它是一个 { 对象 } ,从单词就可以看出它是update时候(也就是下一次)父组件传递过来的props。
    
    B、还要知道 "第一条中" 所讲解的有些生命周期函数只执行一次,而有的执行多次,其中componentWillReceiveProps执行多次,而constructor等执行一次。
    
    C、还需知道在子组件中每次传递过来的this.props对象其实和componentWillReceiveProps的nextProps是一样的,都是最新的。
    
    D、由"第一条"得知: componentWillReceiveProps生命周期是在更新子组件最先执行的,优先于compoentWillUpdate,更优先于render。
    
    E、render函数里不能使用setState(),否则会造成死循环。
    

    那么知道了以上呢?

    由C得知, this.props 和 componentWillReceiveProps的nextProps都是一样的,通过this.props就可以取到最新的值, 那么componentWillReceiveProps还有必要吗?

    所以:大部分情况下 componentWillReceiveProps 生命周期函数是没用的,即可以略去不写,因为它确实没什么用。

    但是情况1:

    由D得知,componentWillReceiveProps是最先执行的,所以在其内可以setState({}),在接下来的render中能拿到最新的state后值,再加上B得知,

    如果是下面这种情况: 在constructor函数中初始化了某个state,必须用 componentWillReceiveProps 来更新state,以便render中为新的state值。


    情况2:

      如果父组件有一些请求,每次参数更新的时候才发请求,同时和子组件的关系比较密切,

    可以将数据请求放在componentWillReceiveProps进行执行,需要传的参数则从(nextProps)中获取。

    而不必将所有的请求都放在父组件中,于是该请求只会在该组件渲染时才会发出,从而减轻请求负担。

    情况3:

      watch监听props值变化,对子组件进行处理,比如:当传入的props.value发生变化,执行一些动作。

      如果你接触过vue,会知道vue中有一个关于watch的选项,是根据setter获取新旧值,进行动作的执行

      而react中最合适做watch的时机是在componentWillReceiveProps中

    componentWillReceiveProps(nextProps) {
            // this.props中的值是旧值
            // nextProps中的值是新值
        const { value: oldValue } = this.props;
        const { value: newValue } = nextProps;
        if (newValue !== oldValue) {
                // TODO...
        }
    }

    结论:

    1. 大部分情况下 componentWillReceiveProps 生命周期函数是没用的,即可以略去不写,

    2. 但是在constructor函数中初始化了某个state,必须用 componentWillReceiveProps 来更新state,不可省去,否则render中的state将得不到更新。
      同时如果您想在子组件监听watch值变化做处理,也可以用到componentWillReceiveProps

    3. 使用componentWillReceiveProps的时候,不要去向上分发,调用父组件的相关setState方法,否则会成为死循环。

    附:React生命周期官方解析

    componentWillMount 在渲染前调用,在客户端也在服务端。
    
    componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
    
    componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    
    shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
    可以在你确认不需要更新组件时使用。
    
    componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    
    componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
    
    componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

    分类: React

     

     

     

     

     

     

     

     

     

    参考博客:

    React组件生命周期小结:https://blog.csdn.net/hahahhahahahha123456/article/details/80270353

    React组件生命周期流程与调用顺序及setState在生命周期中的使用注意事项:https://blog.csdn.net/Gunahao/article/details/82695555

    React生命周期执行顺序详解

    https://www.cnblogs.com/soyxiaobi/p/9559117.html

     


     

    展开全文
  • 父子组件之间的生命周期函数的调用顺序 挂载阶段,只有当执行到render的时候,父组件的constructor才开始执行,知道子组件挂载完成(componentDidMount),父组件才算挂载完成 更新阶段,类似挂载阶段,只有父...

    项目地址:github.com/wangxiaofei…

    测试

    首次渲染

    father constructor
    father getDerivedStateFromProps
    father render
    children constructor
    children getDerivedStateFromProps
    children render
    children componentDidMount
    father componentDidMount
    复制代码

    父组件数据修改触发重渲染

    father getDerivedStateFromProps
    father shouldComponentUpdate
    father render
    children getDerivedStateFromProps
    children shouldComponentUpdate
    children render
    children getSnapshotBeforeUpdate
    father getSnapshotBeforeUpdate
    children componentDidUpdate, snapshot: 1
    father componentDidUpdate, snapshot: 1
    复制代码

    父组件调用forceUpdate

    father getDerivedStateFromProps
    father render
    children getDerivedStateFromProps
    children shouldComponentUpdate
    children render
    children getSnapshotBeforeUpdate
    father getSnapshotBeforeUpdate
    children componentDidUpdate, snapshot: 1
    father componentDidUpdate, snapshot: 1
    复制代码

    销毁

    father componentWillUnmount
    children componentWillUnmount
    复制代码

    总结

    旧生命周期在各个阶段的调用情况

    1. 挂载
      • constructor
      • componentWillMount
      • render
      • componentDidMount
    2. 更新
      • componentWillReceiveProps
      • shouldComponentUpdate
      • componentWillUpdate
      • render
      • componentDidUpdate
    3. 卸载
      • componentWillUnmount

    新生命周期在各个阶段的调用情况

    1. 挂载
      • constructor
      • getDerivedStateFromProps
      • render
      • componentDidMount
    2. 更新
      • getDerivedStateFromProps
      • shouldComponentUpdate
      • render
      • getSnapshotBeforeUpdate
      • componentDidUpdate
    3. 卸载
      • componentWillUnmount

    父子组件之间的生命周期函数的调用顺序

    • 挂载阶段,只有当执行到render的时候,父组件的constructor才开始执行,知道子组件挂载完成(componentDidMount),父组件才算挂载完成
    • 更新阶段,类似挂载阶段,只有父组件执行到render,才开始子组件的getDerivedStateFromProps -> shouldComponentUpdate -> render,但再父组件的getSnapshotBeforeUpdate是紧随在子组件的getSnapshotBeforeUpdate后,然后子组件在componentDidUpdate

    父组件调用forceUpdate

    组件调用forceUpdate方法后,不会执行shouldComponentUpdate,会执行getDerivedStateFromProps,然后再render,后面的生命周期和更新一致

    转载于:https://juejin.im/post/5b8e6ef051882542aa1b4f3a

    展开全文
  • 按照react官方的说法,带有很多组件的应用...生命周期函数有相应的执行顺序 init and mount 1. constructor(props) 2. componentWillMount() 3. componentDidMount() undate of props 1. componentWillReceiveProps...

    按照react官方的说法,带有很多组件的应用在销毁时,释放该组件所占用的资源是非常重要的,生命周期函数应运而生。生命周期函数有相应的执行顺序

    init and mount

    1. constructor(props)
    2. componentWillMount()
    3. componentDidMount()
    

    undate of props

    1. componentWillReceiveProps(newProps)
    

    与state变化时唯一的不同之处

    2. shouldComponentUpdate(newProps,newState)
    

    返回bool类型,当为true时,react组件才会更新,继续向下执行update相关的生命周期函数,父子组件套用时,若不需要更新子组件则可以用此函数返回false

    3. componentWillUpdate(nextProps,nextState)
    
    4. render()
    
    5. componentDidUpdate(prevProps, prevState) 
    

    update of state

    1. shouldComponentUpdate(newProps,newState)
    

    返回bool类型,当为true时,react组件才会更新,继续向下执行update相关的生命周期函数

    2. componentWillUpdate(nextProps,nextState)
    
    3. render()
    
    4. componentDidUpdate(prevProps, prevState)
    

    unmount

    componetWillUnmount
    

    组件将要从页面中剔除的时候自动执行

    展开全文
  • (1) componentWillMount() 仅在render()方法前被调用一次,如果...本文主要是图文结合地介绍了react生命周期执行顺序,同时附上了一个实例,可以清楚地看到父组件、子组件的调用顺序。如存在问题,欢迎指正~~~

    在这里插入图片描述

    (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setState方法去改变组件的状态值,那么调用render()后,将会直接看到改变过了的状态值,并且不论状态值怎么改变,componentWillMount()都不会再被调用。

    (2) componentDidMount() 仅在render()方法后被立即调用一次(客户端),相对于父组件而言,该方法在子组件中会先被调用。如果需要使用一些JaveScript框架或者类似于setInterval()这样的方法,建议在该方法内使用。

    (3) ShouldComponentUpdate(object nextProps, object nextState) 在初始渲染调用render()方法时不会被调用,后面在接受到新的state或者props时,在render()方法前被调用。为防止一些潜在的bug,该方法默认总是返回true。如果你确定state及props改变后不需要渲染组件,那么也可以指定返回false,需要注意的是,这样的结果会导致后面的render()、componentWillUpdate()、componentDidUpdate()都不会被调用。

    一般的,我们可以通过该函数来优化性能:

    一个React项目需要更新一个小组件时,很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法,形成新的虚拟DOM,再用diff算法对新旧虚拟DOM进行结构和属性的比较,决定组件是否需要重新渲染

    无疑这样的操作会造成很多的性能浪费,所以我们开发者可以根据项目的业务逻辑,在shouldComponentUpdate()中加入条件判断,从而优化性能

    例如React中的就提供了一个PureComponent的类,当我们的组件继承于它时,组件更新时就会默认先比较新旧属性和状态,从而决定组件是否更新。值得注意的是,PureComponent进行的是浅比较,所以组件状态或属性改变时,都需要返回一个新的对象或数组

    (4) componentWillReceiveProps(object nextProps) 在初始渲染调用render()方法时不会被调用,当接收到一个新的props时,该方法被调用。我们都知道,如果改变一个状态的值,则会触发render()方法,所以可以在这个方法里调用setState()方法去改变一个状态的值,当该方法接收到新的props时,setState()就可以避免一次额外的render()了。 在这个方法里,尤其需要注意一点,就是接收到新的props一定会触发render()方法,但是render()方法被触发不一定是因为接收到了新的props

    (5) componentWillUpdate(object nextProps, object nextState) 在初始渲染调用render()方法时不会被调用,当接收到新的props及state时,在render()方法之前被调用。

    不要在此方法再去更新props 或者 state

    (6) componentDidUpdate(object prevProps, object prevState) 在初始渲染调用render()方法时不会被调用,当组件更新被刷新到DOM之后被立即调用。

    可以在这里访问,并修改 DOM

    (7) componentWillUnmount() 在组件从DOM上卸载前被调用,在这个方法里面,我们主要是完成一些清除操作,比如说清除掉一些过时了的定时器等。

    2.执行顺序及次数
    (1) getDefaultProps(),调用1次

    (2) getInitialState(),调用1次

    (3) componentWillMount(),调用1次

    (4) render(),调用>=1次

    (5) componentDidMount():仅客户端,调用1次

    (6) componentWillReceiveProps(object nextProps),调用>=0次

    (7) ShouldComponentUpdate(object nextProps, object nextState),调用>=0次

    (8) componentWillUpdate(object nextProps, object nextState),调用>=0次

    (9) render(),调用>=1次

    (10) componentDidUpdate(object prevProps, object prevState),调用>=0次

    (11) componentWillUnmount(),调用1次

    3.实例
    我写了一个小demo可直接在浏览器里运行,大家可以通过控制台查看父组件、子组件中的各生命周期调用的顺序:

    <!DOCTYPE html>
    
    <html>
    
        <head>
    
            <script src="https://fb.me/react-15.2.0.js"></script>
    
            <script src="https://fb.me/react-dom-15.2.0.js"></script>
    
            <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    
        </head>
    
    <body>
    
        <div id="app-container"></div>
    
        <script type="text/babel">
            var SubCounter = React.createClass({
                componentWillReceiveProps:function() {
                    console.log('9、子组件将要接收到新属性');
                },
    
                shouldComponentUpdate:function(newProps, newState) {
                    console.log('10、子组件是否需要更新');
                    if (newProps.number < 5) return true;
                    return false
                },
    
                componentWillUpdate:function() {
                    console.log('11、子组件将要更新');
                },
    
                componentDidUpdate:function() {
                    console.log('13、子组件更新完成');
                },
    
                componentWillUnmount:function() {
                    console.log('14、子组件将卸载');
                },
    
                render:function() {
                    console.log('12、子组件挂载中');
                    return (
                            <p>{this.props.number}</p>
                    )
                }
            });
    
            var Counter = React.createClass({
               
                getInitialState:function(){
                    return(
                        this.state={
                            number:0
                        }
                    )
                },
    
                componentWillMount:function(){
                    console.log('3、父组件挂载之前');
                },
    
                componentDidMount:function(){
                    console.log('5、父组件挂载完成');
                },
    
                shouldComponentUpdate:function(newProps, newState) {
                    console.log('6、父组件是否需要更新');
                    if (newState.number<15) return true;
                    return false
                },
    
                componentWillUpdate:function() {
                    console.log('7、父组件将要更新');
                },
    
                componentDidUpdate:function() {
                    console.log('8、父组件更新完成');
                },
    
                handleClick : function(){
                    this.setState({
                        number: this.state.number + 1
                    })
                },
                render:function() {
                    console.log('4、render(父组件挂载)');
                    return (
                        <div>
                            <p>{this.state.number}</p>
                            <button onClick={this.handleClick}>+</button>
                            {this.state.number<10?<SubCounter number={this.state.number}/>:null}
                        </div>
                    )
                }
            });        
    
            ReactDOM.render(<Counter />, document.getElementById('app-container'));
    
        </script>
    
    </body>
    
    </html>
    

    在这里插入图片描述

    4.小结
    本文主要是图文结合地介绍了react的生命周期及执行顺序,同时附上了一个实例,可以清楚地看到父组件、子组件的调用顺序。如存在问题,欢迎指正~~~

    展开全文
  • React 生命周期方法执行顺序

    千次阅读 2018-08-23 14:10:35
    调用super的原因:在ES6中,在子类的constructor中...对于一个包含着生命周期的组件,有以下可选的生命周期方法: componentWillMount()  仅在render()方法前被调用一次,如果在该方法中调用了setState方法去...
  • React生命周期以及执行顺序

    千次阅读 2019-04-15 10:34:13
    Mounting中为组件的挂载过程 componentWillMount组件挂载之前 render组件的渲染方法 componentDidMount组件挂载完成执行 Updation中为组件数据发生变化的过程 props独有 componentW...
  • 转载:https://www.cnblogs.com/soyxiaobi/p/9559117.html 转载于:https://www.cnblogs.com/dglblog/p/10565543.html
  • 一、React15组件生命周期 1、实例化 (1)实例首次被创建,即第一次调用<element attr="" /> A、getDefaultProps B、getInitialState C、componentWillMount D、render E、componentDidMount (2)实例再次被...
  • 组件发生嵌套时,生命周期的钩子函数是如何执行的 父组件创建阶段的生命周期钩子函数 constructor 父组件创建阶段的生命周期钩子函数 render 子组件创建阶段的生命周期钩子函数 constructor 子组件创建阶段的生命...
  • Parent constructor Parent componentWillMount Parent render Child constructor Child componentWillMount Child render Child componentDidMount Parent componentDidMount
  • React子父组件生命周期函数执行顺序react生命周期函数不做太多描述也就是父组件在内存中生成页面树的时候先去制作子组件,等到子组件挂在到父组件某个节点时在继续内存渲染父组件知道父组件didmount.多个子组件的情况...
  • React 生命周期

    2019-04-16 23:06:45
    生命周期函数指在某一时刻组件会自动调用执行的函数 学习React生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 组件初始...
  • React组件的生命周期执行顺序

    万次阅读 2016-09-07 17:18:22
    本文全面介绍了React组件的生命周期执行顺序
  • react生命周期

    2020-11-24 09:15:15
    react生命周期 react生命周期三个阶段 挂载阶段 更新阶段 卸载阶段 一、挂载阶段 1、constructor 初始化数据: 它接收两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,236
精华内容 2,494
关键字:

react生命周期执行顺序