前端周热点100: React 18,React-Native 0.68,Redwood 1.0,Remix,Next.js,TC39,Node.js Test

概览

react 18 终于发布了，一些新特性方法值得学习和关注！（推荐）
Remix和React-Router仓库将合并为Remix。
React-Native 0.68版本发布，可以手动开启新的Fabric和TurboModules架构
TC 39会议更新：Decorators、Type annotations等

React

React 18新鲜出炉! 这个新版本提供了许多改进和API，相信很多人已经有所了解: automatic batching, SSR streaming, Suspense, selective hydration, new hooks (useId, useDeferredValue, useTransition...)

这个备受期待的版本也包括Concurrent React。新版本中不再是同步和原子渲染：它可以被中断、暂停和恢复。这允许将工作分割成不同优先级的小切片并且可以保持ui的持续响应。

这些并发功能目前可以使用，但主要是为了封装在一个库或一个框架内（计划在Remix, Next.js中进行整合）

这个新的渲染器可以产生破坏性，只有在使用React 18的新并发功能时才会激活，这可以让我们顺利地增量采用。因此，将React升级到v18应该不会太复杂。如果你的应用程序在开发中出现问题，建议禁用StrictMode.

React 18奠定了一个新的基础，大多数的创新还没有到来。Dan Abramov甚至把这个版本称为MVP，其目标似乎基本上是促进并发式React的逐步采用。一些人如Paul Henschel（React-Three-Fiber）或 James Ide已经预测到一些巨大的性能影响。

我认为我们正在进入一个新的时代。一些网络框架，如Svelte或Solid，由于其简单性和性能，正在变得流行。与React不同，它们是真正的响应式和无虚拟DOM。

React的虚拟DOM是有代价的，但我认为如果没有这个抽象，Concurrent React是很难实现的。随着React 18+，我们将最终知道这个代价是否值得付出。在未来的几年里，将React的用户体验、DX和性能与Svelte或Solid进行比较将是非常有趣的。

RedwoodJS v1.0

现在是Redwood的Launch Week，V1.0刚刚发布，另一个重要的公告计划在周四发布。这个受Ruby on Rails启发的React元框架比它的竞争对手更有主见，并且可以通过与Prisma、GraphQL、Storybook、TypeScript、Jest的意见整合，帮助你更快地交付产品。它的创造者Tom Preston-Werner（也是GitHub、Jekyll的创造者......）正在以可持续的方式（没有风险投资）在未来一年内用100万美元资助这个框架.

Remixing React Router

Remix和React-Router仓库将合并为Remix，Remix中的许多功能将在React-Router中提供：数据加载、突变、中断、重新验证、竞赛条件...... 这些抽象被认为是与Suspense和 "render-as-you-fetch"模式的最佳结合。

拓展阅读

📜 Remix: The Yang to React's Yin
📜 Improving Web Page Performance at DoorDash Through Server-Side Rendering with Next.JS: great feedback of a complex migration at scale
📜 Hooks Considered Harmful
📜 When Does React Render Your Component?
📜 SSR Date Formatting in Remix using the User's Locale
📜 How Does Shallow Comparison Work In React?
📜 Trying out Ladle - A Storybook Alternative
📜 Why React 18 Broke Your App
🐦 React core team: Brian Vaughn leaves, Mengdi Chen enters
🐦 useId() + React keys? ❌
🐦 useDeferredValue mental model: "like debounce but React decides when to bounce"
🐦 JSX && conditionals: pitfalls to know! There are ESLint plugins for that (1, 2)
🐦 Next.js + Partytown "worker"
🐦 React + Qwik
🎥 The Story of Next.js
📦 React-Three-Fiber: v8.0 (with** React-Native support!**) + Babel plugin
📦 React Router v6.3.0: compatibility v5
📦 React Testing Library v13
📦 React-Query v4.0.0-beta.1
📦 Chicane v1.0
📦 Gatsby v4.11

React-Native

React Native v0.68

这个版本非常重要，因为它是React-Native的第一个可以通过一个标志轻松激活新架构（Fabric和TurboModules）的版本

Expo的下一个版本（SDK 45）应该是基于v0.68的，但新架构不会立即在Expo Go中使用（但可能会在自定义开发客户端中启用）。

拓展阅读

🐦 TypeScript moduleSuffixes: improves integration between TypeScript and React-Native extensions (Comp.ios.tsx)
🐦 React Native for Web 0.18 preview
📜 Deep dive into React Native JSI
📜 Ionic vs. React Native: Performance Comparison
📜 How do you cache FlatList.renderItem?
🎥 React-Native-Skia: Neumorphism + Gen-Z mode
🎙️ React Native Radio 230 - We React to News
🎙️ React Native Show 12 - Mobile Payments in React Native
📦 Nx Expo Support
📦 OneSignal Expo Plugin
📦 React-Native-Google-SignIn Expo Plugin

其它

Updates from the 89th TC39 meeting

巨大的TC39更新! 我的关注:

Decorators stage 3, 最终回到正轨上了!
通过复制修改数组 in stage 3: JS数组的不可变方法! 也是Records & Tuples进步的一个重要步骤。
类型声明（Type annotations） stage 1 🤯
Intl.MessageFormat in stage 1: could reduce bundle size of apps using React-Intl.