这是 「MDH：前端周刊」 第 0029 期，发表于：2021/11/22。本期刊开源（GitHub: sorrycc/weekly），欢迎 issue 区投稿，推荐或自荐项目。
MDH 前端周刊第 29 期：React 18 Beta、React Location、wrangler 2 - 图2
封面图：joshuaearle @ unsplash。

❄️ TL;DR

👉 React 18 Beta
👉 React Location
👉 wrangler 2.0
👉 Fruition
👉 330 道 React 面试题
👉 monorepo + esbuild
👉 7 秒了解 async/await
👉 webpack 5 15x slower
👉 No-Code
👉 React Code Review 10 问

展开讲讲

React 18 Beta

https://github.com/reactwg/react-18/discussions/112

摘要，

  • 正式版还要数月
  • Beta 版引入三个新 API，useSyncExternalStore、useId 和 useInsertionEffect
  • 目前是 feature complete 阶段，正式版前不引入新功能
  • 社区方面，Next.js、Gastby、React-Redux、Zustand、Apollo、Umi 4 等都会跟进支持 React 18 Beta

React Location

https://react-location.tanstack.com/
MDH 前端周刊第 29 期：React 18 Beta、React Location、wrangler 2 - 图3
react-router 终于有竞品了。

摘要，

  • 作者是 Tanner Linsley，同时也是 React Query、React Table、React Charts 和 React Virtual 的作者
  • powerful, enterprise-grade routing for React applications

功能包含，

  • ⏳ Async Loaders & Elements
  • 🔀 Parallelized
  • ⏲️ Prefetching
  • 🗄 Caching
  • 🔎 1st-class Integrated Search Params API
  • 🗂 Code-Splitting
  • ⚠️ Error/Pending/Timing States
  • 🪆 Nested Layouts

详见 https://twitter.com/tannerlinsley/status/1460274803139510278

wrangler 2.0

https://blog.cloudflare.com/wrangler-v2-beta/
MDH 前端周刊第 29 期：React 18 Beta、React Location、wrangler 2 - 图4
摘要，

  • 无需配置，只要一个 JavaScript 即可上手 Cloudflare Workers
  • 支持在 Chrome Devtool 里调试 Worker
  • 支持本地调试，基于 Miniflare

Fruition

https://fruitionsite.com/
MDH 前端周刊第 29 期：React 18 Beta、React Location、wrangler 2 - 图5
快速基于 Cloudflare Workers 和 Notion 搭建网站，抛开账号注册和域名准备，只要 10 分钟。

330 道 React 面试题

https://dev.to/aviyel/300-react-interview-questions-4dag

作者整理了 300 道 React 面试题。300 道！注意拉倒下面可以下完整版的 PDF。

monorepo + esbuild

https://mmazzarolo.com/blog/2021-11-06-speed-up-your-typescript-monorepo-with-esbuild/

用 esbuild 和他的朋友们来加速 monorepo 流程，适用于 node 项目，

  • 用 esbuild 来编译代码，跑测试和跑脚本
  • 用 esbuild-runner 来直接跑 typescript 代码（注：esno 也可以）
  • 用 tsc 来 type check 但不 emit，同时不需要 TypeScript 的 Project References 保持更新
  • 用 yarn workspace 管理 monorepo（注：pnpm workspace 也可以）
  • 用 ultra-runner 跑 monorepo 脚本
  • 共享 eslint 和 jest 配置

关于 npm 包的工程化问题，大家可以期待 12 月发布的 father 3，由 dumi 作者操刀，以上功能均包含在内，并且有更深入和系统的思考。

7 秒了解 async/await

https://twitter.com/manekinekko/status/855824609299636230

从 callback 到 promise 到 async/await 。

MDH 前端周刊第 29 期：React 18 Beta、React Location、wrangler 2 - 图6

webpack 5 15x slower

https://engineering.tines.com/blog/understanding-why-our-build-got-15x-slower-with-webpack
MDH 前端周刊第 29 期：React 18 Beta、React Location、wrangler 2 - 图7
摘要，

  • 通过 node —inspect-brk ./node_modules/.bin/webpack 用 Chrome Devtool + Bottom Up View 定位性能问题，找到最耗时的点
  • 表面上看是 linaria 的问题，但本质上是 webpack 5 在处理 webpack 4 兼容时引入 Symbol.IsConcatSpreadable 导致的问题
  • webpack 5.62 增加了 experiments.backCompat，可以通过设置为 false 禁用此类兼容，从而避免这个问题

No-Code

https://www.jotform.com/products/apps/e-book/

一本关于 No Code 的电子书。

React Code Review 10 问

https://www.chakshunyu.com/blog/this-is-my-10-questions-react-code-reviewing-routine/

除了 5 和 6，其他是通用的，摘要如下，

  1. 是否能跑？
  2. 他做了什么？
  3. 代码是否可读？
  4. 某个 component/hook 是否做太多？
  5. 某个 component/hook 是否有必要提取？
  6. API 设计是否足够简单？
  7. 有测试吗？
  8. 测试有意义吗？
  9. 有考虑可访问性吗？
  10. 文档更新了吗？

补充几个，

  1. 是否有 Prop Drilling？
  2. Component、Hooks 和 Props 的命名是否合适？
  3. useEffect 的 dependency 是否合理？

🕒 订阅

本周刊每周一发布，同步更新在语雀 「mdh/weekly」 和微信公众号。
微信搜索 「云谦」 或者扫描二维码，即可订阅。

image.png

（完）