React with TypeScript 系列(二) --基礎篇

編者語：新年了，2016年又是一個新的開始。      

       今天和大家說說React的一些基礎。

        1. JSX 
        這是一個把XML混在JavaScript 的一種方式。Facebook相信這種方式令標籤語言和JS代碼更佳緊湊。在React構件頁面時，是以組件(Component)的方式存在的, 通過組件構件的頁面元素就是通過JSX的方式完成。在React中你不一定要用JSX，但是這是令人痛苦的決定。因爲每一個頁面元素都必須通過React.createElement的方式創建，而JSX就更像嵌入HTML語言，很方便。  
        舉個例子吧，如果我們需要構建一個這樣的頁面，使用JSX會更方便，而且和寫HTML基本一致的。
           

        需要注意的地方
        a. 建議大家在寫JSX時先把基本效果在純淨態頁面下寫好，這樣會事半功倍

        b. 引入頁面css的class時，class是JSX的保留字段，所以class的名字是className.

        c. 結合TypeScript寫JSX時，暫時沒有智能提示和相應的插件，這個比較頭痛的，但習慣了就好
        2. Props 和 State

         State  - 頁面發生交互時，會產生數據的變化，這個時候就需要State去更新頁面的組件。

         Props - 簡單來說就是渲染頁面動態數據的。例如綁定動態內容等。

         在TypeScript中如何實現呢？這裏必須要看看react.d.ts。
         

         這裏就可以看到，當我們使用React.Component時必須要把你的Props和State定義好帶進去。我一般定義的習慣如下：
         
         注意事項
         a. 如上圖，你構建的Order組件，必須是tsx爲後序，否則你是不可能用TS編譯它，

         b. 在構造函數中需要帶上以Props相關的參數，而State是不需要的

         3. 運行週期

         你必須熟悉React的生命週期，如下圖：
         
       這裏要切記，你的State變化後必須在componentDidMount方法，也只有在這個方法裏觸發Re-render,大家可以參照下面的方法做一個測試，在Chrome的控制檯就可以看到執行的順序了。

/// <reference path="typings/react/react-global.d.ts" />




interface ReactProps  {
  elapsed : any;
}

interface ReactState {
   list : any ;  
}

function ChangeState(): ReactState {
  return {
    list: []
  };
}



class Hi extends React.Component<ReactProps,ReactState> {
  
  public state : ReactState ;
  
  constructor(props : ReactProps){
    super(props);
  }
  
  public componentWillMount(){
    console.log('componentWillMount');
  }
  
  public componentDidMount(){
    console.log('componentDidMount');
    this.setState(ChangeState());
  }
  public render(){
    
    console.log('render');
        var elapsed = Math.round(this.props.elapsed  / 100);
      return <div>{elapsed}</div>;
  }
}

function render(){
    ReactDOM.render(
        <Hi elapsed = {100} />,
        document.getElementById('container')
    );
}

render();

           今天就說到這裏，如果大家有問題，可以留言給我。