聊聊前端框架——尤雨溪

框架選擇

• 結合場景需求
• 與開發者我的背景有關
• 不如讓不一樣場景，不一樣開發者都變得更有效，所以多種方案並存是有益的

組件

早期開發是以頁面爲單位，而如今更趨向於應用，應用則意味着組件化；而React揭示了一個事實，組件樹是一個函數

分類

• 接入型 container
• 展現型
• 交互型 好比各種增強版的表單組件，一般強調複用
• 功能型 好比 <router-view>，<transition>，做爲一種擴展、抽象機制存在。

模版與jsx的對比

• jsx：擁有js徹底的靈活度，對於功能性組件的書寫遠超模版
• 模版：強制性的要求在減小視圖中的邏輯，以更加視圖化的方式思考

collocation

相關的資源（js,css之類）以組件做切分，管理；而傳統的作法是按文件類型維護

變化偵測

• pull（粗粒度）

  react與angular，須要手動告知有變化發生，以後它們會進行「暴力的」比對（react的diff，angular的髒檢查），來找到哪裏有變化；所以react中有pure component一類的東西來由用戶幫助系統跳過一些比對

• push（細粒度）

  由’watcher’主動告知哪裏發生變更，相應的會帶來額外的內存開銷。所以vue2.0採用組件push，內部pull（virtual dom比對）的策略

偵測成本與自動優化的平衡取捨

狀態管理

從源事件——>狀態的遷移——>狀態的改變——>ui的更新

e.g. 鼠標點擊——>應用狀態改變——>ui改變

redux與mobx與vue？

問題

• 異步的管理
• 局部狀態與全局狀態的管理

路由

以組件做爲路由映射的基本元素

url可理解爲序列化的狀態

React-router4將路由去中心化，用組件自己做爲路由，而非是以往的集中式管理。但這對於理解路由的結構；管理路由跳轉有一些問題

web路由與應用路由區別

web路由方案，相對於應用路由，在跳轉中狀態被丟棄，而非是一層層的疊加狀態

css方案

主流的 CSS 方案

• 跟 JS 徹底解耦，靠預處理器和好比 BEM 這樣的規範來保持可維護性，偏傳統
• CSS Modules，依然是 CSS，可是經過編譯來避免 CSS 類名的全局衝突
• 各種 CSS-in-JS 方案，React 社區爲表明，比較激進
• Vue 的單文件組件 CSS，或是 Angular 的組件 CSS（寫在裝飾器裏面），一種比較折中的方案

傳統 css 的一些問題

1. 做用域 —— 幾種解決方案已經基本ok
2. Critical CSS —— 對於服務端渲染尤其重要，所以須要在服務端偵測到頁面用到了哪些css，vue能夠在編譯時將css插入與組件的生命週期掛鉤，而css in js
3. Atomic CSS（原子類）—— 優勢，css體積小，不過由靜態編譯去進行這種處理也徹底可行
4. 分發複用
5. 跨平臺複用

原文連接:

http://b-sirius.me/2018/01/29/%E8%81%8A%E8%81%8A%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/