摘要：不能在，和中調用組件各生命周期的應用方法或者對象只在組件類創建的時候調用一次，之后會被緩存起來。會和父組件設置的進行合并。在接收到新的或者之前立刻調用。如果需要更新來響應某個的改變，請使用。橫向滾動寬度在組件從中移除的時候立刻被調用。

1.react組件的兩種創建寫法

2.組件的生命周期在不同狀態下的執行順序

3.組件各生命周期的應用

第一種ES5寫法，React.createClass

React.createClass({
    getDefaultProps() {
        return {
            key1:value1
        }
    },
    getInitialState() {
        return {
            state1:state1
        }
    }
});

第二種是ES6寫法，繼承React.Component類

export default class Test1 extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            state1: state1
        }
    }
    static defaultProps = {
        data: 2,
    };
    static propTypes = {
        optionsData: React.PropTypes.array,
        onSelect: React.PropTypes.func,
        selectedOption: React.PropTypes.object,
        topStyle: React.PropTypes.any,
        placeholder: React.PropTypes.string
    }
 
}

getDefaultProps、getInitialState是在createClass時調用的方法，而在繼承component類時，getDefaultProps方法對應給類添加靜態屬性 defaultProps ，getInitialState 對應在類的構造函數中設置 state屬性

組件首次裝載（first-Mount）：

getDefaultProps() →

getInitialState() →

componentWillMount() →

render() →

componentDidMount()

卸載組件時（Unmount）：componentWillUnmount()

當重新裝載組件時（Re-Mount）：

getInitialState()→

componentWillMount()→

render() →

componentDidMount()，

但并不執行 getDefaultProps； defaultProps是放在組件類上的static屬性

當再次渲染組件時（Re-Render），此時按順序執行

componentWillReceiveProps(nextProps )(組件接收到新的props才會調用，只是改變state時不調用)→

shouldComponentUpdate(組件接收到新的props才會調用，只是改變state時不調用)→

componentWillUpdate→

render →

componentDidUpdate。

多帶帶調用setState的重新渲染

componentWillUpdate→

render →

componentDidUpdate

1、在單頁應用中，用react-router的history做頁面跳轉時，是將當前route的所有組件卸載，再跳轉回來時是重新裝載組件，而不是首次裝載。

2、在使用react-native的Navigator時，每次push新頁面的時候是首次加載，舊頁面沒有卸載，在pop新頁面的時候，新頁面會卸載 調用Unmount，舊頁面是重新渲染

componentWillReceiveProps→

componentWillUpdate→

render →

componentDidUpdate。
，不是重新裝載，也沒有重新渲染的shouldComponentUpdate控制，所以pop回來肯定重新渲染。

3、組件在內存中裝載過一次之后，組件的defaultProps就初始化了，之后裝載就不會重新設置。

4、父組件的render都會引起子組件的重新渲染。

5、 不能在componentWillUpdate ，render和componentDidUpdate 中調用setState

3.1 getDefaultProps方法 或者 defaultProps 對象

只在組件類創建的時候調用一次，之后會被緩存起來。

defaultProps在組件實例之前創建，實例間共享。

會和父組件設置的props進行合并。

3.2 getInitialState方法或constructor的state屬性

項目中會把組件用到的state初始化在這里

constructor (props) {
    super(props);
    this.state = {
        poi: null,
        activeTabId: null,
        cartCount: Shopcart.size(),
        domSize:{
            headerHeight: 100,
            bannerHeight: 200,
            categoryTabHeight: 100,
        },
        hiddenBanner: false //是否隱藏banner
    };

}

3.3 componentWillMount()

組件初次render之前調用，如果在此方法中調用setState，render將感知到更新后的state，并且只執行這一次render，可以在此方法中fetch數據，不需要dom操作的數據獲取。

3.4 render()

組件渲染的方法，是組件唯一的必須實現的方法，在該方法中，我們可以通過props和state渲染不同的組件。返回null或者false代表不渲染任何東西。

render () {
    return (
        

            

                {this.renderLeftComponent()}
                {this.props.title || "美團商超"}
                {this.renderRightComponent()}
            
        
    );
}

3.5 componentDidMount()

組件裝載后調用的方法，因為該方法調用的時候，組件已經裝載，并且該方法不在render的循環當中，一般在該方法中做一些fetch數據或者改變state的方法。
還可以通過ReactDOM.findDOMNode(_this.refs.wrapper) 來獲取DOM節點 進行操作。

componentDidMount() {
    this.mounted = true;
    if(this.props.poi){
        this.fetchCategoryTabs(this.props.poi.poiId);
    }
    if(!this.isCalculate) {
        this.calculateWidth(); 
    }
}

3.6 componentWillReceiveProps(nextProps)

在組件接收到新的 props 的時候調用。在初始化渲染的時候，該方法不會調用。可以在該方法中判斷，當props變化時，是否再去重新fetch數據，setState。

componentWillReceiveProps (nextProps) {
    if(nextProps.poi &&(nextProps.poi != this.props.poi)) {
        this.fetchBannerList(nextProps.poi.poiId);
    }
}

3.7 shouldComponentUpdate(nextProps, nextState)

在接收到新的props或者state變化時，被調用，該方法在初始化渲染和forceUpdate的時候不會被調用。

 默認返回true，如果返回false，則render不會執行。可以在這個方法中來阻止不必要的render，因為有時是因為父組件的render引起的子組件不必要的render。

shouldComponentUpdate(nextProps, nextState) {
    const isStateChanged = Object.keys(nextState).some(key=> {
        return nextState[key] !== this.state[key]
    });
    const isPropsChanged = Object.keys(nextProps).some(key=> {
        return nextProps[key] !== this.props[key]
    });
    return isStateChanged || isPropsChanged
}

3.8 componentWillUpdate(nextProps, nextState)

在接收到新的 props 或者 state 之前立刻調用。在初始化渲染的時候該方法不會被調用。使用該方法做一些更新之前的準備工作。你不能在剛方法中使用 this.setState()。如果需要更新 state 來響應某個 prop 的改變，請使用 componentWillReceiveProps。 項目中應用不多。

3.9 componentDidUpdate

在組件的更新已經同步到 DOM 中之后立刻被調用。該方法不會在初始化渲染的時候調用。使用該方法可以在組件更新之后操作 DOM 元素。

有些操作可能需要操作DOM元素，并且在第一次componentDidMount時還沒有達到條件，所以需要在componentDidUpdate時再做操作，但是componentDidUpdate在render的循環函數中，
所以需要設置變量做控制。

下面例子中 this.isCalculate 就是判斷是否計算過的變量。

componentDidMount() {
    this.mounted = true;
    if(this.props.poi){
        this.fetchCategoryTabs(this.props.poi.poiId);
    }
    if(!this.isCalculate) {
        this.calculateWidth(); 
    }
}
componentDidUpdate () {
    if(!this.isCalculate) {
        this.calculateWidth(); 
    }
}
calculateWidth () {
    if(this.isCalculate) {
        return;
    }
    let tablist = this.state.categoryTabs;
    if(tablist.length == 0) {
        return;
    }
    let tabsDOM = this.refs.tablist,
        childrensDOM = tabsDOM.childNodes,
        container = this.refs.tabcontainer,
        wrapper = this.refs.wrapper,
    // 橫向滾動寬度
        scrollwidth = 5;
    for(let i=0; i
3.10 componentWillUnmount
在組件從 DOM 中移除的時候立刻被調用。在該方法中執行任何必要的清理，比如無效的定時器，或者清除在 componentDidMount 中創建的 DOM 元素。
可以記錄組件的mount狀態，在 componentDidMount 中設置this.mounted = true 。 在componentWillUnmount 中設置 this.mounted = false。