React生命週期

時間 2019-11-10

標籤 react 生命週期欄目 React 简体版

原文原文鏈接

React生命週期

react能夠將頁面分紅一個一個獨立或嵌套的組件，使得總體代碼可複用性特別高；react組件的掛載到銷燬的過程當中有七個生命週期鉤子函數，能夠在不一樣的生命週期函數中寫業務邏輯代碼react

componentWillMount

組件將要被掛載，這個階段發生在組件render函數以前，初始化state狀態以後瀏覽器

componentDidMount

組件已經掛載完成，這個階段發生在render函數執行以後，是組件首次建立完成後的最終形態ide

componentWillReceiveProps

組件將要接收新的屬性，這個階段發生在組件的屬性改變的時候，而且是組件從新渲染的過程當中第一個執行的方法函數

shouldComponentUpdate

組件是否要更新，這個階段發生在componentWillReceiveProps以後，控制組件是否會從新渲染，惟一一個須要返回值的鉤子函數this

componentWillUpdate

組件將要更新，這個階段發生在shouldComponentUpdate以後，render函數執行以前code

componentWillUnmount

組件將要被銷燬，當組件因爲功能需求或者用戶操做，須要卸載的時候執行此鉤子函數，通常用於解除組件的定時器或者事件監聽函數component

代碼示例

//定義一個時鐘組件
class Clock extends Component {

    constructor(){
        super();
        this.state={
            time: new Date().toLocaleString()
        };
    }

    componentWillReceiveProps(){
        console.log("clock receive props");
    }

    shouldComponentUpdate(){
        console.log("clock should update");
        return true;
    }

    componentWillUpdate(){
        console.log("clock will update");
    }

    componentDidUpdate(){
        console.log("clock did update");
    }

    componentWillMount(){
        console.log("clock will mount");
    }

    componentDidMount(){
        console.log("clock did mount");
        this.timer=setTimeout(()=>{
            this.setState({
                time: new Date().toLocaleString()
            });
        },1000);
    }

    componentWillUnmount(){
        console.log("clock unmount");
        clearInterval(this.timer);
    }

    render(){
        console.log("clock render");
        return (
          <div>
              {this.props.country }: {this.state.time}
          </div>
        )
    }
}

//在Index組件中使用Clock組件，而且將Index組件在頁面中渲染出來
class Index extends Component {

    constructor(){
        super();
        this.state={
            isShow: true,
            country: "china"
        };
    }

    shouldComponentUpdate(){
        console.log("index should update");
        return true;
    }

    componentWillUpdate(){
        console.log("index will update");
    }

    componentDidUpdate(){
        console.log("index did update");
    }

    componentWillMount(){
        console.log("index will mount");
    }

    componentDidMount(){
        console.log("index did mount");
    }

    render(){
        console.log("index render");
        return (
          <div>
              {
                  this.state.isShow?
                      <Clock country={this.state.country} /> : null
              }
            <button onClick={()=>{this.setState({isShow: !this.state.isShow})}}>
                {
                    this.state.isShow?"hide":"show"
                }
            </button>
              {
                  this.state.isShow?
                      <button onClick={()=>{this.setState({country: this.state.country==="china"?"usa":"china"})}}>transform</button> : null
              }
          </div>
        )
    }
}

頁面首次被渲染的時候依次在控制檯打印出以下結果：orm