周刊第 1 期：搬新家了

Published:

我为什么要写周刊

前几天特地写了篇文章来分享一下我为什么要办这个周刊：《我为什么要写周刊》。

我搬新家了

在去年《2021 年度总结》有提到，我曾有过一段开小电动车上班的时光，通勤时间极短，幸福感倍高，但由于公司地址搬迁，就再也没有享受过这样的日子了，即便后来跳槽到新公司，通勤时间缩短了一半，但也要 40 分钟左右的通勤时间，所以，在租房合同到期后，我决定搬到公司附近。

但搬家真的好累，而且广州这几天连续不断地下雨，心情也变得烦躁起来，搬家过程不太顺利，期间还遗漏了物品在楼下没带上车，幸好楼下的邻居平时关系比较好，愿意帮我保管，第二天又跑回去拿。

但从明天开始就可以享受极短通勤距离的好处，想想还是蛮开心的。

分享文章

一些我本周阅读过的好文章、以及我的总结和启发；非常建议你阅读原文，而不是只看这些摘要，毕竟一千个读者就有一千个哈姆雷特，而且我的理解可能是错误的。

我对 Svelte 的看法

原文地址：《我对 Svelte 的看法》 | Randy’s Blog

简单来说 Svelte 是一个在编译时实现了 Reactivity (反应式) 的框架。

如何不用 defineProperty 实现 Reactivity：

  1. 只要在每次赋值的时候，手动执行 update 方法
  2. Svelte 在编译阶段自动帮我们做了这件事
  3. Svelte 使用了一个 label 语法（$:），实现类似于 Vue 的 computed 功能。

Svelte 的跨组件通讯：

Svelte 所有功能都在编译阶段完成，并且可以写更少的代码，它相对于 React 和 Vue 更简单，不需要学太多额外的 API 和新语法。

目前的适用场景：

我的启发

学习一个框架或者一个语言，并不一定非要把它用到生产上才算真的有用。更多地是因为想看看在面对同一个问题的时候，不同的人解决问题的思路是怎样的，从而帮助我们提高自己的视野，这才是学习框架和语言真正的魅力。

Svelte 的异步更新实现原理

原文地址：《Svelte 的异步更新实现原理》 | Randy’s Blog

如何异步更新：将所有导致 UI 更新的操作统一放到一个微任务里执行。

Svelte 的实际做法：

  1. 一个组件会被编译成一个 fragment
  2. 更新操作通过 $$invalidate 包裹
  3. 触发 schedule_update() ，通知框架需要被更新，框架会维护一个 dirty_components 数组。
  4. 在微任务更新时会统一遍历 dirty_components 数组里的任务，触发组件的更新方法。

开发模式 “Development Mode” 是如何工作的？

原文地址：《开发模式 “Development Mode” 是如何工作的？》 | Dan Abramov

process.env.NODE_ENV 实际上是一个常量，在构建时会被替换成一个字符串，所以判断条件最终是：

// In development:
if ('development' !== 'production') { // true
  doSomethingDev(); // 👈
} else {
  doSomethingProd();
}

// In production:
if ('production' !== 'production') { // false
  doSomethingDev();
} else {
  doSomethingProd(); // 👈
}

以上判断条件会被「死码消除」给优化，不被执行的代码将被移除。

但是，如果写成这样，则不会奏效：

let mode = 'production';
if (mode !== 'production') {
  // 🔴 not guaranteed to be eliminated
}

因为 JavaScript 并没有智能到这种程度。

我的启发

以前看 Vue 源码的时候发现很多文件都会重复好几次这样的代码：

if (process.env.NODE_ENV !== "production") {
  if (something) {
    console.warn("something error message");
  }
}

非常好奇为什么不重构成这样：

// utils.js
const warn = (condition, message) => {
  if (process.env.NODE_ENV !== "production") {
    if (condition) {
      console.warn(message);
    }
  }
};

// something.js
warn(xxx, "something error message");

现在知道为什么了，因为前者被「死码消除」后，所有相关代码都会被移除，

而后者，相当于调用了一个空的 warn 方法。

但没想到在 Vue3 中已经这么做了：defaultOnWarn。

延伸阅读：高效实现框架和 JS 库瘦身

通俗易懂的代数效应

原文地址：《通俗易懂的代数效应》 | Dan Abramov

代数效应是什么：

React 中的代数效应：

防御性 CSS

原文地址：《防御性 CSS》 | ishadeed

  1. 确保 flex 布局能够换行
  2. 确保文字过长时的间距以及换行处理
  3. 防止图片被拉伸或压缩
  4. 弹窗锁定滚动
  5. CSS 变量回退
  6. 尽量使用 min-height 固定宽度和高度
  7. 确保重置 background-repeat
  8. 使用 gap 设置 flex 布局间距
  9. 给图片设置一个 background-color，以确保图片上方的文字能够正常显示
  10. 使用 overflow: auto
  11. 图片 object-fit: cover
  12. 分组选择器只要有一个无效，则所有选择器不生效
我的启发

了解常用的防御性 CSS，可以避免很多开发中没有意识到的问题。

SSR、SSG、ISR、DPR 有什么区别？

原文地址：《SSR、SSG、ISR、DPR 有什么区别？》 | 前端里

不优雅的 React Hooks

原文地址：《不优雅的 React Hooks》 | 蚂蚁 RichLab 前端团队

「奇怪的」规矩：

有缺陷的生命周期：

useCallback：

小结：

DevTools 实现原理

原文地址：《DevTools 实现原理》 | vivo 互联网浏览器内核团队

DevTools 架构：

内核实现

有趣的链接

作者 : 4Ark

地址 : https://4ark.me/post/weekly-01.html/

来源 : https://4ark.me

著作权归作者所有，转载请联系作者获得授权。