登录  /  注册
首页 > web前端 > js教程 > 正文

React中生命周期使用详解

php中世界最好的语言
发布: 2018-05-24 14:21:05
原创
1584人浏览过

这次给大家带来React中生命周期使用详解,React中生命周期使用的注意事项有哪些,下面就是实战案例,一起来看一下。

生命周期

React 是一个由虚拟 DOM 渲染成真实 DOM 的过程,这个过程称为组件的生命周期。React 把这个周期划分为三个阶段,每个阶段都提供了 will 和 did 两种处理方式,will 是指发生前,did 是指发生后。

  • Mounting:组件渲染过程

    • componentWillMount()

    • componentDidMount()

  • Updating:组件更新过程

    • componentWillReceiveProps(nextProps)

    • shouldComponentUpdate(nextProps, nextState)

    • componentWillUpdate(object nextProps, object nextState)

    • componentDidUpdate(object prevProps, object prevState)

  • Unmounting:组件移除过程

    • componentWillUnmount()

    • 这个阶段没有对应的 did 方法

Mounting

指首次渲染或者组件从 DOM 中移除后再次重新渲染,后者场景不会执行 getDefaultProps

执行顺序

  1. getDefaultProps

  2. getInitialState

  3. componentWillMount

  4. render

  5. componentDidMount

componentWillMount

该方法在 render 之前被调用,也就是说在这个方法当中无法获取到真实的 DOM 元素。
首次渲染前和当 state 发生改变时再次渲染前触发该方法。

componentDidMount

该方法是在 render 之后被调用,也就是这个方法可以直接获取到真实的 DOM 元素。
首次渲染后和当 state 发生改变再次渲染后触发该方法。

var MountingComponent = React.createClass({
    componentWillMount: function(){
        console.log(this.refs.h1) // undefined
    },
    componentDidMount: function(){
        console.log(this.refs.h1) // h1 对象
    },
    render: function(){
        return <h1>Lifecycle-Mounting</h1>;
    }                
})
ReactDOM.render(<mountingcomponent></mountingcomponent>, document.getElementById('p1'));
登录后复制

Updating

当改变组件的 props 或 state 时候会触发

执行顺序

  1. componentWillReceiveProps

  2. shouldComponentUpdate

  3. componentWillUpdate

  4. render

  5. componentDidUpdate

componentWillReceiveProps

在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
方法接受一个参数
newProps: 为更新后的 props
注:props 不能手动改变,正常场景是当前组件被当子组件调用,然后在父组件中改变该组件的 props

shouldComponentUpdate

组件挂载之后,每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true,需要重新render。在比较复杂的应用里,有一些数据的改变并不影响界面展示,可以在这里做判断,优化渲染效率。
方法接受两个参数
newProps:已更新的 props
newState:已更新的 state
方法必须要返回 boolen,返回 true 则执行后面的 componentWillUpdate、render、componentDidUpdate。反之则不执行。

componentWillUpdate

在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
方法接受两个参数
nextProps:将要更新的 props
nextState:将要更新的 state

componentDidUpdate

在组件完成更新后立即调用。在初始化时不会被调用。
方法接受两个参数
prevProps:更新前的 props
nextState:更新前的 state

var UpdatingComponent = React.createClass({
    getInitialState: function() {
        return {
            data:0
        };
    },           
    setNewNumber: function() {
        //当 state 发生改变的时候,state 对应的组件会重新挂载
        //会触发 componentWillUpdate、componentDidUpdate
        this.setState({data: this.state.data + 1})
    },
    //参数 newProps:已更新的 props
    componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECEIVE PROPS!', newProps)
    },        
    //参数 newProps:已更新的 props
    //参数 newState:已更新的 state  
    //必须要返回 boolen,true 则执行componentWillUpdate、render、componentDidUpdate。反之则不执行。
    shouldComponentUpdate: function(newProps, newState){
        console.log('shouldComponentUpdate',newProps, newState);
        return (newState.data &gt; 0 &amp;&amp; newState.data % 2 == 0);
    },                          
    //参数 nextProps:将要更新的 props
    //参数 nextState:将要更新的 state
    componentWillUpdate: function(nextProps, nextState){
        console.log(nextProps, nextState, this.refs.p1)
    },
    //参数 prevProps:更新前的 props
    //参数 nextState:更新前的 state                
    componentDidUpdate: function(prevProps, prevState){
        console.log(prevProps, prevState) 
    },
    render: function(){
        return (
            <p>
                <button>INCREMENT</button>
                </p><h3>{this.state.data}</h3>
            
        );
    }                
})
ReactDOM.render(<updatingcomponent></updatingcomponent>, document.getElementById('p2'));
登录后复制

Unmounting

在组件从 DOM 中移除的时候立刻被调用,这个阶段没有对应的 did 方法

componentWillUnmount

方法适用在父子组件的结构中,当某个条件符合的场景下,该子组件会被渲染

重新渲染的执行顺序

  1. getInitialState

  2. componentWillMount

  3. render

  4. componentDidMount

var ChildrenComponent = React.createClass({
    componentWillUnmount: function(){
        console.log('componentWillUnmount');
    },
    render: function(){
        return <h3>{this.props.myNumber}</h3>
    }
})
var UnmountingComponent = React.createClass({
    getInitialState: function() {
        return {
            data:0
        };
    },
    setNewNumber: function() {
        this.setState({data: this.state.data + 1})
    },
    render: function () {
        var content;
        //当条件不符合时 ChildrenComponent 会被移除,然后会触发方组件的 componentWillUnmount 方法
        //当条件重新符合时,会重新渲染组件 ChildrenComponent
        if(this.state.data % 2 == 0){
            content = <childrencomponent></childrencomponent>;
        } else {
            content = <h3>{this.state.data}</h3>;
        }
        return (
            <p>
                <button>INCREMENT</button>
                {content}
            </p>
        );
    }
})
ReactDOM.render(<unmountingcomponent></unmountingcomponent>, document.getElementById('p3'));
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

react实现选中li高亮步骤详解

PromiseA+的实现步骤详解


以上就是React中生命周期使用详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号