視頻地址： https://haoqicat.com/react-baby/1-react-show
第二版：https://haoqicat.com/react-baby-v2
其他教程：http://www.ruanyifeng.com/blog/2015/03/react.html

1. react 是用來寫UI的前端JS庫

2. 組件化:

• 獨立完成任務
• 組件要足夠小
• 不按技術類型分離，而要按功能模塊分離
• 對外接口要明晰

• 高內聚：完成一個功能的代碼盡量放到一個文件中
• 低耦合：我們的正常運行不依賴于其他組件

4. Bable is a JavaScript compiler
   (ES6, JSX)

5. 外來數據要流入 React 組件內部，props 屬性就是入口。

6. 由于箭頭函數中this的特殊性，所以在React.creatClass()中不要使用箭頭函數

7. React組件生命周期

   
   
   React組件生命周期.png

8. JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數組，則會展開這個數組的所有成員。

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

10. this.props.children 的值有三種可能：如果當前組件沒有子節點，它就是undefined;如果有一個子節點，數據類型是object；如果有多個子節點，數據類型就是array。所以，處理this.props.children的時候要小心。React 提供一個工具方法React.Children來處理this.props.children。我們可以用React.Children.map來遍歷子節點，而不用擔心this.props.children的數據類型是undefined還是object。

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

12. getDefaultProps & getInitialState
    由于 this.props 和 this.state 都用于描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產生變化的特性。

13. 獲取真實的DOM節點
    組件并不是真實的 DOM 節點，而是存在于內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以后，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發生，然后再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做DOM diff，它可以極大提高網頁的性能表現。但是，有時需要從組件獲取真實 DOM 的節點，這時就要用到ref屬性

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

上面代碼中，組件MyComponent的子節點有一個文本輸入框，用于獲取用戶的輸入。這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點，文本輸入框必須有一個ref屬性，然后this.refs.[refName]就會返回這個真實的 DOM 節點。需要注意的是，由于this.refs.[refName]屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定Click事件的回調函數，確保了只有等到真實 DOM 發生Click事件之后，才會讀取this.refs.[refName]屬性。React 組件支持很多事件，除了Click事件以外，還有KeyDown、Copy、Scroll等，完整的事件清單請查看官方文檔。

14. 表單
    用戶在表單填入的內容，屬于用戶跟組件的互動，所以不能用this.props讀取

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

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

上面代碼中，文本輸入框的值，不能用this.props.value讀取，而要定義一個onChange事件的回調函數，通過event.target.value讀取用戶輸入的值。textarea元素、select元素、radio元素都屬于這種情況，更多介紹請參考官方文檔。