React入門學習

詳情可參考：React 入門實例教程

使用React,js技術，需要導入3個包：

<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>

react是react的核心包

react-dom是提供與DOM相關的功能

browser作用是將JSX文件轉成JavaScript語法

$ babel src --out-dir build

可以將 src 子目錄的 js 文件進行語法轉換，轉碼後的文件全部放在 build 子目錄。

ReactDOM.render是將模板轉換爲HTML語言，並插入指定的DOM節點

ReactDOM.render(
  <h1>Hello, world!</h1>,   //模板文件
  document.getElementById('example')   //插入位置？
);

React解析遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。

JSX允許直接在模板中插入JavaScript變量，若這個變量時數組，則展開數組的所有成員。

組件：

React.createClass 方法就用於生成一個組件類

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

變量 HelloMessage 就是一個組件類。模板插入 <HelloMessage /> 時，會自動生成 HelloMessage 的一個實例（下文的"組件"都指組件類的實例）。所有組件類都必須有自己

的 render 方法，用於輸出組件。

注意，組件類的第一個字母必須大寫，否則會報錯，比如HelloMessage不能寫成helloMessage。另外，組件類只能包含一個頂層標籤，否則也會報錯。

組件的用法與原生的 HTML 標籤完全一致，可以任意加入屬性，比如 <HelloMessage name="John"> ，就是 HelloMessage 組件加入一個 name 屬性，值爲 John。組件的屬

性可以在組件類的 this.props 對象上獲取，比如 name 屬性就可以通過 this.props.name 讀取。

添加組件屬性，有一個地方需要注意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因爲 class 和 for 是 JavaScript 的保留字。

this.props.children

this.props 對象的屬性與組件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節點

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

這裏需要注意， this.props.children 的值有三種可能：如果當前組件沒有子節點，它就是 undefined ;如果有一個子節點，數據類型是 object ；如果有多個子節點，數據類型就

是 array 。所以，處理 this.props.children 的時候要小心。

React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節點，而不用擔心 this.props.children 的數據類型是 

undefined 還是 object。更多的 React.Children 的方法，請參考官方文檔。

propTypes:

組件的屬性可以接受任意值，字符串、對象、函數等等都可以。有時，我們需要一種機制，驗證別人使用組件時，提供的參數是否符合要求。

組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求

React.PropTypes.string.isRequired 表示該字段必須是String且不能爲空，不然會在控制檯報錯。

getDefaultProps 方法可以用來設置組件屬性的默認值。

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);

獲取真實的DOM節點：

組件並不是真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以後，纔會變成真實的 DOM 。根據 React 的設計，

所有的 DOM 變動，都先在虛擬 DOM 上發生，然後再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，它可以極大提高網頁的性能表現。

但是，有時需要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性

this.state

表單

組件的生命週期

Ajax