React設(shè)計(jì)哲學(xué)

• 編寫可預(yù)測(cè)，符合習(xí)慣的代碼：代碼簡(jiǎn)單易懂，易于維護(hù)
• 使用JSX直觀的定義用戶界面：傳統(tǒng)方式，即便V與M文件分離，其邏輯依然是緊密關(guān)聯(lián)的，所以干脆將它們文件上放到一起
• 簡(jiǎn)化的組件模型：所謂組件，其實(shí)就是狀態(tài)機(jī)器；除了狀態(tài)，組件還有屬性；UI與狀態(tài)絕對(duì)一致，修改UI僅僅修改狀態(tài)即可；
• 每一次界面變化都是整體刷新：簡(jiǎn)化UI更新邏輯，由framework負(fù)責(zé)實(shí)際高效局部刷新；
• 單向數(shù)據(jù)流動(dòng)：Flux，永遠(yuǎn)只有從模型到視圖的數(shù)據(jù)流動(dòng)
• 讓數(shù)據(jù)模型也變簡(jiǎn)單：Immutability
• React思想的衍生：React Native, React Canvas等等

React開發(fā)神器Webpack

• 同時(shí)支持CommonJS和AMD模塊
• 串聯(lián)式模塊加載器以及插件機(jī)制，讓其具有更好的靈活性和擴(kuò)展性
• 可以基于配置或者智能分析打包成多個(gè)文件，實(shí)現(xiàn)公共模塊或者按需加載
• 支持對(duì)CSS，圖片等資源進(jìn)行打包，從而無(wú)需借助Grunt或Gulp
• 開發(fā)時(shí)在內(nèi)存中完成打包，性能更快，完全可以支持開發(fā)過(guò)程的實(shí)時(shí)打包需求
• 對(duì)sourcemap有很好的支持，易于調(diào)試

理解JSX和組件

• JSX本身并不是什么高深的技術(shù)，可以說(shuō)只是一個(gè)比較高級(jí)但很直觀的語(yǔ)法糖
• 這種使用代碼構(gòu)建界面的方式，完全消除了業(yè)務(wù)邏輯和界面元素之間的隔閡，讓代碼更加直觀和易于維護(hù)
• JSX本身就和XML語(yǔ)法類似，可以定義屬性以及子元素，唯一特殊的是可以用大括號(hào)來(lái)加入JavaScript表達(dá)式
• React使用組件來(lái)封裝界面模塊，整個(gè)界面就是一個(gè)大組件，開發(fā)過(guò)程就是不斷優(yōu)化和拆分界面組件、構(gòu)造整個(gè)組件樹的過(guò)程
• 組件的props與state，前者類似于函數(shù)調(diào)用的參數(shù)，后者類似于函數(shù)內(nèi)部的局部變量
• 組件內(nèi)部不應(yīng)該修改props，組件外部也無(wú)法修改state，props表示那些一旦定義，就不再改變的特性，而state是會(huì)隨著用戶互動(dòng)而產(chǎn)生變化的特性
• 組件生命周期函數(shù)

http://wiki.jikexueyuan.com/project/notes/images/react_component_lifecycle.png" alt="react_component_lifecycle.png" />

• this.props.children與React.Children，前者包括所有的屬性，后者是react的一個(gè)API，處理了不同的情形，使得需要使用前者時(shí)不用考慮各種情況
• 使用propTypes來(lái)限定屬性的類型，使用getDefaultProps來(lái)設(shè)置屬性的默認(rèn)值，例如：

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

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

• 使用ref屬性，獲取真實(shí)DOM節(jié)點(diǎn)，必須等到虛擬 DOM 插入文檔以后，才能使用這個(gè)屬性：

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>
    );
  }
});

• 用戶在表單填入的內(nèi)容，屬于用戶跟組件的互動(dòng)，所以不能用this.props讀取，可以通過(guò)設(shè)置事件回調(diào)響應(yīng)輸入變化
• 組件的數(shù)據(jù)來(lái)源，通常是通過(guò) Ajax 請(qǐng)求從服務(wù)器獲取，可以使用 componentDidMount 方法設(shè)置 Ajax 請(qǐng)求，等到請(qǐng)求成功，再用 this.setState 方法重新渲染 UI