HEADER

蒲公英 · 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技術周刊貢獻指南