前端技術週刊 2018-07-16：React 小輯

前端快爆

• 最近有國外大牛把 Vim 移植到了 WebAssembly，從而能夠在瀏覽器裏面使用性能更好的 Vim 了。🔗

> 點評：WebAssembly 潛能無限。

• Chrome 69 開始支持 AV1 視頻編碼格式，<span data-type="color" style="color:rgb(26, 26, 26)"><span data-type="background" style="background-color:rgb(255, 255, 255)">它的定位是取代 Google 的 VP9 並與如今的 HEVC 標準競爭。雖然最初的AV1 實現將吸取 Daala 和 Thor 的一些特點，可是它的大部分代碼來自於 VP10，其目標是使 AV1 的壓縮性能比 VP9/HEVC 提升50%。此前 </span></span>Firefox 55<span data-type="color" style="color:rgb(26, 26, 26)"><span data-type="background" style="background-color:rgb(255, 255, 255)"> 已經率先支持，不過須要開啓 </span></span>media.av1.enabled<span data-type="color" style="color:rgb(26, 26, 26)"><span data-type="background" style="background-color:rgb(255, 255, 255)"> flag</span></span>。🔗

  點評：不用擔憂視頻源，自家親兒子 YouTube 應該很快就會全面部署了。

• 好消息，CSS 原生嵌套語法即將歸入規範。CSS WG 近日決定把 Tab Atkins 提出的 CSS Nesting Module Level 3 添加爲編輯草案（Editor’s Draft）。🔗

> 點評：它強任它強，我用 Sass 來翱翔，詳見文章：[《不用預編譯，CSS 直接寫嵌套的日子就要到了》](https://github.com/anjia/blog/issues/1)。

• 7月12日，eslint-scope 做者的 npm 帳號被攻擊者登陸併發布了版本 3.7.2，並利用 postinstall 腳本嘗試獲取更多用戶的 npm access token。此包影響了大概 4500 個 npm 用戶的帳號，此後 npm 取消了這些帳號的 access token，並建議開發者們啓用兩步校驗功能。更詳細的報告見此。 🔗

  點評：屋漏偏逢連夜雨，npm 也是多事之秋。

優秀 Demo

• 動畫切換預覽效果

• Canvas 實現的 3D 幾何圖形

專題：React 小輯

本期由與 React 搏鬥極長時間的健美前端、社區紅人 @霍雍 帶來的 React 小輯。React 龐大的生態鏈總讓咱們頭暈、眼花、手心冒汗，而它爲所欲爲的用法則讓人擔心項目的維護成本和技術債務，來看看過來人是怎麼爲咱們配齊清熱解毒、清涼止咳的藥方吧：）

• Microsoft 給的 Typescript React Starter Pack

霍雍：對於新手來講，React + Redux 最困難的就是拆分獲得處都是的reducer、state、action、effects……稍不留神，就會埋下 bug。而 TypeScript 基本掃清了全部可預見的低級錯誤，類型不對？參數不對？在編譯階段就能夠發現，大大提高了高複雜度React項目的開發體驗。TypeScript 的強類型與 React 的高複雜度組件化簡直能夠完美的配合，有了 TypeScript，再也不須要 prop-types，TypeScript 自然的支持類型定義。讓 React 組件的書寫和重構方便到極致。

• TypeScript + React + Redux 全面的 Guide

霍雍：TypeScript 官網的例子，只能用簡單和簡陋來形容。這裏是一篇最全面的TypeScript Guide！

• Redux-saga 健壯的異步處理神器 & repo

霍雍：redux-thunk 做爲入門級的 side effects 處理框架，簡單易用，但也問題重重。對於複雜的業務開發，小編推薦 redux-saga，它用來實現可測試可隨時取消的異步過程及更好的異常處理。redux-saga 上手確實須要花費一些時間，可是和 RxJS 比起來，其實還算簡單。官網也很是清晰和完善，推薦之。

• Redux 數據計算緩存層 Reselect & repo

霍雍：高複雜度的狀態樹計算可能產生效率問題，而 Reselect 提供了很是方便的接口實現了：計算衍生數據計算，讓Redux存儲儘量少的狀態；自動緩存狀態計算，參數不變，結果不須要重算；可組合，不一樣的選擇器 (Selector) 之間相互做爲輸入，增長了靈活性。

• Redux 搭配 Normalizr 構建低空間佔用的數據 & repo

霍雍：複雜的業務需求中，常常會存在大量嵌套的 JSON。例如在返回的數據中，屬性 aList 和 bList 均可能會引用到相同的實體。爲了保證高效的數據傳輸和操做，咱們須要將冗餘數據處理成惟一的 id -> entity 的鍵值對，而normalizr 能夠幫助咱們整理複雜的嵌套對象，將全部的實體替換成對應的 id。對於傳輸效率以及處理，都很是的方便。快來了解一下上萬 stars 的結構神器吧，該項目做爲 redux 官方推薦的工具，但又不僅適用於 redux。

• Fetch API 封裝之 redux-api-middleware & repo

霍雍：咱們須要大量書寫的每個接口請求，都逃不掉 request、success、failure 「吉祥三寶」的折磨。而 redux-api-middleware 是對 ajax 的封裝，提供了大量的配置定製。我的在一些業務項目中使用 redux-api-middleware 大大簡化了 API 調用的工做。你還在本身寫一大堆的 fetch 和 actions 嗎？快來看看吧。

---

本期編輯：@壹絲，審閱：@承虎(humphry)，專題供稿：@霍雍