# 2020-08

![](https://p.ipic.vip/pxb3vn.jpg)

每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。

> 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。

## 2020-08

### 2020-08-26\[好文]

原文标题：《Under the hood of React’s hooks system》，这是一个讲 React Hook 的底层实现原理的文章，能够帮你更好的理解 hooks，写出更好的 hooks 代码。

比如 React 对各种 effect 做了位的标识，用于简化判断，文章也进行了讲解。以及 useState 实际上调用的就是 useReducer 等。

![](https://p.ipic.vip/mi7wkq.jpg)

原文链接：<https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba>

### 2020-08-25\[工具]

有时候大家会碰到网页不能复制（比如禁止转载）的情况，我们可以使用开发者工具来解决。而这个有点复杂。

这里推荐一个插件 Simple Allow Copy，只需轻轻一点即可随意复制网页内容。插件地址： <https://chrome.google.com/webstore/detail/simple-allow-copy/aefehdhdciieocakfobpaaolhipkcpgc>

![](https://p.ipic.vip/zdjccy.jpg)

没有科学的同学可以去我的公众号《力扣加加》 回复 Allow Copy 即可获取。

另外我打算之后再这里维护科学资料， 需要的自取 <https://github.com/azl397985856/cdn/blob/master/README.md>

### 2020-08-24\[好文]

这是一个讲 V8 内部实现原理的深度好文，主要讲了 V8 在对象访问方面做的优化，比如用到了 shape， IC（inline cache） 等，并且难得的是有大量图片，内容也层层递进，即使你没有基础也可以听懂一部分。

文章地址： <https://mathiasbynens.be/notes/shapes-ics>

### 2020-08-19\[工具]

我们可以将 TypeScript 编译成 JavaScript，我们也可以将 JavaScript + .d.ts 反编译成 TypeScript。 于是我一直思考， 有没有一种方法能够不依赖 .d.ts 直接将 JavaScript 转换为 TypeScript 项目呢？ 我觉得是可行的。 我们要做的无非就是动态类型推导，即根据值的分布情况（有可能值的分布满足正太分布？^\_^）推导变量的类型。 实际上这是个理想的情况。

不过八天前 Airbnb 发布的一个仓库 ts-migrate 则和我的想法类似，大家可以关注一下。

仓库主页：<https://github.com/airbnb/ts-migrate>

相关文章： <https://medium.com/airbnb-engineering/ts-migrate-a-tool-for-migrating-to-typescript-at-scale-cd23bfeb5cc>

### 2020-08-18\[好文]

你或许已经熟悉了 ESM 了，那 importmap 呢？

```js
// index.html

<script type="importmap">
{
  "imports": {
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}
</script>
```

如上代码什么意思？如果你还不知道，可以看下这个文章。还是一如既往的循序渐进的风格， 很适合新手阅读。

文章地址：<https://blog.logrocket.com/es-modules-in-browsers-with-import-maps/>

### 2020-08-17\[工具]

我们知道 deno 是基于 ESM 的，并且没有统一的包管理平台的。那如果你在使用 deno，并且想要用 npm 上的包怎么办？如果你想要用的 node 上的包是 ESM 格式的，可以通过一些 CDN 工具，比如 unpkg，比如：

```js
import throttle from https://unpkg.com/lodash@4.17.19/throttle.js
```

如果源码是 ESM，但是最终被编译成了别的模块语法。你可以直接用 URL 引用源码，比如：

```js
import throttle from "https://raw.githubusercontent.com/lodash/lodash/master/throttle.js";
```

而如果源码也是 commonjs 写的，那么你可以使用这个在线服务，可以帮助你无感知转换格式。使用方法：

```js
import lodash from "https://dev.jspm.io/lodash";
```

工具地址： <https://jspm.org/>

### 2020-08-10\[好文]

手把手教你自建图床。

文章地址： <https://sspai.com/post/61624>

> 除了使用 OSS+ CDN 的方式，我们也可以选择白嫖 Github。使用全免费方案：用 github 做图床，jsDelivr 做 cdn 加速。在 GitHub 上开一个 public 的仓库，然后把图片传上去，访问的时候用 <https://cdn.jsdelivr.net/gh/\\>\<user\_name>/>repo\_name>/\<file\_name> 来访问就行。

### 2020-08-09\[好文]

这个是个将 Git Workflow 的文章，特点是讲解了多种 workflow 方式，包括主干式，feature 分支式等，并每一种都给了非常好看的配图。

![](https://p.ipic.vip/hlgy3g.jpg)

文章地址：<https://zepel.io/blog/5-git-workflows-to-improve-development/>

### 2020-08-08\[网站]

想学 Go 却不想装环境？或者装了环境，不想每次都新建文件，然后执行？这个在线 Go 执行网站或许可以帮到你。

地址：<https://play.studygolang.com/>

### 2020-08-07\[工具]

Tooling.Report 是一个帮助你从多个维度分析 web 打包工具的平台，包括 browserify，parcel，rollup，webpack。这个网站给的比较非常的直观，测试用例（每个比较维度都有很多测试用例）也很多。

![](https://p.ipic.vip/yto4jq.jpg)

地址：<https://bundlers.tooling.report/>

### 2020-08-06\[好文]

一个适合 JavaScript 程序员看的 Rust 系列教程，目前更新了三篇。

地址： <http://www.sheshbabu.com/posts/rust-for-javascript-developers-functions-and-control-flow/>

### 2020-08-05\[工具]

alinode 技术负责人开发的一个 高度模仿 alinode 的开源产品。和 alinode 的定位一样，也是企业级 Node.js 应用性能监控与线上故障定位解决方案。

![](https://p.ipic.vip/87ng0z.jpg)

Github 地址： <https://github.com/hyj1991/easy-monitor>

### 2020-08-04\[工具]

如果你需要给被人发一个消息，为了安全，你可以选择加密解密，也可以选择阅后即焚，这个工具就是做这个事情的。 不过这确实是一个尝鲜属性大于实用属性的一个工具。

地址：<https://pasteme.cn/>

### 2020-08-03\[工具]

bubblewrap 是 GoogleChromeLab 在 Google web 大会上推出的一个 CLI 工具，帮助开发者一键将 PWA 应用转化为可以上架的安卓应用，前提是你需要安卓他们的标准开发。

Github 地址： <https://github.com/GoogleChromeLabs/bubblewrap>

### 2020-08-02\[类库]

esbuild 是一个 JavaScript 和 TypeScript 打包和压缩器，采用 Go 语言编写，以速度快著称。著名的打包工具 snowpack 和 vite 底层就是用的它。

![](https://p.ipic.vip/jcztr0.jpg)

（esbuild 和 主流打包器的速度对比）

项目地址：<https://github.com/evanw/esbuild>

### 2020-08-01\[好文]

我们平时做单元测试都会将请求给 mock 掉，这本身没有问题，但是 mock 请求做的太简单的话会起不到测试的效果。比如，我请求 body 少传递一个属性， 单元测试是不会报错的，但是我们的想法肯定是能够检测到这种潜在的问题，报错给我们。这篇文章详细介绍了如何解决这个问题。

文章地址：<https://kentcdodds.com/blog/stop-mocking-fetch>

## 关注我

我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。

在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。

之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。

另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。

![](https://p.ipic.vip/bp35i7.jpg)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leetcode-solution-leetcode-pp.gitbook.io/mz-ri-yi-jm/2020-08.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.