React 開發你必定要知道

JSX 基本語法

1.定義標籤時只容許被一個標籤包裹
const component = <span>name</span><span>age</span>

2.標籤必定要閉合
<span></span>

3.DOM元素屬性class和for
class屬性改成className   
<div className="myClass"></div>
for屬性改成htmlFor 
<label htmlFor="myInput"></label> <input value="a" name="myInput"/>

4.自定義html屬性，要使用data-前綴
<div data-attr="xxx"></div>

5.屬性值須要使用表達式，只要用{}替換""便可
const person = <Person name={window.isLoggerdIn ? window.name : ''}>

6.html轉義
React會將全部要顯示到DOM的字符串轉義，防止XSS
react提供了dangerouslySetInnerHTML屬性，謹慎使用

React 數據流

在React中，數據是自頂向下單向流動的，即從父組件到子組件，這條原則讓組件之間的關係變的簡單且可預測。state和props是React組件中重要的概念，若是頂層組件初始化props，那麼React會向下遍歷整棵組件樹，從新嘗試渲染全部相關的子組件。而state只關心每一個組件本身內部的狀態，這些狀態只能在組件內部改變，把組件當作一個函數，那麼它接受了props做爲參數，內部由state做爲函數的內部參數，返回一個Virtual DOM的實現。

組件的state
組件的state是組件的內部狀態，state的變化最終將反映到組建UI的變化，咱們在組件的構造方法constructor中經過this.state定義組件的初始狀態，並經過this.setState方法改變組件狀態（也是改變組件狀態的惟一方式），進而組件的UI也會隨之從新渲染。

1.setState是一個異步方法，一個生命週期內全部的setState方法會合並操做。

組件的props

1.React的單向數據流，主要的流動管道就是props，
props自己是不可變的。當咱們試圖改變props的原始值時，
React會報出類型錯誤警告，組件的props必定來自於默認屬性或者經過父組件傳遞而來。

2.React爲props一樣提供了默認的配置。
經過defaultProps靜態變量的方式來定義，當組件被調用的時候，默認值保證渲染後始終有值。
    static defaultProps = {
        classPrefix: 'tabs',
        onChange: () => {}    
    }
    
3.proTotypes用於規範props的類型與必需的狀態。
若是組件定義了propTypes，那麼在開發環境下，就會對組件的props的值類型做檢查。
    static propTypes = {
        classPrefix: propTypes.String
    }
    
4.子組件的props，在React中有一個重要且內置的props---children，
它表明組件的子組件集合，children能夠根據傳入子組件的數量來決定是不是數組類型。

5.用function prop與父組件通信，
父組件能夠經過子組件的prop傳遞給子組件一個回調函數，
子組件須要改變父組件數據時，調用這個回調函數便可。

React生命週期

組件從建立到被銷燬的過程稱爲組件的生命週期。一般，React組件的生命週期能夠被分爲三個階段：掛載階段、更新階段、卸載階段

1.掛載階段

constructor
這是es6 class的構造方法，組件被建立時，
會首先調用組件的構造方法，
這個構造方法接收一個props參數，props是父組件中傳入的屬性對象

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

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

componentDidMount 
組件被掛載到DOM後調用，且只會被調用一次

2.更新階段

componentWillReceiveProps(nextProps)
這個方法只在props引發的組件更新過程當中，纔會被調用。
state引發的組件更新並不會觸發該方法的執。

shouldComponentUpdate(nextProps, nextState)
這個方法決定組件是否繼續執行更新過程，當方法返回true時（默認返回值），
組件會繼續更新過程。返回false時，組件更新過程中止。

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

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

componentDidUpdate(preProps, preState)
組件更新後被調用，能夠做爲操做DOM的地方。兩個參數分別是組件更新前的props和state

3.卸載階段

componentWillUnmount
組件被卸載以前調用，此處能夠用於清除定時器等，取消監聽事件等，避免引發內存泄露。

React refs

ref是react上的特殊屬性
在常規的數據流以外強制修改子元素
被修改的能夠是react組件實例，或者一個dom元素
能夠在dom元素上和類組件上添加ref，react組件在加載時將dom元素傳入ref的回調，在componentDidMount 或者componentDidUpdate 這些生命週期前執行。

1.dom元素上添加ref

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

render(){
    return(
        <div>
            <input ref={(input)=>{this.nameInput = input;}}
            <button onClick={this.handleClick}>點擊獲取輸入框焦點</button>
        </div>
    );
}

2.react組件上添加ref

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

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

3.ref和函數式組件

function MyTest(){
    let textInput = null;

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

    return(){
        <div>
            <input ref={(input)=>{textInput=input}/>
            <button onClick={handleClick}>點擊獲取輸入框焦點</button>
        </div>
    }
}

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

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

   }

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

   return(){
       <div>
           <input ref={this.props.inputRef} />
       </div>
   }

   }

React forceUpdate

默認狀況下，當組件的 state 或 props 改變時，組件將從新渲染。 若是你的 render() 方法依賴於一些其餘數據，你能夠告訴 React 組件須要經過調用 forceUpdate() 從新渲染。
調用 forceUpdate() 會致使組件跳過 shouldComponentUpdate() ，直接調用 render()。 這將觸發子組件的正常生命週期方法，包括每一個子組件的 shouldComponentUpdate() 方法。
forceUpdate就是從新render。有些變量不在state上，可是你又想達到這個變量更新的時候，刷新render；或者state裏的某個變量層次太深，更新的時候沒有自動觸發render。這些時候均可以手動調用forceUpdate自動觸發render

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

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

    handleClick(){
        this.subRef.refChangeName("jack");
    }
    render(){
        return (<div>
            <Sub ref={(sub)=>{this.subRef = sub;}} />
            <button onClick={this.handleClick}>click</button>
        </div>);
    }
}