大家好!
又是一个忙碌的一周，发布了很多🤪Hydrogen1.0、Fresh 1.0、Next.js 12.2、React-Native 0.69...
本周必读：React官方下场，不支持通过useEffect来获取数据。
React
Deno正式支持的Preact框架现在是v1版，被认为是可以投入生产的。Fresh让我想起了Remix和Astro之间的混合体：默认没有JS，渐进式增强，多页面应用程序与islands architecture。没有构建步骤：你可以在几秒钟内直接将你的TypeScript/Deno应用部署到Edge上。
Hydrogen是Shopify用于构建电子商务商店的React元框架，刚刚发布了v1.0版本，是第一批依靠React服务器组件的框架之一。这篇文章是对该框架创建的一个有趣的反馈，详细介绍了随着时间推移所做的各种选择。React服务器组件、Vite、Tailwind、预加载/瀑布、GraphQL片段......
最新版本的Next.js。主要的主题是逐步采用Edge和标准化的网络API：middleware，但也有API路由和SSR。在图像方面也有改进，在WebAssembly中还有一个SWC插件系统。
My Wonderful HTML Email Workflow
Josh Comeau解释了他是如何用MDX编写邮件的，然后使用MJML、React和Next.js来创建最终的HTML输出，这些输出可以在所有的邮件客户端中使用，通过ConvertKit发送，也可以在网上使用。
React的初始模型可以概括为ui = f(state)。问题是，这个模型并没有真正考虑到网络同步（即API调用）。Jim解释了Remix如何采用React模型并包括网络，从而减少对本地状态管理的需求。
由Dan Abramov编写的新文档页，刚刚合并到测试版网站。存在与外部系统同步的效果。提出了许多反模式的具体例子，甚至是挑战。即使是有经验的开发者也应该阅读它。有些东西可能会让人吃惊：比如 在渲染时使用setState 😱。我特别喜欢useSyncExternalStore的例子。
What is the recommended way to load data for React 18?
Dan Abramov在Reddit上解释了为什么通过useEffect获取数据并不理想。然而，如果你的应用程序没有任何用户体验问题，就没有必要当场重写：这些问题在React 18中并不新鲜，只是有更好的记录。也请看关于React-Native数据获取的评论。
Extras:
- 📜 How to add a theme switcher to Storybook: shows how to leverage Storybook toolbar to add a theme switch. Convenient tip: displays component in both light/dark mode.
- 📜 React Query FAQs: Dominik from React-Query answers the 3 most common questions.
- 📜 The React core team finally have opinions about CSS: good summary of current trends: increasing use of no-runtime CSS-in-JS.
- 📜 Cut build times with Gatsby Runner: new experimental Netlify plugin to reduce Gatsby build time by delaying image processing.
- 📜 State Machines on the Edge + Modeling React in XState
- 📜 Demystifying The New Gatsby Framework
- 📜 Should we use Lexical to edit our legal graph?
- 🎥 Storybook in 100 Seconds
- 📈 Front-end frameworks popularity (React, Vue, Angular and Svelte)
- 📜 Verbum: text editor based on React and Lexical (new Facebook project to replace Draft.js)
- 📦 Storybook Variants Addon: convenient addon: add toolbar dropdown to display all variants of a story at once. No extra code needed: based on Controls.
- 📦 Create-T3-App: modern stack to start a project: Next.js, Prisma, TypeScript, tRPC, Tailwind...
- 📦 Gatsby 4.17: perf improvements
- 📦 Recoil Sync 0.1 + Refine 0.1
- 📦Vavite: Develop server-side applications with Vite
- 🐦 Preact will compile out unused class components
- 🐦 Qwik-React is coming
React-Native
第一个支持React 18的React-Native版本。要使用Concurrent React的新功能，你必须先迁移到新的架构。Hermes的发布模式也发生了变化：React-Native的每个版本都将与Hermes版本保证兼容。
Extras:
- 📦 react-native-zephyr: Formidable Labs published a new React-Native type-safe styling solution inspired by Tailwind. Focusing on mobile usage, not cross-platform for now.
- 📦 react-native-app-clip: Expo config plugin to create an iOS App Clip, permitting to users to test your app without even installing it (demo).
- 📦 react-native-safari-extension
- 📦 link-native-assets-expo-config-plugin
- 🎙️ RNR 240 - What's New in Expo SDK 45
- 📈 React-Native vs Flutter popularity
- 🐦 Reanimated useAnimatedSensor() demo
- 🎉 Reanimated PR: reduce bundle size on Web by 80%
Other
- ES2022 Features: Ecma International just validated the ES2022 spec. Overview of all the features included:
.at(), Error Cause, top-level await... - Defensive CSS: CSS tips to make your CSS more robust.
- Style Queries: CSS Container Queries is not just about layouts.
- StackOverflow Developer Survey 2022: React remains very used and liked. Svelte and Phoenix are good challengers.
- Histoire: A new way to write stories: Storybook challenger coming from the Vue ecosystem.
- FnApi: new project from Donny (swc creator) to reduce API calls boilerplate
- Prisma 4.0
- Turborepo 1.3
- SPAs: theory versus practice
订阅原文:
