2019獨角獸企業重金招聘Python工程師標準>>>

我先前有一些前端接觸，html/css/js語言基礎具備，也接觸過Node.js /AnjularJS,不過因為從來沒系統地學習過，前端技術豐富且更新快，我自己感覺一直遊離在專業前端開發之外。現在，打算好好學習一下前端技術。

##原則

1. 選擇活躍度最大／最貼近工作需求的技術入手；
2. 某階段內只專注學習一門技術，其他相關技術按需瞭解；
3. 快速開發，不斷迭代專案；

##React學習 學習王沛老師的React專欄文章，遇到不明白的自己搜尋，很多知識可以從阮一峰的網路日誌上找到。

###一 React的設計哲學 - 簡單之

1. React是面向MVC中的View的框架；
2. 基於Virtual DOM和DOM Diff技術，可以實現瀏覽器端的“全頁面重新整理”；
3. 簡化的元件模型：所謂元件，其實就是狀態機器；

###二 React開發神器Webpack

1. 對專案中的靜態資源進行統一管理，為產品的最終釋出提供最優的打包部署方案；
2. 同時支援CommonJS和AMD模組（對於新專案，推薦直接使用CommonJS）；
3. source map:就是一個資訊檔案，裡面儲存著位置資訊。也就是說，轉換後的程式碼的每一個位置，所對應的轉換前的位置；
4. 模組載入器（Loaders）在一定程度上可以代替Css Sprites（用一張圖片代替多張圖片來節省開銷和減少http請求）
5. react-hot-loader
   ：輕鬆實現React元件的熱替換；
6. 打包成多個資原始檔兩個目的：
   • 將多個頁面的公用模組獨立打包，從而可以利用瀏覽器快取機制來提高頁面載入效率；
   • 減少頁面初次載入時間，只有當某功能被用到時，才去動態的載入；
7. 栗子專案

###三 理解JSX和元件

1. React模擬事件系統：React並不會真正的繫結事件到每一個具體的元素上，而是採用事件代理的模式：在根節點document上為每種事件新增唯一的Listener，然後通過事件的target找到真實的觸發元素；
2. 在JSX中使用樣式：通過style屬性來定義，但和真實DOM不同的是，屬性值不能是字串而必須為物件；
3. 基本上屬性名的轉換規範就是將其寫成駝峰寫法；
4. 對於自定義元件，唯一必須實現的方法就是render()，除此之外，還有一些方法會在元件生命週期中被呼叫，如下圖所示:
   • componentDidMount: 在元件第一次render之後呼叫，這時元件對應的DOM節點已被加入到瀏覽器。在這個方法裡可以去實現一些初始化邏輯；
   • componentWillUnmount: 在DOM節點移除之後被呼叫，這裡可以做一些相關的清理工作；
   • shouldComponentUpdate: 這是一個和效能非常相關的方法，在每一次render方法之前被呼叫。它提供了一個機會讓你決定是否要對元件進行實際的render；

###四 虛擬DOM Diff演算法解析

1. 對於列表節點提供唯一的key屬性可以幫助React定位到正確的節點進行比較，從而大幅減少DOM操作次數，提高了效能;

###五 使用Flux搭建React應用程式架構

1. 單向資料流
2. Object.assign() 複製物件所有可列舉的屬性到目標。

轉載於:https://my.oschina.net/chicboi/blog/602058