React 18 Beta、React Location、wrangler 2 隆重发布！
共 2871字，需浏览 6分钟
·
2021-11-28 21:03
这是 「MDH：前端周刊」 第 0029 期，发表于：2021/11/22。本期刊开源（GitHub: sorrycc/weekly），欢迎 issue 区投稿，推荐或自荐项目。
封面图：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/
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/
摘要，
无需配置，只要一个 JavaScript 即可上手 Cloudflare Workers
支持在 Chrome Devtool 里调试 Worker
支持本地调试，基于 Miniflare
Fruition
https://fruitionsite.com/
快速基于 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 。
webpack 5 15x slower
https://engineering.tines.com/blog/understanding-why-our-build-got-15x-slower-with-webpack
摘要，
通过 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，其他是通用的，摘要如下，
是否能跑？
他做了什么？
代码是否可读？
某个 component/hook 是否做太多？
某个 component/hook 是否有必要提取？
API 设计是否足够简单？
有测试吗？
测试有意义吗？
有考虑可访问性吗？
文档更新了吗？
补充几个，
是否有 Prop Drilling？
Component、Hooks 和 Props 的命名是否合适？
useEffect 的 dependency 是否合理？
🕒 订阅
本周刊每周一发布，同步更新在语雀 「mdh/weekly」 和微信公众号。
微信搜索 「云谦」 或者扫描二维码，即可订阅。
（完）
点击“在看”，与好友共享！