Tooling
- Chrome Dev Tools:DOM inspect & JS debugger: Chrome Dev Tools算是最為優(yōu)秀的調(diào)試工具了，F(xiàn)irefox也有很多不錯的擴展。
- npm: 官方開源的JavaScript包管理工具。
- git** & Build software better, togetherGitHub:** 分布式版本管理系統(tǒng)，很適合團隊協(xié)作。
- Babel: 能夠?qū)S6代碼編譯到ES5使之能夠兼容老版本瀏覽器。
- Webpack: 最著名的模塊打包工具之一，有不少優(yōu)秀的模板配置奧，譬如Webpack2-React-Redux-Boilerplate。
- Atom, VSCode, or WebStorm** + Vim Cheat Sheet - Englishvim:** 你需要為自己選擇合適的編輯器來輔助你快速開發(fā)。Atom與VSCode都是非常優(yōu)秀的JavaScript編輯器，WebStorm也不錯但是它是收費版本。如果你打算直接在服務端開發(fā)的話，Vim是個不錯的選擇。
- ESLint: ESLint能夠幫助開發(fā)者更快地發(fā)現(xiàn)語法錯誤與樣式問題，在Code Review與TDD之后這是個不錯的減少Bug的方法。
- Tern.js: 基于編輯器插件的標準JavaScript類型推導工具，不需要任何編譯步驟或者注解支持。
- Yarn*: 類似于NPM的工具，不過安裝起來更為可靠快速。
- TypeScript*: JavaScript的靜態(tài)類型支持，不過需要特別注意的是，除非你在學習Angular 2，不然我覺得你如果要選用Angular 2的話還是要慎重考慮。我個人很喜歡TypeScript，也很欽佩他們團隊的優(yōu)秀工作，不過任然有很多的權(quán)衡，可以參閱 “The Shocking Secret About Static Types” & “You Might Not Need TypeScript”.
- Flow*: JavaScript靜態(tài)類型檢測工具，可以閱讀 “TypeScript vs Flow” 來對于這二者有個大概的了解，如果你打算Flow的話也是推薦我的編輯器Nuclide。
React
React 是個專注于構(gòu)建用戶視圖層的JavaScript庫，其基于單向數(shù)據(jù)流的設計思想，也就意味著：
- React 以Props的形式將參數(shù)傳入Components，并且在數(shù)據(jù)發(fā)生變化的時候選擇性重渲染部分DOM。在重渲染階段發(fā)生的數(shù)據(jù)變化并不會立刻觸發(fā)重渲染，而是在下一個繪制階段的時候才會進行重渲染。
- 渲染完畢之后，就進入了事件處理，React使用特殊的合成事件幫助開發(fā)者監(jiān)聽與響應事件，將所有的節(jié)點上的事件交托單一事件監(jiān)聽器處理以獲得更好的性能體驗。你可以在這些事件的監(jiān)聽函數(shù)中通過外部傳入的回調(diào)重新設置Props或者直接修改內(nèi)部State。
- 對于數(shù)據(jù)的任何變化都會重復步驟1。
這種單向數(shù)據(jù)流與當時以Angular 1 / Knockout為代表的雙向數(shù)據(jù)綁定形成對比，雙向數(shù)據(jù)綁定中如果發(fā)現(xiàn)綁定的數(shù)據(jù)發(fā)生變化則會立刻觸發(fā)重渲染，而無論當前是否處于渲染流程中，這一點也就導致了Reflows與Repaints的性能表現(xiàn)非常差。React并沒有預置專門的數(shù)據(jù)管理系統(tǒng)，不過官方推薦基于Flux的解決方案。React 的單向數(shù)據(jù)流的概念借鑒了很多函數(shù)式編程的設計思想，并且對于不可變數(shù)據(jù)結(jié)構(gòu)的應用也在很大程度上改變了我們對前端框架的認識。如果你希望了解更多關于React與Flux架構(gòu)的知識，推薦閱讀 “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”。