react组件生命周期

无状态组件中没有这些生命周期方法

挂载

• 初始化props，通过类的静态属性defaultProps或者getDefaultProps函数，初始化的props会与父组件指定的props合并，最后赋值给this.props
• constructor()，或者getInitialState
• componentWillMount()，此时dom还没渲染，在这里执行的setState不会导致重绘，执行无效果
• render()
• componentDidMount()，在这里执行的setState会导致重绘（或称为二次渲染）

被动更新流程（父组件调用setState）

• componentWillReceiveProps()，这时子组件的props仍然是旧的，可以在这里把新的props通过setState设置进state中，不会触发二次渲染
• shouldComponentUpdate()，这里读取到的state是以上更新后的state
• componentWillUpdate()，不能在这里执行setState，执行了无效果
• render()
• componentDidUpdate()，可以在这里进行异步的setState

主动更新流程（当前组件调用setState）

执行的函数相比上面的被动更新流程，少了一个componentWillReceiveProps方法，其余的都一样。

卸载

• componentWillUnmount()，用于清除定时器、事件绑定

　　React 官方不建议在 componentWillMount() 修改 state ，通常建议在 componentDidMount(), 如果需要设置 state 的初始状态，可以在 (es6:)constractor() 或者 (es5:)getInitialState() 中设置。

　　setState是一个异步操作，修改的state必能通过this.state.xxx来马上读取，但可以在setState的第二个参数（回调函数）中读取更新后的值。执行这个函数的时候，新状态会被存放进队列中，稍后才进行状态合并，接着触发shouldComponentUpdate和render，所以连续多次的setState不会影响效率，只会触发一次render

父子组件的生命周期

import React from 'react';
import ReactDOM from 'react-dom';

const buildClass = (name)=>{
    return class extends React.Component{
        constructor(props) {
            super(props);
            console.log( name + ' constructor');
        }
        componentWillMount() {
            console.log( name + ' componentWillMount');
        }
        componentDidMount() {
            console.log( name + ' componentDidMount');
        }
        componentWillUnmount() {
            console.log( name + ' componentWillUnmount');
        }
        componentWillReceiveProps(nextProps) {
            console.log( name + ' componentWillReceiveProps(nextProps)');
        }
        shouldComponentUpdate(nextProps, nextState) {
            console.log( name + ' shouldComponentUpdate(nextProps, nextState)');
            return true;
        }
        componentWillUpdate(nextProps, nextState) {
            console.log( name + ' componentWillUpdate(nextProps, nextState)');
        }
        componentDidUpdate(prevProps, prevState) {
            console.log( name + ' componetDidUpdate(prevProps, prevState)');
        }
    }
}
class Child extends buildClass('Child'){
    render(){
        console.log('Child render')
        return (
            <div>child</div>
        )
    }
}
class Parent extends buildClass('Parent'){
    render(){
        console.log('Parent render')
        return (
            <Child />
        )
    }
}
ReactDOM.render(
    <Parent />,
    document.getElementById('root')
);

 运行结果：

结论：当需要render子组件的时候，才会进入子组件的生命周期，子组件的周期结束后，再回到上级的周期。

更新组件的两种方式

1.主动更新：组件通过setState修改自己的状态。

在以上代码的基础上，往子组件中添加一个按钮，用于主动更新自己的状态：

class Child extends buildClass('Child'){
    render(){
        console.log('Child render')
        return (
            <button onClick={()=>{this.setState({data:123})}}>child</button>
        )
    }
}

点击按钮：

2.被动更新：父组件通过props把自己的state传递给子组件，父组件执行setState更新状态

父组件修改如下：

class Parent extends buildClass('Parent'){
    render(){
        console.log('Parent render')
        return (
            <div>
                <Child />
                <button onClick={()=>{this.setState({data:123})}}>Parent</button>
            </div>
        )
    }
}

 运行结果：

可见：不管父组件有没有把数据传递给子组件，只要父组件setState，都会走一遍子组件的更新周期。而且子组件被动更新会比主动更新所执行的流程多出来一个 componentWillReceiveProps 方法。

 

在以上被动更新的基础上，修改buildClass中的代码，使 shouldComponentUpdate返回false：

shouldComponentUpdate(nextProps, nextState) {
    console.log( name + ' shouldComponentUpdate(nextProps, nextState)');
    return false;
}

点击parent中的更新按钮，仅仅输出一句：

Parent shouldComponentUpdate(nextProps, nextState)

结论：只要组件在以上函数中返回false，则子组件不会进行更新re-render，所有更新流程都不执行了

class 和 createClass的区别

class 是ES6中的写法，如果想要创建组件却不使用ES6，那就使用（ES5）createClass。

前者组件的初始化在constructor中，而后者没有constructor，但额外提供了一个getInitialState方法，用于初始化state，使用createClass需要先安装：

npm install --save create-react-class

 使用：

var Counter = createClass({
    getInitialState:function(){
        console.log( ' getInitialState');
        return {
            k:123
        }
    },
    componentWillMount:function() {
        console.log( ' componentWillMount');
        console.log(this.state)
    },
    render: function() {
        return <div>{999}</div>;
    }
});

 运行结果：

以上是初始化时的第一个区别，接下来说第二个。以下两个组件的执行效果一样：

class Counter2 extends React.Component{
    render(){
        return <div>{this.props.k}</div>;
    }
}
Counter2.defaultProps = {
    k:123
};

var Counter = createClass({
    getDefaultProps:function(){
        return {
            k:123
        }
    },
    render: function() {
        return <div>{this.props.k}</div>;
    }
});

 完。