湖中剑 前端周刊 #16 | Web3和区块链、Remix开源、V8编译、GitHub年度报告、Taro适配鸿蒙、React动画

周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。

发布

Taro 3.5 canary 发布：支持适配 鸿蒙

https://mp.weixin.qq.com/s/Hud405mLileIEzHX3Z-ueQ

Next.js 强劲对手来了！💿 Remix 正式宣布开源

https://juejin.cn/post/7035952921208422436

📖 文章

为什么 Web3 与区块链有关

互联网迄今有两个阶段：Web 1.0 和 Web 2.0。

下一个阶段自然就是 Web 3.0（简称 Web3）。本文谈谈我对 Web3 的一些初步理解，它到底是什么。

https://mp.weixin.qq.com/s/3RijGDHfrjueFj8Yt7Y8oQ

React 轮播动画探索

我们的产品大大管它叫氛围气泡，在很多应用（淘宝、抖音、bilibili）的直播间场景都会有类似这样营造氛围感的组件，能够让你感知到其他用户在当前直播间的行为。

https://mp.weixin.qq.com/s/7maQP3LbIj_XZoHogfUIpA

100行代码实现React核心调度功能

想必大家都知道React有一套基于Fiber架构的调度系统。这套调度系统的基本功能包括：

• 更新有不同优先级
• 一次更新可能涉及多个组件的render，这些render可能分配到多个宏任务中执行（即时间切片）
• 高优先级更新会打断进行中的低优先级更新

本文会用100行代码实现这套调度系统，让你快速了解React的调度原理。

https://mp.weixin.qq.com/s/uuxHlanqyN2HneYOz7DMVw

LOOK 直播活动地图生成器方案

对于前端而言，与视觉稿打交道是必不可少的，因为我们需要对照着视觉稿来确定元素的位置、大小等信息。如果是比较简单的页面，手动调整每个元素所带来的工作量尚且可以接受；然而当视觉稿中素材数量较大时，手动调整每个元素便不再是个可以接受的策略了。

在最近的活动开发中，笔者就刚好碰到了这个问题。这次活动开发需要完成一款大富翁游戏，而作为一款大富翁游戏，地图自然是必不可少的。在整个地图中，有很多的不同种类的方格，如果一个个手动去调整位置，工作量是很大的。那么有没有一种方案能够帮助我们快速确定方格的位置和种类呢？下面便是笔者所采用的方法。

https://mp.weixin.qq.com/s/eyiW3mWfsvslAs3sv8jiJw

JS 的 6 种打断点的方式，你用过几种？

Debugger 是前端开发很重要的一个工具，它可以在我们关心的代码处断住，通过单步运行来理清逻辑。而 Debugger 用的好坏与断点打得好坏有直接的关系。

Chrome Devtools 和 VSCode 都提供了 Debugger，它们支持的打断点的方式有 6 种。

https://mp.weixin.qq.com/s/QpmxaUupr7xMrJnG3FEpZA

Webpack 实战系列一：正确使用 Sourcemap

Sourcemap 协议最初由 Google 设计并率先在 Closure Inspector 实现，它能够将经过压缩、混淆、合并的代码还原回未打包状态，帮助开发者在生产环境中精确定位问题发生的行列位置。

发展至今，Sourcemap 已广泛受 Webpack、Rollup、Babel、Less、Typescript、Chrome、Safari、VS Code 等工具支持。

https://mp.weixin.qq.com/s/-y35QBSIx2jMvG5dNklcPQ

V8 编译浅谈

本文是一个 V8 编译原理知识的介绍文章，旨在让大家感性的了解 JavaScript 在 V8 中的解析过程。本文主要的撰写流程如下：

• 解释器和编译器： 计算机编译原理的基础知识介绍
• V8 的编译原理： 基于计算机编译原理的知识，了解 V8 对于 JavaScript 的解析流程
• V8 的运行时表现： 结合 V8 的编译原理，实践 V8 在解析流程中的具体运行表现

https://juejin.cn/post/7041021350114230285

基于 Vite 搭建开发体验超级丝滑的 Vue3 组件库开发框架

我们这次就要来搭建这么一套体验超级丝滑的组件库开发框架。先上一个最终成果的例子，随后再一步一步地教大家去实现。

在线体验：https://jrainlau.github.io/MY-Kit/index.html#/components/Button

https://github.com/jrainlau/jrainlau.github.io/issues/35

🛠 工具、软件

Github Wrapped

年底了，你可以在 Github Wrapped 上看到自己的年度报告。

下图是我的：

https://wrapped.run/

---

周刊首发于GitHub，欢迎订阅：

我的周刊