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

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

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

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

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

React組件的構(gòu)建方法
（1）React.createClass
用React.createClass構(gòu)建組件是最傳統(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)函數(shù)構(gòu)建的組件就稱為無狀態(tài)組件。
示例代碼如下：

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

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

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

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

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

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

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

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

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

進(jìn)一步探索，參考文檔Working with Data in React: Properties & State

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

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

總結(jié)：
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:
對(duì)于組件類來說，這個(gè)方法只會(huì)被調(diào)用一次。對(duì)于那些沒有被父輩指定props屬性的新建實(shí)例來說，這個(gè)方法返回的對(duì)象可用于為實(shí)例設(shè)置默認(rèn)的props值

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

componentWillMount:
該方法會(huì)在首次渲染之前被調(diào)用，這也是在render方法調(diào)用前可以修改組件state的最后一次機(jī)會(huì)。

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

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

2.組件的卸載

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

3.數(shù)據(jù)更新過程

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

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:
在任意時(shí)刻，組件的props都可以通過父輩組件來更改。出現(xiàn)這種情況時(shí)，該方法將會(huì)被調(diào)用，它也將獲得更改props對(duì)象以及更新state的機(jī)會(huì)。

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

componentWillUpdate:
組件會(huì)接收新的props和state進(jìn)行渲染之前調(diào)用該方法。
注意：你不可以在該方法中更新props和state。而應(yīng)該借助componentWillReceiveProps在運(yùn)行時(shí)更新
state.

componentDidUpdate:
該方法給我們提供了更新已經(jīng)渲染好的DOM的機(jī)會(huì)。

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