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

1.定義標簽時只允許被一個標簽包裹
const component = nameage

2.標簽一定要閉合


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

for屬性改為htmlFor 
 

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


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

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

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

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

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

組件的props

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

2.React為props同樣提供了默認的配置。
通過defaultProps靜態(tài)變量的方式來定義，當組件被調(diào)用的時候，默認值保證渲染后始終有值。
    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的構造方法，組件被創(chuàng)建時，
會首先調(diào)用組件的構造方法，
這個構造方法接收一個props參數(shù)，props是父組件中傳入的屬性對象

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

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

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

2.更新階段

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

shouldComponentUpdate(nextProps, nextState)
這個方法決定組件是否繼續(xù)執(zhí)行更新過程，當方法返回true時（默認返回值），
組件會繼續(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ù)流之外強制修改子元素
被修改的可以是react組件實例，或者一個dom元素
可以在dom元素上和類組件上添加ref，react組件在加載時將dom元素傳入ref的回調(diào)，在componentDidMount 或者componentDidUpdate 這些生命周期前執(zhí)行。

1.dom元素上添加ref

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

render(){
    return(
        

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

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}/>
            點擊獲取輸入框焦點
        
    }
}

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

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

}

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

return(){
    

        
    
}

}

默認情況下，當組件的 state 或 props 改變時，組件將重新渲染。 如果你的 render() 方法依賴于一些其他數(shù)據(jù)，你可以告訴 React 組件需要通過調(diào)用 forceUpdate() 重新渲染。
調(diào)用 forceUpdate() 會導致組件跳過 shouldComponentUpdate() ，直接調(diào)用 render()。 這將觸發(fā)子組件的正常生命周期方法，包括每個子組件的 shouldComponentUpdate() 方法。
forceUpdate就是重新render。有些變量不在state上，但是你又想達到這個變量更新的時候，刷新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
        
);
    }
}