摘要：用于規(guī)范的類型與必需的狀態(tài)。表示由組件更改的數據，通常是通過與用戶的交互來更改的。為了實現的修改，需要注冊事件處理程序到相應的元素上。當事件發(fā)生時，將更新后的值是從中檢索，并通知組件。通常情況下，該函數初始化狀態(tài)使用，，或其他數據存儲。

上一篇文章中，我們講到了JSX的一些用法和注意事項，這次我們來講react中最基礎也是特別重要的內容：組件。這篇文章包含組件的以下內容：狀態(tài)、屬性、生命周期。

W3C標準委員會制定的規(guī)范：Web Components.每個自定義組件可以定義自己對外提供的屬性、方法、還有事件。，內部可以像寫一個頁面一樣，專注于實現功能來完成對組件的封裝。
1.Web Components主要由四部分組成
（1）HTML templates 定義了之前模板的概念
（2）Custom Elements 定義了組件的展現形式
（3）shadow DOM 定義了組件的作用域范圍、可以囊括樣式
（4）HTML Imports 提出了新的引入方式

React的本質就是關心元素的構成，React組件即為組件元素。組件元素被描述為純粹的JSON對象，意味著可以使用方法和類來構建。React組件基本上有三部分組成： 屬性、狀態(tài)和生命周期方法。

React組件可以接收參數，也可能有自身狀態(tài)。一旦接收到的參數或者自身狀態(tài)有所改變，React組件就會執(zhí)行相應的生命周期方法，最后渲染。

React組件的構建方法
（1）React.createClass
用React.createClass構建組件是最傳統(tǒng)、兼容性最好的方法。
示例代碼如下：

const Button = React.createClass({
    getDefaultProps(){
        return{
            color:"blue",
            text:"confirm"
        };
    },
    render(){
        const {color,text} = this.props;
        return(
            
                {text}
            
        );
    }    
});

(2)ES6 Classes

import React,{Component} from "react"

class Button extends Component{
constructor(props){
    super(props);
}
static defaultProps = {
    color:"blue",
    text:"confirm"
}
render(){
    return (
    
        {text}
    
    );
}

}

（3）無狀態(tài)組件
使用無狀態(tài)函數構建的組件就稱為無狀態(tài)組件。
示例代碼如下：

function Button({
    color:"blue",
    text:"confirm"
}){
    return (
        
            {text}
        
    );
};

注意事項：
（1）無狀態(tài)組件只傳入props和context兩個參數；也就是說它不存在state,也沒有生命周期方法。
（2）無狀態(tài)組件不會像上面兩種方法一樣在調用時會創(chuàng)建新的實例，它創(chuàng)建時始終保持了一個實例。

1.簡單介紹：
（1）在React中，數據是自頂向下單向流動，即從父組件到子組件。
（2）如果頂層組件初始化 props，那么React會向下遍歷整棵組件樹，重新嘗試渲染所有相關的子組件。
（3）而state只關心每個組件自己內部的狀態(tài)，這些狀態(tài)只能在組件內變化。

2.state
每一個組件都有自己的state，它存在于組件的內部。
當組件內部使用庫內置的setSate方法時，最大的表現行為就是該組件會嘗試重新渲染。
值的注意的是，setState是一個異步方法，一個生命周期內的所有setSate方法會合并操作。

3.prop
props是properties的簡寫，它是react用來組件間聯系的一種機制，通俗地講就像方法的參數一樣。
React的單向數據流主要的流動通道就是prop。prop本身是不可變的。組件的props一定來自默認屬性或通過父組件傳遞而來。react為props提供了默認配置，通過defaultProps靜態(tài)變量的方式定義。

子組件prop:
在React中有一個重要的內置 Prop——children，它代表組件的子組件集合。React.Children是官方提供的一系列操作children的方法。它提供諸如：map forEach count等使用函數，可以為我們處理子組件提供便利。

propTypes:
propTypes用于規(guī)范props的類型與必需的狀態(tài)。如果組件定義了propTypes，那么在開發(fā)環(huán)境下就會對組件的props值進行類型檢查，如果不匹配，就會在控制臺里報warning.

4.prop與state的區(qū)別
本標題下內容來源：https://github.com/yunxifd/re...

官方文檔中已經給出了怎樣判斷數據是否應為組件的state的方法：
1、數據是否從父組件通過props傳遞給子組件？如果是，它可能不是state。
2、數據是否隨著時間的推移不發(fā)生變化？如果是，它可能不是state。
3、數據是否能夠通過其他state或props計算所得？如果是，它就不是state。

進一步探索，參考文檔Working with Data in React: Properties & State

props 是組件的輸入值，主要用來初始化組件的state和渲染組件。實例化組件后，props是不可變的。props只能在組件實例化的時候，設置值。因此，當組件re-rendered的時候，react會比較new和old props 來決定哪些DOM需要更新。

state 表示由組件更改的數據，通常是通過與用戶的交互來更改的。為了實現state的修改，需要注冊事件處理程序到相應的DOM元素上。當事件發(fā)生時，將更新后的值是從DOM中檢索，并通知組件。在組件可以使用state，組件必須通過getInitialState函數初始化。通常情況下，該getInitialState函數初始化狀態(tài)使用static value，props，或其他數據存儲。

總結：
props 是不可變的
state 是可變的

1.組件的掛載

import React,{Component,PropTypes} from "react"
class App extends React.Component{
    static propTypes{
        //...
    };
    static defaultProps={
        //...
    };
    constructor(props){
        super(props);
        this.state={
            //...
        };
    }
    componentWillMount(){
        //...
    }
    componentDidMount(){
        //...
    }
    render(){
        
this is a demo 
    }
}

getDefaultProps:
對于組件類來說，這個方法只會被調用一次。對于那些沒有被父輩指定props屬性的新建實例來說，這個方法返回的對象可用于為實例設置默認的props值

getInitialState:
對于組件的每個實例來說，這個方法的調用次數有且只有一次。在這里你有機會初始化每一個實例的state。與getDefaultProps不同的是，每次實例創(chuàng)建時，該方法都會調用一次。在這個方法里，你已經可以訪問到 this.props

componentWillMount:
該方法會在首次渲染之前被調用，這也是在render方法調用前可以修改組件state的最后一次機會。

render:
在這里你會創(chuàng)建一個虛擬的DOM，用于表示組件的輸出。對于一個組件來說， render是唯一一個必須的方法。
render方法返回的結果不是真正的DOM,而是一個虛擬的表現，react隨后會和它真是的DOM做對比，來判斷是否有必要做出修改。

componentDidMount:
在render方法成功調用并且真是的DOM已經被渲染之后，你可以在componentDidMount內部通過this.getDOMNode()方法訪問到它。

2.組件的卸載

componentWillUnmount：
該方法會在組件移除之前被調用，讓你有機會做一些清理工作。我們常執(zhí)行一些清理方法，比如事件回收或者清除定時器。

3.數據更新過程

數據更新指的是父組件向下傳遞props或許組件自身執(zhí)行setState方法時發(fā)生的一系列更新動作。

class App extends React.Component{
    componentWillReceiveProps(nextProps){
        //this.setSate({})
    }
    shouldComponentUpdate(nextProps,nextSate){
        //return true
    }
    componentWillupdate(preProps,preSate){
        //...
    }
    componentDidUpdate(){
        //...
    }
    render(){
        return(
            
this is a demo 
        )
    }
}

componentWillReceiveProps:
在任意時刻，組件的props都可以通過父輩組件來更改。出現這種情況時，該方法將會被調用，它也將獲得更改props對象以及更新state的機會。

shouldComponentUpdate:
它接收需要更新的prop和state，讓開發(fā)者增加必要的條件判斷，讓其在需要時更新，不需要時不更新。因此，當該方法返回false的時候，組件不在向下執(zhí)行生命周期方法。

componentWillUpdate:
組件會接收新的props和state進行渲染之前調用該方法。
注意：你不可以在該方法中更新props和state。而應該借助componentWillReceiveProps在運行時更新
state.

componentDidUpdate:
該方法給我們提供了更新已經渲染好的DOM的機會。

詳細請見：https://github.com/react-comp...
（1）職責清晰
多個組件協同完成一件事情，而不是一個組件替其他組件完成本該它自己完成的事情。
（2）扁平訪問
組件推薦使用狀態(tài)來控制交互和顯示，如果需要顯示訪問，也盡量實行扁平訪問，即只可以調用其 children 的方法。
（3）信息冗余
盡量避免信息冗余，如果某個 state 可以由其他 state 計算得到，那么就刪除這個 state
（4）api 盡量和已知概念保持一致
如果 api 可以和已知概念保持一致，那么就用已知的 api
（5）使用標簽嵌套
盡量使用標簽嵌套而不是屬性配置。
（6）避免使用 ref
使用父組件的 state 控制子組件的狀態(tài)而不是直接通過 ref 操作子組件