前端周热点102: Lexical, Mitosis, Remix, Next.js, Redux, Storybook, TurboModules, CSS

React

Meta新开源库，用于创建可扩展的文本编辑器（有一个支持提及、哈希标签、协作编辑的插件系统...）。它似乎是Draft.js的一个现代、轻量级的替代品（这次不需要使用ImmutableJS了😏）。不特别依赖React，但提供了一个官方绑定。可以被其他框架使用，甚至可以针对其他平台 (计划支持iOS)。

A Quick Guide to Mitosis

Mitosis是一个工具，它允许你用接近React/JSX的语法来创建一个设计系统（受Solid启发）。Mitosis能够将这些组件编译成各种框架（React、Angular、Svelte、React-Native...）。这对于长期使用多个框架的大公司来说是很方便的。这篇官方文章是一个很好的介绍。

Multiple forms per route in Remix

解释了如何管理与同一Remix路由相关的两个表单。每个路由只能有一个ActionFunction，所以最好的解决办法似乎是在提交按钮上使用action属性。

Accessible React Forms

对React背景下的一些无障碍原则进行了很好的概述：描述aria-*属性及其对屏幕阅读器的影响，颜色，焦点...

Storybook Lazy Compilation for Webpack

在即将到来的storybook 6.5版本中，通过懒加载提升了本地dx加载的性能：启动速度提高3倍，再次构建速度提高2倍。对于较大的故事书来说，其影响似乎很显著。与Ladle比较，它是最近发布的Storybook的替代品，也试图提高性能。

拓展阅读

📜 Static Full-Text Search in Next.js with WebAssembly, Rust, and Xor Filters: a part dedicated to integrating WebAssembly with Next.js (Webpack config). 的一部分，专门用于将WebAssembly与Next.js（Webpack配置）整合。
📜 Introducing React-admin V4: already presented last week, now v4 is officially released.
📜 Why you should always Cleanup Side Effects in React useEffect and How to Cleanup
📜 The Duality of CLS with Lazy Loading Components
📜 Migrating your React app from Webpack to Vite
📜 React Higher-Order Components (HOCs)
📜 What's New in React 18
📖 Why Redux Toolkit is How To Use Redux Today: new doc nudging you to adopt Redux Toolkit.
🐦 React-Router v6.x: preview 1, preview 2
🐦 Remotion: StackBlitz support
🐦 Module Federation Support for Next.js
🐦 Lighthouse + Next.js guidance
📦 Next-Markdown: new lib to integrate Markdown content in Next.js. Supports MDX, Table of Contents, index...
📦 Redux 4.2: createStore deprecated with a warning
📦 React-Redux v8: compat React 18, codebase in TypeScript.
📦 Generouted: file-based routing, integration between React-Location and Vite. Modern features to compete with meta-frameworks: supports code-splitting, data loaders, nested layouts...
📦 Zustand v4.0.0-rc.0: JS backward compatible. Breaking changes TS.
📦 Proxy-Memoize 1.0: interesting alternative to Reselect to create memoized selectors, but can be used for other cases as well.
📦 Create-React-App v5.0.1: improves React 18 compat
📦 React-Hooks-Testing-Library v8.0
🎥 Ryan Carniato - A First Look at Next.js
💸 Intellij 2022.1: improves IDE Next.js support
💸 Official React-Query Course

React-Native

📜 Create high-performance graphics with React Native Skia
🐦 React-Native-Skia: drop-in React-Native-Svg replacement?
💡 PR: Add TypeScript support in New Architecture/Codegen: it is possible to write TurboModule spec in TypeScript (to describe your native module API)
📦 React-Native-Turbo-Starter: a boilerplate to create modern React-Native modules leveraging the new architecture.
📦 React Native Turbo Secure Storage
📦 expo-github-action/command: can trigger an EAS build with a GitHub comment (experimental)
👥 React-Native devs Twitter community
🎥 Creating a RN Turbo Secure Storage module from scratch
🎥 React Native Turbomodule + TypeScript Codegen Tutorial

其它

CSS Parent Selector

CSS有一个新的:has()选择器，通常被称为 "父选择器"，它允许根据子元素将CSS规则应用于父元素。例如，你可以改变一个卡片的父级布局，但只有当它包含一个图像元素时才生效：这就避免了必须在父级上应用一个变量来控制。这篇文章用许多使用案例说明了这个新功能。我发现根据<select>值在 <html> 上应用CSS变量的可能性很有趣（对于主题化或黑暗模式支持)的有用Demo）。目前只在Safari和Chrome Canary中可用，但支持度可以快速提高。

注意不要滥用它：在React这样的组件模型中，最好将自己限制在针对本地类，以避免破坏组件的封装模型。

New 103 HTTP Status Code (Early Hints)

在HTML规范中正式加入了一个新的状态代码。它允许向浏览器发送 "early hints（早期提示）"，以便在收到服务器的200响应之前预取/预装资源。这对于CDN（阅读Cloudflare的文章）似乎很有用，它能够在从源服务器获取新的同时，发送缓存的早期提示（甚至通过机器学习🤯预测）。

Building a dialog component

随着<dialog>在Safari 15.4中的加入和越来越多的支持，是时候来看看这个新元素了。Adam Argyle为我们提供了一篇关于这个主题的相当完整的文章：基于最现代的网络API，他实现了一个具有动画、可访问性、响应性、轻型驳回、自定义事件的巨型/迷你模态。

拓展阅读

订阅原文:

🇬🇧 ThisWeekInReact.com
🇫🇷 ReactHebdo.fr