React 從入門到進階之路（九）

之前的文章我們介紹了 React propTypes  defaultProps。接下來我們將介紹 React 生命週期函式。

之前我們已經根據 create-react-app 模組建立了一個 React 專案，並定義 App.js 為根元件，即父元件，Home.js 為子元件。我們看一下兩個元件的程式碼：

 App.js

import React, {Component} from 'react';
import Home from './components/Home';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "我是父元件 App 的 title",
            flag: true,
        }
    }

    setFlag = () => {
        this.setState({
            flag: !this.state.flag
        })
    }

    setTitle = () => {
        this.setState({
            title: "我是父元件 App 更改後的 title"
        })
    }

    render() {
        return (
            <div className="App">
                {
                    this.state.flag ? <Home title={this.state.title}/> : ""
                }

                <hr/>
                {/*通過 flag 來控制子元件 Home 的掛載與銷燬*/}
                <button onClick={this.setFlag}>控制Home元件掛載銷燬</button>

                <hr/>
                {/*通過 flag 來控制子元件 Home 的掛載與銷燬*/}
                <button onClick={this.setTitle}>修改App元件的title值</button>

            </div>
        );
    }
}

export default App;

Home.js

import React, {Component} from 'react';

class Home extends Component {
    constructor(props) {
        console.log('01建構函式');
        super(props);
        this.state = {
            name: '我是子元件 Home 的 name',
            sex: 1
        };
    }

    //元件將要掛載的時候觸發的生命週期函式
    componentWillMount() {
        console.log('02元件將要掛載');
    }

    //元件掛載完成的時候觸發的生命週期函式
    componentDidMount() {
        //dom操作放在這個裡面，請求資料也放在這個裡面
        console.log('04元件掛載完成');
    }

    //是否要更新資料  如果返回true才會執行更新資料的操作
    shouldComponentUpdate(nextProps, nextState) {
        console.log('01是否要更新資料');
        // 父元件傳遞過來的更改後的值
        console.log(nextProps);
        // 子元件更改後 this.state 的值
        console.log(nextState);
        // 如果為 true 則可以更新資料，如果為 false 則不能更新資料
        return true;
    }

    //將要更新資料的時候觸發
    componentWillUpdate() {
        console.log('02元件將要更新');
    }

    //元件更新完成
    componentDidUpdate() {
        console.log('04元件資料更新完成');
    }

    //在父元件裡面改變props傳值的時候觸發的
    componentWillReceiveProps() {
        console.log('父子元件傳值，父元件裡面改變了props的值觸發的方法')
    }

    setName = () => {
        this.setState({
            name: '我是子元件 Home 更改後的 name 值'
        })
    }

    //元件銷燬的時候觸發的生命週期函式，用在元件銷燬的時候執行操作
    componentWillUnmount() {
        console.log('元件銷燬了');
    }

    render() {
        console.log('03資料渲染render');
        return (
            <div>
                {/*父元件 App 傳遞過來的 title 值*/}
                <p>{this.props.title}</p>

                <br/><br/>
                {/*更改子元件 Home 的 name 值*/}
                <button onClick={this.setName}>更新name的資料</button>
            </div>
        );
    }
}

export default Home;

我們在父元件 App 中通過 <Home /> 標籤插入子元件 Home，將 this.state 中的 title 值傳給 Home 元件，並通過一個 flag 屬性來控制該 Home 元件的掛載和銷燬，並在 App 元件中定義一個 setTitle 的方法可以改變 this.state 中 title 的值。

我們在子元件 Home 中定義了很多元件的生命週期函式，下面我們來一點點分析。

我們先來看當頁面載入時瀏覽器端的顯示：

從控制檯的輸出結果我們可以看出元件在掛在時經歷了四個階段：

　　1、constructor：元件在掛載前最先經歷該階段，初始化資料。

　　2、componentWillMount，元件將要掛載時觸發的生命週期函式。

　　3、render：資料渲染 render

　　4、componentDidMount：元件掛載完成時觸發的生命週期函式。我們可以將 DOM 操作和請求資料放在這裡面。

 

當我們點選 更新name的資料 的 button 按鈕時，將 this.state 中的 name 值進行更改，瀏覽器的顯示如下：

從控制檯的輸出結果我們可以看出元件在掛在時經歷了四個階段：

　　1、shouldComponentUpdate：是否需要更新資料，在該生命週期函式中如果 return true，則表示可以更新資料，如果 return false，則表示不允許更新資料，當更新資料時是不成功的。同時該生命週期函式中有兩個傳參 nextProps，nextState，其中 nextProps 表示父元件傳遞過來的值更改後的值，這個我們在下面的例子中解釋。nextState 表示子元件更改後子元件中 this.state 的資料，從控制檯的列印結果可以看出 this.state 中 name 值已經變成了更改後的值。

　　2、componentWillUpdate，將要更新資料的時候觸發的生命週期函式。

　　3、render：資料渲染 render

　　4、componentDidUpdate：元件更新完成時觸發的生命週期函式。

 

當我們點選 修改App元件的title值 的 button 按鈕時，該 button 是父元件 App 的的一個按鈕，將 App 元件中 this.state 的 title 值進行更改，瀏覽器的顯示如下：

 

從控制檯的輸出結果我們可以看出元件在掛在時經歷了五個階段：

　　1、shouldWillReceiveProps：在父元件裡面改變 props 傳值的時候觸發。

　　2、shouldComponentUpdate：是否需要更新資料，在該生命週期函式中如果 return true，則表示可以更新資料，如果 return false，則表示不允許更新資料，當更新資料時是不成功的。同時該生命週期函式中有兩個傳參 nextProps，nextState，其中 nextProps 表示父元件傳遞過來的值更改後的值，從控制檯的列印結果可以看出 App 元件 this.state 中 title 值已經變成了更改後的值。nextState 表示子元件更改後子元件中 this.state 的資料，。

　　3、componentWillUpdate，將要更新資料的時候觸發的生命週期函式。

　　4、render：資料渲染 render

　　5、componentDidUpdate：元件更新完成時觸發的生命週期函式。

 

當我們點選 控制Home元件掛載銷燬 的 button 按鈕時，該 button 是父元件 App 的的一個按鈕，當 App 元件的 this.state 中 flag 為 true 時 Home 元件掛載，當 flag 為 false 時 Home 元件銷燬，瀏覽器的顯示如下：

從控制檯的輸出結果我們可以看出元件在掛在時經歷了一個階段：

　　1、shouldWillUnmount：元件銷燬的時候觸發的生命週期函式。

 

當我們再次點選 控制Home元件掛載銷燬 的 button 按鈕時，元件又重新掛載，就會再在執行元件掛載時的生命週期函式，最後效果如下：