大家好!

Remix、TanStack、Chakra、Mitosis、Panapasi、Fastify-DX......它们有什么共同点?

他们正在变得与框架无关!这显然是一个增长的趋势!

我来到克拉科夫参加 App.js 会议。希望你在下周带回一些很棒的 React-Native 内容😄

🙏 支持时事通讯:

• 😘 推荐给你的朋友:真的很有帮助!

• 💸 本周在 React 中赞助

• 😍 在 Twitter 上写推荐信

• 🧵 转发最新的 Twitter 线程

• 📨 回复此电子邮件:欢迎反馈

• 👥 关注LinkedIn

如果您喜欢本时事通讯,请优先订阅:

• 🇬🇧ThisWeekInReact.com

• 🇫🇷ReactHebdo.fr

---

反应

Plasmo - 像 Next.js 一样用于浏览器扩展!

一个基于 React 和 TypeScript 的专注于创建浏览器扩展的新框架。开源、免费核心,提供付费 CI/CD 云服务。

Pain - 通用 UI 库

我们看到越来越多的 UI 库想要提供原生的跨框架支持(参见 Chakra、TanStack 库...)。据我所知,Panapasi 是同类项目中的第一个基于Mitosis的项目,将 JSX Lite 方言编译到目标框架。

Fastify DX for React

基于 Fastify 和 Vite 的新全栈框架正在开发中。不可知论:可以适应多种框架(React、Vue、Solid...)。 React 集成旨在成为基于 React-Router 和 Valtio 的 Next.js 和 Remix 的轻量级替代方案。

将 React 组件转换为 SolidJS

将分页组件从 React 转换为 Solid。很多 JSX 代码可以按原样使用,但钩子必须稍作调整。 Solid 代表了一项真正的创新:代码最终看起来很像 React(没有依赖数组😏),但执行模型是响应式的。

**Redux Toolkit 的新监听器中间件与 Redux-Saga **

新的 RTK 侦听器系统与 Redux Saga 的很好的并排比较。比较许多用例的实现。 RTK Listener 似乎是 Redux-Saga 的一个很好的轻量级替代品,学习曲线相对较低。选择其中一个或计划迁移的好资源。

React 18 useEffect 双重调用 API:紧急修复

Jack 给出了 6 种可能的解决方案来避免 React 18 的 StrictMode 的双重查询问题。使用像 React-Query 或 RTK-Query(嗯,TanStack Query 😏)这样的库似乎是最简单的。

附加:

• 📖useEffect 指南的第二稿:新的 beta 文档

• 📜Remix-ing Routing in Angular: Remix 与框架无关。 Brandon 展示了它如何与全新的 Angular v14 集成。

• 📜使用 React、Vite 和 Tailwind 设置开发环境:突出 Vite 相对于 Webpack/CRA 的优势。

• 📜了解 React 18 中的 useInsertionEffect 钩子:介绍一个用于 CSS-in-JS 库的作者的钩子。允许在最佳时间插入样式。

• 📜Modulz 已被 WorkOS 收购:详细介绍了他们流行的 React 库 Radix 和 Stitches 的维护。

• 📜Jamstack 中的 Prisma 案例:解释了将 Prisma 与 Next.js 或 Redwood 等各种框架结合的兴趣。

• 🐦React 服务器组件 + SSG/ISR:可以使用带有静态生成的服务器组件:SSG 框架将输出静态.rsc文件。

• 🐦 useRef + TypeScript 逆变:我的分析 + 2 个建议的解决方案。

• 🐦CSS @scope + React:即将推出的 CSS 功能,可能对 React 组件模型和封装有用

• 📦 TanStack:TanStack 库逐渐变得与框架无关! TanStack 查询、TanStack 虚拟、TanStack 表...

• 📦Remix-Flat-Routes:支持 Remix 的平面文件系统路由约定的包。为使用它提供了很好的论据。

• 📦Jest-Image-Snapshot:视觉回归测试工具。新的 v5 升级到 Jest 28。最好与Storybook StoryShots一起使用。

• 📦反冲继电器 0.1.0

• 🎥 100 秒内的红木

💸 赞助商

💡 如何赞助本时事通讯

Axiom - Vercel 的零配置可观察性

Axiom 使您能够通过摄取所有请求、功能和 Web Vitals 数据来监控 Vercel 部署的运行状况和性能。

使用 Axiom 的预构建仪表板可以概览您的所有 Vercel 日志和生命体征,深入了解特定项目和部署,并通过单击了解功能的执行情况。

PS:我自己用它来监控时事通讯注册😉

Meteor 最大的在线活动:寻找演讲者! ☄️

Meteor Impact 会议将于今年回归,并将于 10 月 13 日至 14 日举行!

如果您不熟悉 Meteor,它是一个开源框架,用于在 Javascript 中无缝构建和部署 Web、移动和桌面应用程序。

我们预计今年的活动将成为有史以来规模最大、最好的 Meteor Impact 会议!

我们现在正在寻找有兴趣参加会议的演讲者。

您可以通过点击此处提交您的演讲提案。我们希望在十月见到你!

反应原生

React Native JSI/TurboModules 陷阱

Oscar 拥有丰富的 JSI 经验:他是 React-Native 软件包的作者,并且是专门针对 JSI](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=DA3KXef81sg)的[Youtube 播放列表。他向我们提供了有关本地端使用各种语言的有趣反馈,或者与旧的桥接架构相比,很难对 JSI 进行适当的基准测试。

附加:

• 🧵 React-Native @ Shopify:Shopify 工程副总裁提供了内部使用的最新信息,以及 Shopify 在生态系统中的重要贡献。

• 🐦它是 Flutter,但在 React Native 中......但在 ReactJS 中......:由于 Flutter,React-Native-Skia 也可以在网络上工作CanvaKit

• 🐦乘以 2 个数字:React-Native 桥与 JSI 基准

• 📦反应原生灯箱

其他

WebContainers 现在在 Firefox 中受支持

StackBlitz 的这项创新允许您直接在浏览器中运行 Node.js 代码,包括像 Next.js、Remix、Docusaurus 这样的 React 框架......它刚刚通过新的 Firefox 支持(除了 Chrome)实现了巨大飞跃。

附加:

• Safari 16 Beta 中的 WebKit 功能:CSS 容器查询、Web 推送(2023 年)🤯

• Safari 技术预览 146: withChange Array by Copy❤️️

• 你的 NPM 库可能不需要打包器

• 使用 yup 和 typescript 进行类型安全选择验证

• 角 14

• Node.js 18.3 parseArgs

• Chrome - 我们如何以及为何构建 Performance Insights

• WebPageTest - 机会与实验

• 为什么大多数设计系统会内爆

[](https://res.cloudinary.com/practicaldev/image/fetch/s--4PH4U0EF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto% 2Cw_880/https://user-images.githubusercontent.com/749374/172491158-f06941a4-6948-4732-96b4-1c67241bd50.png)