React-14 React的组件生命周期

组件的生命周期：组件从被创建到挂载到页面中运行，再到组件被卸载的过程。

生命周期的每个阶段总是伴随着一些方法的调用，这些方法就是生命周期的钩子函数。

钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。

注意：只有类组件才有生命周期！

生命周期的三个阶段

1. 创建时（挂载阶段）

执行时机：页面加载(组件创建)时；

此阶段一共有三个钩子函数：constructor、render、componentDidMount；

class App extends React.Component{
    constructor(props){
        super(props)
        console.warn("生命周期钩子函数: constructor")
    }
    componentDidMount(){
        console.warn("生命周期钩子函数: componentDidMount")
    }
    render(){
        console.warn("生命周期钩子函数: render")
        return (
            <div>
                <h1>组件创建时</h1>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

其输出结果如下：

由此可见这三个钩子函数执行顺序为：

 

2. 更新时（更新阶段）

有三种情况会导致组件更新：

1）组件接收到新的props值；

2）调用setState方法；

3）调用this.forceUpdate()方法强制更新页面；

该阶段下钩子函数的执行顺序为：

 在componentDidUpdate周期中，不能直接调用this.setState()方法，这会导致递归更新，

我们通常是比较更新前后的props是否相同，来决定是否更新

  componentDidUpdate(prevProps){
        console.log("上一次props："+prevProps);
        console.log("当前props："+this.props)
        if(prevProp.属性名!=this.props.属性名){
            this.setState({})
        }
    }

3. 卸载时（卸载阶段）

执行时机：组件从页面中消失