IT工程師數位筆記本

公司前端部分需要用react重寫，于是這個任務就落在我的頭上。

首先需要安裝node.js，然后改registry到淘寶鏡像

1.看官方Installation文檔時出現一個不太懂的概念:build pipeline，查閱資料后如下：

　　build pipeline:

2.react的State那一章節,定期修改時間需用setState方法，用=賦值無效。個人猜測應該是react的監聽機制的原因

　　因為react通過setState方法知道state發生了變化，會重新調用render()方法重新渲染，因而頁面發生變化 。

      ReactComponent.js 61 line:

ReactComponent.prototype.setState = function (partialState, callback) {
  !(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) 
　　? process.env.NODE_ENV !== 'production' 
　　? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') 
　　: _prodInvariant('85') 
　　: void 0;
  this.updater.enqueueSetState(this, partialState);
  if (callback) {
    this.updater.enqueueCallback(this, callback, 'setState');
  }
};

3.通過官方給的npm start方式運行react的demo，發現我修改代碼之后瀏覽器會自動刷新。很666的方式啊！

　　找了個自動刷新的博文：　　http://www.cnblogs.com/axl234/p/5613922.html

　　　　　　　　　　　　　　　http://www.jianshu.com/p/7280d799f56d

　　這里的實現方式應該是通過websocket通知前段的js代碼重新渲染頁面，具體待驗證。

4. JSX的callback中的this需要特別對待,這其實是JS范圍內的問題. callback 中this的上下文問題

      主要是Class中的方法不自動綁定this,需要自己bind

5. React的數據流是單向綁定，遇到需要同步的問題時，解決辦法是lift state up.運用回調函數callback

    實現方式是將修改State的回調方法在父級Component定義傳給子級的。

    通過function的up-down flow傳遞實現down-up 的狀態改變， 很巧妙。

5.5 如果有down-up的需要，可以通過ref屬性加到React element或Html上

6. 在React中組件并不是真實的 DOM 節點，而是存在于內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。

　　只有當它插入文檔以后，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發

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

7. Css預編譯： 一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要

　　使用這種語言進行編碼工作。

8. es6 spread operator ... 實現機制：(先占個坑)

9. react.js只涉及UI部分，異步需要借助Fetch。提交參數時, body:"name=admin&password=admin123”不可行，

　　因為Fetch沒有提供自動轉為FormData的功能，要自己new 一個FormData.

　　Fetch實現跨域請求與POST方式參數提交