摘要：組件的的單向數(shù)據(jù)流，主要的流動管道就是，本身是不可變的。是上的特殊屬性在常規(guī)的數(shù)據(jù)流之外強(qiáng)制修改子元素被修改的可以是組件實(shí)例，或者一個元素可以在元素上和類組件上添加，組件在加載時將元素傳入的回調(diào)，在或者這些生命周期前執(zhí)行。

1.定義標(biāo)簽時只允許被一個標(biāo)簽包裹
const component = nameage

2.標(biāo)簽一定要閉合


3.DOM元素屬性class和for
class屬性改為className   

for屬性改為htmlFor 
 

4.自定義html屬性，要使用data-前綴


5.屬性值需要使用表達(dá)式，只要用{}替換""即可
const person = 

6.html轉(zhuǎn)義
React會將所有要顯示到DOM的字符串轉(zhuǎn)義，防止XSS
react提供了dangerouslySetInnerHTML屬性，謹(jǐn)慎使用

在React中，數(shù)據(jù)是自頂向下單向流動的，即從父組件到子組件，這條原則讓組件之間的關(guān)系變的簡單且可預(yù)測。state和props是React組件中重要的概念，如果頂層組件初始化props，那么React會向下遍歷整棵組件樹，重新嘗試渲染所有相關(guān)的子組件。而state只關(guān)心每個組件自己內(nèi)部的狀態(tài)，這些狀態(tài)只能在組件內(nèi)部改變，把組件看成一個函數(shù)，那么它接受了props作為參數(shù)，內(nèi)部由state作為函數(shù)的內(nèi)部參數(shù)，返回一個Virtual DOM的實(shí)現(xiàn)。

組件的state
組件的state是組件的內(nèi)部狀態(tài)，state的變化最終將反映到組建UI的變化，我們在組件的構(gòu)造方法constructor中通過this.state定義組件的初始狀態(tài)，并通過this.setState方法改變組件狀態(tài)（也是改變組件狀態(tài)的唯一方式），進(jìn)而組件的UI也會隨之重新渲染。

1.setState是一個異步方法，一個生命周期內(nèi)所有的setState方法會合并操作。

組件的props

1.React的單向數(shù)據(jù)流，主要的流動管道就是props，
props本身是不可變的。當(dāng)我們試圖改變props的原始值時，
React會報(bào)出類型錯誤警告，組件的props一定來自于默認(rèn)屬性或者通過父組件傳遞而來。

2.React為props同樣提供了默認(rèn)的配置。
通過defaultProps靜態(tài)變量的方式來定義，當(dāng)組件被調(diào)用的時候，默認(rèn)值保證渲染后始終有值。
    static defaultProps = {
        classPrefix: "tabs",
        onChange: () => {}    
    }
    
3.proTotypes用于規(guī)范props的類型與必需的狀態(tài)。
如果組件定義了propTypes，那么在開發(fā)環(huán)境下，就會對組件的props的值類型作檢查。
    static propTypes = {
        classPrefix: propTypes.String
    }
    
4.子組件的props，在React中有一個重要且內(nèi)置的props---children，
它代表組件的子組件集合，children可以根據(jù)傳入子組件的數(shù)量來決定是否是數(shù)組類型。

5.用function prop與父組件通訊，
父組件可以通過子組件的prop傳遞給子組件一個回調(diào)函數(shù)，
子組件需要改變父組件數(shù)據(jù)時，調(diào)用這個回調(diào)函數(shù)即可。

組件從創(chuàng)建到被銷毀的過程稱為組件的生命周期。通常，React組件的生命周期可以被分為三個階段：掛載階段、更新階段、卸載階段

1.掛載階段

constructor
這是es6 class的構(gòu)造方法，組件被創(chuàng)建時，
會首先調(diào)用組件的構(gòu)造方法，
這個構(gòu)造方法接收一個props參數(shù)，props是父組件中傳入的屬性對象

componentWillMount
該方法在組件被掛載到DOM前調(diào)用，且只會被調(diào)用一次

render
這是定義組件時唯一必要的方法，該方法根據(jù)props和state返回一個react元素
，這個元素用于描述組件的UI，注意render并不負(fù)責(zé)組件的實(shí)際渲染工作，
它只是返回一個UI的描述，真正渲染出頁面的DOM的工作有React負(fù)責(zé)。

componentDidMount 
組件被掛載到DOM后調(diào)用，且只會被調(diào)用一次

2.更新階段

componentWillReceiveProps(nextProps)
這個方法只在props引起的組件更新過程中，才會被調(diào)用。
state引起的組件更新并不會觸發(fā)該方法的執(zhí)。

shouldComponentUpdate(nextProps, nextState)
這個方法決定組件是否繼續(xù)執(zhí)行更新過程，當(dāng)方法返回true時（默認(rèn)返回值），
組件會繼續(xù)更新過程。返回false時，組件更新過程停止。

componentWillUpdate(nextProps, nextState)
該方法在組件render調(diào)用前調(diào)用。

render
該方法根據(jù)props和state返回一個react元素，如掛載階段

componentDidUpdate(preProps, preState)
組件更新后被調(diào)用，可以作為操作DOM的地方。兩個參數(shù)分別是組件更新前的props和state

3.卸載階段

componentWillUnmount
組件被卸載之前調(diào)用，此處可以用于清除定時器等，取消監(jiān)聽事件等，避免引起內(nèi)存泄露。

ref是react上的特殊屬性
在常規(guī)的數(shù)據(jù)流之外強(qiáng)制修改子元素
被修改的可以是react組件實(shí)例，或者一個dom元素
可以在dom元素上和類組件上添加ref，react組件在加載時將dom元素傳入ref的回調(diào)，在componentDidMount 或者componentDidUpdate 這些生命周期前執(zhí)行。

1.dom元素上添加ref

...
handleClick(){
    this.nameInput.focus();
}

render(){
    return(
        

            {this.nameInput = input;}}
            點(diǎn)擊獲取輸入框焦點(diǎn)
        
    );
}

2.react組件上添加ref

// App.js
otherFunction(){
    this.pager.changePage(5);
}
....
render(){
    return(
        {this.pager = page;}} />
    );
}

// Pager.js
...
changePage(page){
    this.setState({
        page : page
    });
}
...
// 在父組件中使用ref給某一子組件傳值，并且子組件調(diào)用setState修改自身的狀態(tài)，
// 該子組件會重新渲染一次，父組件中的其他組件不會重新render

3.ref和函數(shù)式組件

function MyTest(){
    let textInput = null;

    function handleClick(){
        textInput.focus();
    }

    return(){
        

            {textInput=input}/>
            點(diǎn)擊獲取輸入框焦點(diǎn)
        
    }
}

子組件對父組件暴露dom節(jié)點(diǎn)
// App.js
...
render(){

return(
     this.inputRef = el; } />
);

}

// Sub.js
...
render(){

return(){
    

        
    
}

}

默認(rèn)情況下，當(dāng)組件的 state 或 props 改變時，組件將重新渲染。 如果你的 render() 方法依賴于一些其他數(shù)據(jù)，你可以告訴 React 組件需要通過調(diào)用 forceUpdate() 重新渲染。
調(diào)用 forceUpdate() 會導(dǎo)致組件跳過 shouldComponentUpdate() ，直接調(diào)用 render()。 這將觸發(fā)子組件的正常生命周期方法，包括每個子組件的 shouldComponentUpdate() 方法。
forceUpdate就是重新render。有些變量不在state上，但是你又想達(dá)到這個變量更新的時候，刷新render；或者state里的某個變量層次太深，更新的時候沒有自動觸發(fā)render。這些時候都可以手動調(diào)用forceUpdate自動觸發(fā)render

// Sub.js
class Sub extends React.Component{
    construcotr(){
        super();
        this.name = "tom";
    }
    refChangeName(name){
        this.name = name;
        this.forceUpdate(); 
    }
    render(){
        return (
{this.name}
);
    }
}

// App.js
class App extends React.Component{

    handleClick(){
        this.subRef.refChangeName("jack");
    }
    render(){
        return (

            {this.subRef = sub;}} />
            click
        
);
    }
}