前端周热点107: Plasmo, Panapasi, Fastify-DX, Remix, Solid, useInsertionEffect, JSI

React

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

我们看到越来越多的UI库希望提供原生的跨框架支持（见Chakra、TanStack库...）。据我所知，Panapasi是第一个基于Mitosis的项目，它将JSX Lite语言编译到目标框架中。

正在开发中的新全栈框架，基于Fastify和Vite。不可知性：可以适应多个框架（React、Vue、Solid...）。React集成目标在于成为Next.js和Remix的轻量级替代品，基于React-Router和Valtio。

将一个分页组件从React转换为Solid。很多JSX代码都可以照搬，但钩子必须稍作调整。Solid代表了一种真正的创新：代码最后看起来很像React（没有依赖阵列😏），但执行模型是反应式的。

新的RTK监听器系统与Redux Saga的良好的侧面比较。比较了许多用例的实现。RTK Listener似乎是Redux-Saga的一个很好的轻量级替代品，学习曲线相对较低。这是一个很好的资源，可以选择一个或另一个，或计划一个迁移。

Jack给出了6种可能的解决方案，以避免React 18的StrictMode出现双重查询问题。使用像React-Query或RTK-Query（嗯，TanStack Query 😏）这样的lib似乎是最简单的。

拓展阅读

📖 Second draft of the useEffect guide: new beta doc
📜 Remix-ing Routing in Angular: Remix is framework-agnostic. Brandon shows how it can be integrated with the brand new Angular v14.
📜 Setting up a dev environment with React, Vite, and Tailwind: highlights the advantages of Vite over Webpack/CRA.
📜 Know about the useInsertionEffect hook in React 18: presentation of a hook intended for authors of CSS-in-JS libs. Allows styles to be inserted at the best time.
📜 Modulz has been acquired by WorkOS: gives details on the maintenance of their popular React libs Radix and Stitches.
📜 The Case For Prisma In The Jamstack: explains the interest of combining Prisma with various frameworks like Next.js or Redwood.
🐦 React Server Components + SSG/ISR: it will be possible to use Server Components with static generation: the SSG framework will output static .rsc files.
🐦 useRef + TypeScript contravariance: my analysis + 2 suggested solutions.
🐦 CSS @scope + React: upcoming CSS feature that could be useful for the React component model and encapsulation
📦 TanStack: TanStack libs are gradually becoming framework-agnostic! TanStack Query, TanStack Virtual, TanStack Table...
📦 Remix-Flat-Routes: package to support a flat file-system routing convention for Remix. Gives good arguments for using it.
📦 Jest-Image-Snapshot: visual regression testing tool. New v5 upgrades to Jest 28. Best used with Storybook StoryShots.
📦 Recoil Relay 0.1.0
🎥 Redwood in 100 Seconds

Oscar拥有丰富的JSI经验：他是React-Native包的作者，也是Youtube上专门介绍JSI的播放列表。他给了我们一些有趣的反馈，比如在原生端使用各种语言，或者与旧的桥梁架构相比，很难对JSI进行适当的基准测试。

拓展阅读

🧵 React-Native @ Shopify: VP Engineering at Shopify gives update on internal usage, and the significant Shopify contribution in the ecosystem.
🐦 It's Flutter but in React Native... but in ReactJS...: React-Native-Skia also works on the web thanks to Flutter CanvaKit
🐦 Multiplying 2 numbers: React-Native bridge vs JSI benchmark
📦 react-native-lightbox

StackBlitz的这项创新允许你直接在浏览器中运行Node.js代码，包括Next.js、Remix、Docusaurus等React框架。它刚刚通过这个新的Firefox支持实现了一个大飞跃（除了Chrome）。

拓展阅读