React 18 Beta、React Location、wrangler 2 隆重發(fā)布！
這是 「MDH：前端周刊」 第 0029 期，發(fā)表于：2021/11/22。本期刊開源（GitHub: sorrycc/weekly），歡迎 issue 區(qū)投稿，推薦或自薦項(xiàng)目。
封面圖：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
摘要，
正式版還要數(shù)月
Beta 版引入三個新 API，useSyncExternalStore、useId 和 useInsertionEffect
目前是 feature complete 階段，正式版前不引入新功能
社區(qū)方面，Next.js、Gastby、React-Redux、Zustand、Apollo、Umi 4 等都會跟進(jìn)支持 React 18 Beta
React Location
https://react-location.tanstack.com/
react-router 終于有競品了。
摘要，
作者是 Tanner Linsley，同時(shí)也是 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 里調(diào)試 Worker
支持本地調(diào)試，基于?Miniflare
Fruition
https://fruitionsite.com/
快速基于 Cloudflare Workers 和 Notion 搭建網(wǎng)站，拋開賬號注冊和域名準(zhǔn)備，只要 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 項(xiàng)目，
用 esbuild 來編譯代碼，跑測試和跑腳本
用 esbuild-runner 來直接跑 typescript 代碼（注：esno 也可以）
用 tsc 來 type check 但不 emit，同時(shí)不需要?TypeScript 的?Project References?保持更新
用 yarn workspace 管理 monorepo（注：pnpm workspace 也可以）
用?ultra-runner?跑 monorepo 腳本
共享 eslint 和 jest 配置
關(guān)于 npm 包的工程化問題，大家可以期待 12 月發(fā)布的 father 3，由 dumi 作者操刀，以上功能均包含在內(nèi)，并且有更深入和系統(tǒng)的思考。
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?定位性能問題，找到最耗時(shí)的點(diǎn)
表面上看是 linaria 的問題，但本質(zhì)上是 webpack 5 在處理 webpack 4 兼容時(shí)引入 Symbol.IsConcatSpreadable 導(dǎo)致的問題
webpack 5.62 增加了?experiments.backCompat，可以通過設(shè)置為 false 禁用此類兼容，從而避免這個問題
No-Code
https://www.jotform.com/products/apps/e-book/
一本關(guān)于 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 設(shè)計(jì)是否足夠簡單？
有測試嗎？
測試有意義嗎？
有考慮可訪問性嗎？
文檔更新了嗎？
補(bǔ)充幾個，
是否有 Prop Drilling？
Component、Hooks 和 Props 的命名是否合適？
useEffect 的 dependency 是否合理？
?? 訂閱
本周刊每周一發(fā)布，同步更新在語雀?「mdh/weekly」?和微信公眾號。
微信搜索?「云謙」?或者掃描二維碼，即可訂閱。
（完）
點(diǎn)擊“在看”，與好友共享！