React js组件的生命周期

组件的生命周期分为初始化阶段,运行中阶段,销毁阶段.不同阶段可以触发不同的函数运行.

初始化阶段函数:

    getDefaultProps: 每个组件只调用一次
    getInitialState: 每个实例初始化时调用
    componentWillMount: render之前运行
    render
    componentDidMount: render之后,并且整个组件渲染完之后才会触发

 
 例: 实例化两个组件,测试每个函数运行的时间

<script type="text/babel">
    var count = 0;
    var InitialTest = React.createClass( {
        getDefaultProps: function () {
            console.log("getDefaultProps");
        },
        getInitialState: function () {
            console.log("getInitialState");
            return null;
        },
        componentWillMount: function () {
            console.log("componentWillMount");
        },
        render: function () {
            console.log("render");
            return (
                    <div>Hello I am Render</div>
            );
        },
        componentDidMount: function () {
            console.log("componentDidMount" + count++);
        }
    });
    ReactDOM.render(
            <div>
                <InitialTest />
                <InitialTest />
            </div>,
            document.getElementById("content")
    );
</script>

  测试结果为:

getDefaultProps     //第一个运行,并且不管实例化几个对象,都只运行这一次
getInitialState     //每实例化一次,就运行一次,常用来初始化数据
componentWillMount    // 每实例化一次,就运行一次
render        // 每实例化一次,就运行一次
getInitialState
componentWillMount
render
componentDidMount      //  每实例化一次,运行一次,并且是等该组件渲染完之后才运行
componentDidMount  

  


运行中阶段函数:

    componentWillReceiveProps  由父组件传入的属性发生变化时运行
    shouldComponentUpdate   返回false时,render不会调用
    componentWillUpdate   发生改变会运行,不能修改属性和状态
    render   
    componentDidUpdate  可以用来修改DOM

  
例: 测试每个函数运行时间,建立两个控件,HelloWorld组件实现文本Hello, XXX, 设置XXX为属性name,当name为空,
返回World,否则返回XXX. InputHello是HelloWorld的父组件,设置一个InputHello的状态
input传入HelloWorld的name属性,InputHello除了实现HelloWorld功能外,实现一个 input框
,当input改变时,input改变,从而HelloWorld的属性name跟着改变.

<script type="text/babel">
    var HelloWorld = React.createClass({
        componentWillReceiveProps: function (newObj) {
            console.log("componentWillReceiveProps");
        },
        shouldComponentUpdate: function () {
            console.log("shouldComponentUpdate");
            return true;
        },
        componentWillUpdate: function () {
            console.log("componentWillUpdate");
        },
        render: function () {
            console.log("render");
            return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
        },
        componentDidUpdate: function() {
            console.log("componentDidUpdate");
            ($(ReactDOM.findDOMNode(this)).append("--Append--"))
        }
    });
    var InputHello = React.createClass({
        getInitialState: function () {
            return {input: ''};
        },
        handleChange: function (event) {
            this.setState({name: event.target.value});
        },
        render: function () {
            return <div>
                <HelloWorld name={this.state.input}></HelloWorld>
                <br/>
                <input type="text" onChange={this.handleChange} />
            </div>
        }
    });
    ReactDOM.render(
            <div>
                <InputHello />
            </div>,
            document.getElementById("content")
    );
</script>

  从input框中输入文本,控制台输出结果顺序为:

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate