首页 > 代码库 > React入门--------组件的声明周期

React入门--------组件的声明周期

2024-08-28 03:32:27   223人阅读

  • Mounting/组件挂载相关:

componentWillMount

componentDidMount

  • Updating/组件更新相关:

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

  • Unmounting/组件移除相关:

componentWillUnmount

一、Mounting/组件挂载相关

componentWillMount

在组件挂载之前执行，但仅执行一次，即使多次重复渲染改组件，或者改变了组件的state。若希望该回到能执行多次，可以使用ReactDOM.unmountComponentAtNode移除掉已有的组件，然后再重新render。

    var diva = document.getElementById(‘a‘);
    var divb = document.getElementById(‘b‘);
    var i=0;
    var Component1 = React.createClass({
        componentWillMount:function(){
            console.log(++i)
        },
        render: function() {
            console.log(Date.now());
            return <div name={this.props.name}>我只是一个安静的div</div>
        }
    });
    
　　//触发componentWillMount,render
    ReactDOM.render(   
            <Component1 />, diva
    );
　　
　　//未触发componentWillMount,触发render
    ReactDOM.render(   
            <Component1 />, diva
    );
    
　　//触发componentWillMount,render
    ReactDOM.render(  
            <Component1 />, divb
    );
　　//未触发componentWillMount,未触发render
   ReactDOM.render(  
            <Component1 />, divb
    );

componentDidMount

在组件挂载之后执行，同componentWillMount一样，同一个组件重复渲染只执行一次，卸载组件后重新渲染可以重新触发一次。

二、Updating/组件更新相关

componentWillReceiveProps

在组件接收到props的时间点之前调用，注意组件初始化渲染时不会调用。

    var i = 0;
    var div = document.getElementById(‘a‘),
    var div2 = document.getElementById(‘b‘);

    var Component1 = React.createClass({
        componentWillReceiveProps: function(){
            console.log(i++)
        },
        clickCb: function() {
            React.render(
                <Component1 />, div2
            );
        },
        render: function() {
            return <div onClick={this.clickCb}>点我给下一个div挂载组件</div>
        }
    });

    React.render(
        <Component1 />, div  //初始化不会触发componentWillReceiveProps
    );
    React.render(
            <Component1 />, div   //重复渲染会触发componentWillReceiveProps
    );
    React.unmountComponentAtNode(div);  //移除掉已有组件
    React.render(
        <Component1 />, div  //初始化不会触发componentWillReceiveProps
    );

运行结果如下：

技术分享

该接口带有一个参数nextProps，可以利用它来获取新的props的值(this.props获取到的是当前的，也就是旧的props)

  var i = 0;
  var div = document.getElementById(‘a‘);
  var render = function(){
            React.render(
                    <Component1 i={i++} />, div
            );
        };

    var Component1 = React.createClass({
        componentWillReceiveProps: function(nextProps){
            console.log(this.props.i, nextProps.i)
        },
        render: function() {
            return <div onClick={render}>props.i的值是：{this.props.i}</div>
        }
    });
    render();

运行结果如下

技术分享

shouldComponentUpdate

该接口实际是在组件接收到了新的props或者新的state的时候会立即调用，然后通过返回值来决定是否要重新渲染当前的组件。

接口带两个参数，第一个参数表示新的props，第二个参数表示新的state。

  var div = document.getElementById(‘a‘);

  var Component1 = React.createClass({
        getInitialState: function(){
            return { i : 0 }
        },
        shouldComponentUpdate: function(nextProps, nextState){
            console.log( this.state.i, nextState.i );
            return nextState.i > 3 ? true : false; //返回true才会渲染组件
        },
        clickCb: function(){
            this.setState({
                i : this.state.i + 1
            })
        },
        render: function() {
            return <div onClick={this.clickCb}>state.i的值是：{this.state.i}</div>
        }
    });
    ReactDOM.render(
            <Component1 />, div
    );

点击第四次之后才会渲染组件，在div里显示正确的新state.i

 技术分享

componentWillUpdate

同shouldComponentUpdate一样，在组件收到新的props或者state的时候会调用，而且也有着两个参数来获取新的props和state。

不过本接口仅在shouldComponentUpdate执行并返回了true的时候才会被调用。

在上一个代码实例中做点改动

 componentWillUpdate: function(nextProps, nextState){
            console.log( ‘yoyoyo‘, this.state.i, nextState.i );
        },

技术分享

componentDidUpdate

在组件更新，重新渲染完毕之后调用，它和componentWillUpdate一样有着两个参数来获取新的props和state

 var div = document.getElementById(‘a‘);

    var Component1 = React.createClass({
        getInitialState: function(){
            return { i : 0 }
        },
        shouldComponentUpdate: function(nextProps, nextState){
            console.log( this.state.i, nextState.i );
            return nextState.i > 3 ? true : false; //返回true才会执行componentWillUpdate并重新渲染组件
        },
        componentDidUpdate: function(nextProps, nextState){
            console.log( ‘已经渲染完毕咯‘, this.state.i, nextState.i );
        },
        componentWillUpdate: function(nextProps, nextState){
            console.log( ‘还没渲染哦‘, this.state.i, nextState.i );
        },
        clickCb: function(){
            this.setState({
                i : this.state.i + 1
            })
        },
        render: function() {
            return <div onClick={this.clickCb}>state.i的值是：{this.state.i}</div>
        }
    });
    ReactDOM.render(
            <Component1 />, div
    );

运行结果如下：

技术分享

三、Unmounting/组件移除相关：

明天继续

React入门--------组件的声明周期


联系
我们