国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【譯】React 組件的生命周期

Crazy_Coder / 3130人閱讀

摘要：此篇文章我們將會繼續探索組件的特性，特別是生命周期。這些方法叫做組件的生命周期方法且會根據特定并可預測的順序被調用。基本上所有的組件的生命周期方法都可以被分割成四個階段初始化掛載階段更新階段卸載階段。

原文：https://medium.com/react-ecosystem/react-components-lifecycle-ce09239010df#.j7h6w8ccc


譯者序：React組件生命周期有很多文章介紹了，這篇作者列出了很多開發中可能不會注意的細節，比如哪些階段執行setState是否會導致render等，對React組件性能優化有一定的幫助，故譯之，不當之處敬請指正！

github issue: https://github.com/chemdemo/c...

一段探索React自建內部構造的旅程

在先前的文章里我們涵蓋了React基本原理和如何構建更加復雜的交互組件。此篇文章我們將會繼續探索React組件的特性，特別是生命周期。

稍微思考一下React組件所做的事，首先想到的是一點是：React描述了如何去渲染（DOM）。我們已經知道React使用render()方法來達到這個目的。然而僅有render()方法可能不一定都能滿足我們的需求。如果在組件rendered之前或之后我們需要做些額外的事情該怎么做呢？我們需要做些什么以避免重復渲染(re-render)呢？

看起來我們需要對組件（運行）的各個階段進行控制，組件運行所有涉及的各個階段叫做組件的生命周期，并且每一個React組件都會經歷這些階段。React提供了一些方法并在組件處于相應的階段時通知我們。這些方法叫做React組件的生命周期方法且會根據特定并可預測的順序被調用。

基本上所有的React組件的生命周期方法都可以被分割成四個階段：初始化、掛載階段（mounting）、更新階段、卸載階段（unmounting）。讓我們來近距離分別研究下各個階段。

初始化階段

初始化階段就是我們分別通過getDefaultProps()和getInitialState()方法定義this.props默認值和this.state初始值的階段。

getDefaultProps()方法被調用一次并緩存起來——在多個類實例之間共享。在組件的任何實例被創建之前，我們（的代碼邏輯）不能依賴這里的this.props。這個方法返回一個對象并且屬性如果沒有通過父組件傳入的話相應的屬性會掛載到this.props對象上。

getInitialState()方法也只會被調用一次，（調用時機）剛好是mounting階段開始之前。返回值將會被當成this.state的初始值，且必須是一個對象。

現在我們來證明上面的猜想，實現一個顯示的值可以被增加和減少的組件，基本上就是一個擁有“+”和“-”按鈕的計數器。

var Counter = React.createClass({
    getDefaultProps: function() {
        console.log("getDefaultProps");
        return {
            title: "Basic counter!!!"
        }
    },

    getInitialState: function() {
        console.log("getInitialState");
        return {
            count: 0
        }
    },

    render: function() {
        console.log("render");
        return (
            

                
{this.props.title}

                
{this.state.count}

                
                
            

        );
    },

    handleIncrement: function() {
        var newCount = this.state.count + 1;
        this.setState({count: newCount});
    },

    handleDecrement: function() {
        var newCount = this.state.count - 1;
        this.setState({count: newCount});
    },

    propTypes: {
        title: React.PropTypes.string
    }
});

ReactDOM.render(
    React.createElement(Counter),
    document.getElementById("app-container")
);

我們通過getDefaultProps()方法配置一個“title”屬性，如果沒有傳入則提供一個默認值。然后通過getInitialState()為組件設置一個初始state值“{count: 0}”。如果運行這段代碼你將會看到控制臺輸出如下結果：

現在我們想要讓Counter組件可以設置this.state.count初始值和增加/減少的步長值，但依然提供一個默認值：

var Component = React.createClass({
    getDefaultProps: function() {
        console.log("getDefaultProps");
        return {
            title: "Basic counter!!!",
            step: 1
        }
    },

    getInitialState: function() {
        console.log("getInitialState");
        return {
            count: (this.props.initialCount || 0)
        };
    },

    render: function() {
        console.log("render");
        var step = this.props.step;

        return (
            

                
{this.props.title}

                
{this.state.count}

                
                
            

        );
    },

    updateCounter: function(value) {
        var newCount = this.state.count + value;
        this.setState({count: newCount});
    },

    propTypes: {
        title: React.PropTypes.string,
        initialCount: React.PropTypes.number,
        step: React.PropTypes.number
    }
});

ReactDOM.render(
    React.createElement(Component, {initialCount: 5, step: 2}),
    document.getElementById("app-container")
);
這里通過Function.prototype.bind使用偏函數應用(Partial Application)來達到復用代碼的目的。

現在我們擁有了一個可定制化的組件。

增長（Mounting）階段

Mounting階段發生在組件即將被插入到DOM之前。這個階段有兩個方法可以用：componentWillMount()和componentDidMount()。

componentWillMount()方法是這個階段最先調用的，它只在剛好初始渲染（initial rendering）發生之前被調用一次，也就是React在DOM插入組件之前。需要注意的是在此處調用this.setState()方法將不會觸發重復渲染（re-render）。如果添加下面的代碼到計數器組件我們將會看到此方法在getInitialState()之后且render()之前被調用。

getInitialState: function() {...},
componentWillMount: function() {
    console.log("componentWillMount");
},

componentDidMount()是這個階段第二個被調用的方法，剛好發生在React插入組件到DOM之后，且也只被調用一次。現在可以更新DOM元素了，這意味著這個方法是初始化其他需要訪問DOM或操作數據的第三方庫的最佳時機。

假設我們想要通過API拉取數據來初始化組件。我們應該直接在計數器組件的componentDidMount()方法拉取數據，但是這讓組件看起來有太多邏輯了，更可取的方案是使用容器組件來做：

var Container = React.createClass({
    getInitialState: function() {
        return {
            data: null,
            fetching: false,
            error: null
        };
    },

    render: function() {
        if (this.props.fetching) {
            return 
Loading...
;
        }

        if (this.props.error) {
            return (
                

                    {this.state.error.message}
                

            );
        }

        return 
    },

    componentDidMount: function() {
        this.setState({fetching: true});

        Axios.get(this.props.url).then(function(res) {
            this.setState({data: res.data, fetching: false});
        }).catch(function(res) {
            this.setState({error: res.data, fetching: false});
        });
    }
});
Axios是一個基于priomise的跨瀏覽器和Node.js的HTTP客戶端。
　更新階段

當組件的屬性或者狀態更新時也需要一些方法來供我們執行代碼，這些方法也是組件更新階段的一部分且按照以下的順序被調用：

1、當從父組件接收到新的屬性時：

2、當通過this.setState()改變狀態時：

此階段React組件已經被插入DOM了，因此這些方法將不會在首次render時被調用。

最先被調用的方法是componentWillReceiveProps()，當組件接收到新屬性時被調用。我們可以利用此方法為React組件提供一個在render之前修改state的機會。在此方法內調用this.setState()將不會導致重復render，然后可以通過this.props訪問舊的屬性。例如計數器組件，如果我們想要在任何時候父組件傳入“initialCount”時更新狀態，可以這樣做：

...
componentWillReceiveProps: function(newProps) {
    this.setState({count: newProps.initialCount});
},
...

shouldComponentUpdate()方法允許我們自行決定下一個state更新時是否觸發重復render。此方法返回一個布爾值，且默認是true。但是我們也可以返回false，這樣下面的（生命周期）方法將不會被調用：

componentWillUpdate()

render()

componentDidUpdate()

當有性能瓶頸時也可以使用shouldComponentUpdate()方法（來優化）。尤其是數百個組件一起時重新render的代價將會十分昂貴。為了證明這個猜想我們來看一個例子：

var TextComponent = React.createClass({
    shouldComponentUpdate: function(nextProps, nextState) {
        if (this.props.text === nextProps.text) return false;
        return true;
    },

    render: function() {
        return