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

1.定義標(biāo)簽時(shí)只允許被一個(gè)標(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會(huì)將所有要顯示到DOM的字符串轉(zhuǎn)義，防止XSS
react提供了dangerouslySetInnerHTML屬性，謹(jǐn)慎使用

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

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

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

組件的props

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

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

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

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

1.掛載階段

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

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

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

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

2.更新階段

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

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

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

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

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

3.卸載階段

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

ref是react上的特殊屬性
在常規(guī)的數(shù)據(jù)流之外強(qiáng)制修改子元素
被修改的可以是react組件實(shí)例，或者一個(gè)dom元素
可以在dom元素上和類組件上添加ref，react組件在加載時(shí)將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)，
// 該子組件會(huì)重新渲染一次，父組件中的其他組件不會(huì)重新render

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

function MyTest(){
    let textInput = null;

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

    return(){
        

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

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

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

}

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

return(){
    

        
    
}

}

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