React框架之生命周期函数

React组件的生命周期

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：

• componentWillMount 在渲染前调用,在客户端也在服务端。
• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
  可以在你确认不需要更新组件时使用。
• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

代码展示如下：

App.jsx中的代码：

<ComponentLife title={this.state.title} updateTitles = {this.updateTitle}/>
<button onClick={ this.updateTitle }>父级组件修改title</button>

ComponentLife.jsx中的代码：

import React from "react"

export default class Component extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            count : 10
        }
    }

    componentWillMount(){
        console.log("componentWillMount");
    }
    componentDidMount(){
        console.log("componentDidMount");
    }
    shouldComponentUpdate(){
        console.log("shouldComponentUpdate");
        return true;
    }
    componentWillUpdate(){
        console.log("componentWillUpdate");
    }
    componentDidUpdate(){
        console.log("componentDidUpdate");
    }
    componentWillReceiveProps(){
        console.log("componentWillReceiveProps");
    }
    componentWillUnmount(){
        console.log("componentWillUnmount");
    }

    changeHandler = () => {
        this.setState({
            count:this.state.count+=1
        })
    }
    updateTitle = () => {
        this.props.updateTitles();
    }
    
    render(){
        const { count } = this.state;
        return(
            <div>
                 react生命周期函数:{count} -- {this.props.title}
                 <button onClick={ this.changeHandler }>修改</button>
                 <button onClick={ this.updateTitle }>子级组件修改title</button> 
            </div>
           
        )
    }
}

效果展示

页面样式：

点击两个修改title的按钮出来的效果都一样，如下：

控制台打印的效果也都一样：