React 實踐與性能（技術周刊 2018-02-02）

前端快爆

上新

• 一系列 ECMAScript 提案進入 stage 4 階段，這意味著相關語法將進入 ES2018 規範。它們包括：Promise.prototype.finally pr、對象解構{...obj} pr、正則逆向斷言(?<=...)及(?<!...) pr、正則p{…}形式 unicode 轉義 pr。

• Chrome 64 這次 DevTools 更新的主要內容包括：實時性能監控、控制台側邊欄、控制台消息自動分組。附贈視頻一枚。

justjavac：Chrome 64 - Whats New in DevToolszhuanlan.zhihu.com

• Blink 意圖實現 Picture-in-Picture（畫中畫規範），該規範可以在瀏覽器中彈出一個小窗口播放視頻。此前 Safari 已經實現了私有 API。

https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/U8Apo-WLBm4/03sO4ITYAQAJgroups.google.com

• 為了更好的幫助大家調試 CSS 布局，Firefox 已經推出了非常強大的 Grid 可視化調試工具，現在有意圖實現 Flexbox 的可視化調試。這裡有一個小調查，希望前端同學都填一下，幫助我們自己有更好用的調試工具。

Flexbox Inspector Top Tasksqsurvey.mozilla.com

• Vue Devtools 發布了 4.0 版本，新版本更新包括：可修改的組件數據，在編輯器中打開組件源文件，可直接在界面上右擊檢驗組件，可按組件過濾事件等功能。

https://medium.com/the-vue-point/whats-new-in-vue-devtools-4-0-9361e75e05d0medium.com

• 新興打包工具 Parcel 上線了一個大更新 1.5.0，提供了 SourceMap 支持、WebAssembly 支持、環境配置文件.env和更快的小項目編譯性能。

https://medium.com/@devongovett/parcel-v1-5-0-released-source-maps-webassembly-rust-and-more-3a6385e43b95medium.com

• dialog-polyfill 是由谷歌開源的，HTML 5.2 中定義的 dialog 元素的 polyfill。

GoogleChrome/dialog-polyfillgithub.com

數據

Rollbar 為我們帶來了很有趣的統計數據：JavaScript 監控到的異常的前十名，包括空引用系列異常：Cannot read property __ of undefined、undefined is not an object、null is not an object、undefined is not a function、Cannot read property length of undefined、Cannot set property __ of undefined、__ is not defined；跨域異常：Script error；IE專屬異常：Object doesn』t support property；溢出：Maximum call stack。

Rollbarrollbar.com

Blink 與 V8 團隊推出了 Speedometer 2.0 以衡量網頁在各框架下的響應時間。新版主要針對最近三年崛起的新庫 React、Vue 和 Ember 書寫了更新的用例，並覆蓋到了 Babel 編譯等場景。由此工具可以得到一些性能提升的結論，如 Chrome 更新了Function.prototype.bind的內部實現，使得 React 的 TodoMVC 應用響應性能提升了一倍多。

https://v8project.blogspot.jp/2018/01/speedometer-2.htmlv8project.blogspot.jp

專題：React

React 實踐

• React Component 的八個選擇

Cory House 分享了他在推特上進行的 React 開發相關的調查：開發環境大家更傾向於使用 create-react-app；類型限制更傾向於 prop-types；樣式方案少數人會採用 CSS Modules 或 CSS-in-JS 的方案。除此以外，文章作者針對各個選擇都有總結，包括createClass()還是 ES Class、State 選擇、this 綁定等。（牆外）

• 使用有限自動狀態機實現魯棒性強的 React UI

性能

• 針對 Airbnb 清單頁的 React 性能優化
• 如何大幅提升 React App 性能（牆外）

React Fiber

• React 16 Fiber 源碼速覽
• React Fiber 初探
• 完全理解 React Fiber

---

本期由不會耍賤的 humphry 編輯，由池冰校對，由龍笛審閱

推薦閱讀：