react组件的生命周期

时间：2016-12-17 19:43:43 阅读：238 评论：0 收藏：0 [点我收藏+]

标签：initial 自己写在前面通过 efault 合并定义 click image

写在前面：阅读了多遍文章之后，自己总结了一个。一遍加强记忆，和日后回顾。

技术分享

一、实例化（初始化）

var Button = React.createClass({
    getInitialState: function() {
        return {    data: 0    };
    },
    setNewNumber: function() {
        this.setState({    data: this.state.data + 1    })
    },
    render: function() {
        var show = (this.state.data % 2 === 0);
        return (
            <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            { show && <Content myNumber = {this.state.data}></Content> }
      </div>
        );
    }
});
var Content = React.createClass({
    getDefaultProps: function() {
        console.log(‘getDefaultProps‘);
        return { name: ‘gdq‘};
    },
    getInitialState: function() {
        console.log(‘getInitialState‘);
        return { time: 22 };
    },
    componentWillMount: function() {
        console.log(‘componentWillMount‘)
    },
    componentDidMount: function() {
        console.log(‘componentDidMount‘)
    },
    render: function() {
        return (
            <div>
          <h3>{this.props.myNumber}</h3>
        </div>
        );
    }
});
ReactDOM.render(
    <div>
      <Button />
   </div>,
    document.getElementById(‘example2‘)
);

运行结果：

技术分享

创建阶段：getDefaultProps()

　　　　该阶段主要发生在定义组件类的时候，即调用React.createClass的时候。这个阶段getDefaultProps() 会被调用一次，并缓存起来——在多个类实例之间共享。在组件的任何实例被创建之前，我们（的代码逻辑）不能依赖这里的this.props。这个方法只负责返回一个对象，然后与合并父组件的相应属性挂载到this.props中。

　　2.初始化阶段：(每个组件被使用的时候都会有,包括Unmount后重新Mount的组件，如上面的<Conent />)

　　　　getInitialState() ：该方法在组件的一个生命周期中（从初始化挂载到销毁为一个），只会执行一次；负责返回一个对象，成为this.state的初始值

　　　　componentWillMount() ：在新实例挂载到DOM，我们的业务逻辑可以写在这个阶段，例如修改 this.state，启动个计时器什么的。

　　　　render() ：返回组件的虚拟DOM，等待reactDOM.render()把该组件渲染都真实的DOM中，

　　　　　　　使用规则

　　　　　　　　　a:只能访问this.porps, this.state,而不能修该

　　　　　　　　　b:不能操作DOM

　　　　　　　　　c:只能有一个顶级元素

　　　　　　　　　d:可以返回null, false, 任何组件

　　　　componentDidMount() ：组件成功渲染到真实DOM后开始执行，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。（在服务端渲染中，该方法不会被调用)。例如：发送ajax请求。

二、存在期（组件已经挂载到真实DOM中，主要就是更新操作）

var Button = React.createClass({
    getInitialState: function() {
        return {    data: 0    };
    },
    setNewNumber: function() {
        this.setState({    data: this.state.data + 1    })
    },
    render: function() {
        return (
            <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
      </div>
        );
    }
});
var Content = React.createClass({
    componentWillReceiveProps: function(newProps) {
        console.log(‘componentWillReceiveProps‘)
    },
    shouldComponentUpdate: function(newProps, newState) {
        console.log(‘shouldComponentUpdate‘);
        return true;
    },
    componentWillUpdate: function(nextProps, nextState) {
        console.log(‘componentWillUpdate‘);
    },
    componentDidUpdate: function(prevProps, prevState) {
        console.log(‘componentDidUpdate‘)
    },
    render: function() {
        return (
            <div>
          <h3>{this.props.myNumber}</h3>
        </div>
        );
    }
});
ReactDOM.render(
    <div>
      <Button />
   </div>,
    document.getElementById(‘example2‘)
);