蒲公英 · JELLY技术周刊 Vol.17: 90 行代码实现 React Hooks

蒲公英 · 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技术周刊贡献指南

欢迎关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章：