蒲公英 · JELLY技術周刊 Vol.17

React Hooks 相信大家都不陌生，自被設計出以來就備受好評，在很多場景中都有極高的使用率，其中原理更是很多大廠面試中的必考題，很多朋友都能夠如數家珍。那麼如何去用實作一個簡單的 React Hooks 呢？或許大家都有各自的想法，但也不妨來看看文中所述的方案是如何建構的。

登高遠眺

天高地迥，覺宇宙之無窮

基礎技術

2020 Chrome DevTools 的新特性介紹

作為前端開發，與 Chrome 打交道是家常便飯，我們有必要了解 Chrome 調試工具的更新疊代，對日常開發和調試帶來哪些幫助和改善。新 Chrome DevTools 內建了 lighthouse，并且在元素審查面闆和性能面闆都有一定程度的優化，本文還提供了相關特性的視訊示範，非常易于了解學習。

浏覽器的任務、微任務、隊列和排程

浏覽器裡的事件循環（Event Loop）一直都是一個老生常談的話題，社群裡各種文章和資料也不少，但是你真的清楚事件循環裡面的 tasks、microtasks、queues 這些概念以及他們的排程關系嗎？本文是 Google Chrome 的開發人員 Jake Archibald 撰寫的一篇部落格，内容深入淺出，在任務排程及 JS 棧的部分還細心的繪制了 CSS 互動動畫，最後還探讨了不同浏覽器的差異以及相關規範的定義，非常值得一讀。

Node.js 記憶體洩漏指南

由于 Javascript 采取了基于垃圾回收機制的記憶體管理方式，是以開發人員一般不會關注記憶體的配置設定和釋放，但在開發過程中稍不注意就可能造成嚴重的記憶體洩漏。本文解釋了 Javascript 的垃圾回收機制，列舉實際例子介紹 Node 服務中的記憶體洩漏場景，并且重點講述了如何利用 heapdump 和 chrome devtools 來精準定位線上服務的記憶體洩漏位置，對于 Node 服務的性能優化有參考意義。

前端架構

仿照 React 源碼流程打造 90 行代碼的 Hooks

作者通過模拟 React 的資料結構與工作流程，來使用精簡的代碼實作出 useState Hook。學懂本文的剖析和對應的源碼後再去看 React Hooks 的源碼部分，能更加容易的了解。如果你隻是簡單使用過 Hooks 或還沒了解過 Hooks，閱讀本文是一個很好的學習機會。

圖形程式設計

使用 web worker 驅動 webGL 渲染

介紹透過 OffscreenCanvas API，實作 web worker 驅動 webGL 渲染。把更新渲染的邏輯分到主線程之外能有效減少 js 執行導緻的頁面響應阻塞。文中提供了一個 demo 的對比資料。

工具推介

PolyK - 用 Javascript 編寫的多邊形庫

PloyK.js 提供了多個函數來幫助你更輕松的處理多邊形，搭配一些實體引擎也可以做出一些有趣的效果，例如下面這個使用 phaser+matter.js 的 demo，基于 ployk.js 庫可以用很少的代碼實作物體的切片，這可能可以給你開發 H5 遊戲帶來一些新的想法。

滄海拾遺

滄海拾遺，積跬步以至千裡

Nerv - 類 React 元件架構

當我們在前端領域不斷向上攀爬的過程中，随着對 React 這一類架構的不斷深入了解，大腦中總是會冒出一個這樣的想法：“我也能實作一個像是 React 這樣的架構”，Nerv 就是在京東這樣想法就的落地實作，相信通過 Nerv，你會對 React 有不一樣的了解。

在小程式中使用 React Hooks

如果選擇 React 來開發小程式，相信你對于 Taro 多少有一定的了解，或許你現在正在通過 Taro 3.x 在小程式平台中按自己的意願建構想要的小程式。但是回顧 Taro 發展的過程中，支援 Hooks 也曾是需要針對性優化的特性之一，通過這些特性實作的思考，對自身技術的提升大有裨益。

「蒲公英」期刊，每周更新，我們專注于挖掘「基礎技術、工程化、跨端架構技術、圖形程式設計、服務端開發、桌面開發、人工智能、設計哲學、前端架構」等多個大方向的業界熱點，并加以專業的解讀；不僅如此，我們還會推介精選凹凸技術文章，向大家呈現團隊内的研究技術方向。

擡頭仰望，蒲公英的種子會生根發芽，如夏花絢爛；格物緻知，我們登高遠眺、滄海拾遺，以求積矽步而至千裡。

蒲公英 · JELLY技術周刊貢獻指南