前端技術週刊 2019-03-25：React Hooks

時間 2019-11-06

標籤前端技術週刊 react hooks 欄目 React 简体版

原文原文鏈接

2019-03-25

前端快爆

V8 7.4 發佈。此版本支持了 JIT-less 啓動模式、WebAssembly Threads 以及私有類成員屬性語法 #field，並優化了函數形參實參數不匹配、原生訪問器讀寫、流式解析等場景的性能表現。🔗

點評：Chrome 74 將帶着 V8 7.4 內核一塊兒正式發佈，這麼難看的語法已經快要被正式支持了

Chrome 74 起，將試驗性支持 kv-storage 做爲一個標準庫。標準庫提案旨在提供不用下載便可使用的二方庫，而 kv-storage 則旨在爲 IndexedDB 提供簡單的 kv 讀取接口。🔗

點評：標準庫提案是一個爭議較大的提案，你們是否是以爲 std:jquery 和 std:lodash 更加劇要？如今的搞法更像是 BOM 的模塊化實現。

[decorator ]() 提案再次大改，如今版本的 decorator 將提供 4 個基礎方法函數 @wrap, @register, @expose 和 @initialize，並支持 decorator 的直接導入導出如 export decorator @logged。🔗

點評：不知道依賴 decorator 的那些庫睡覺睡得踏實嗎

百寶箱

React Redux 發佈了 7.0.0-beta 版本，在其中實現了 useRedux 接口，並解決了其 v6 版本帶來的數據更新遍歷 Provider 全部子樹節點的性能問題。🔗

點評：爲嘛不在 6.0 就提供了 Hooks 版本呢，緣由在下面的專題部分有講

iodide 是 mozilla 提供的一個經過書寫文檔生成可視化網頁的系統。🔗

點評：爲何看起來這麼像是 markdown 版本的 jsbin

Handtrackjs 是一款前端進行實時手勢識別的庫，基於 Tensorflow.js 並封裝了訓練數據。🔗
React-Router 5 已經發布，Route 支持 array 做爲 path 輸入值了。🔗

點評：不過仍是不支持 hooks

專題：React Hooks

React 一直在尋找更加貼合 UI 開發過程的心智模型，React Hooks 是他們最新的思路。編程方式的巨大變化下，已有的需求須要經過 React Hooks 從新解決。在 React Hooks 正式發佈一個半月之後，咱們將進行簡單的回顧。javascript

簡述

Hooks API

官方文檔

React Hooks 簡述

對 React Hooks 要解決的問題、使用方式、帶來的好處作了簡要介紹

議 Function Component 與 Hooks

簡述了 Function Component + Hooks 怎樣替代掉 Class Component

Function Component 和 Class Component 的區別

經過具體需求的例子，描述了 Function Component 和 Class Component 開發過程當中主要的心智模型區別

實踐

useHooks

React Hooks 實踐集錦站點，收集了不少易懂的 React Hooks 實現方式

怎麼用 React Hooks 造輪子

對 React Hooks 的社區輪子進行了有效的分類，包括 DOM 反作用、動畫、請求、表單、生命週期模擬、數據存儲和原有庫封裝

前文比較了定時器需求中的 useState、 useEffect、 useReducer 和 useRef 的四種實現方式，正好遍歷了主要的 React Hooks API。後文講述了另外一個定時器需求，比較了 useEffect、 useLayoutEffect 和 useReducer 三種實現，解釋了爲什麼異步的 useEffect 會致使閉包變量讀取問題