---
title: 'React Status #281' # 不可修改
date: '2022-03-25' # 不可修改
categories: ['React Status'] # 不可修改
publish: true # 翻译完成后修改
---

[![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lnxbvkafp9jm51n4ixzd.jpg)](https://react.statuscode.com/link/121307/web)

<!--以上是预览信息，图片一张或限制百字左右，前者优先，全文请使用二级及以下标题-->
<!-- more -->

[React Flow 10: 用于创建基于 Node 的交互式 UI、编辑器和图表。](https://react.statuscode.com/link/121307/web "reactflow.dev") — 尽管我们在第 [235](https://react.statuscode.com/link/121308/web) 和第 [187](https://react.statuscode.com/link/121309/web) 的 issue 中介绍了这一点，但新的 [发布](https://react.statuscode.com/link/121310/web) 值得一看。 在新功能和改进中：子流程、触摸设备支持以及一些新的 hooks 和属性。这篇 [博客](https://react.statuscode.com/link/121311/web) 提供了一个很好的概述。

Webkid GmbH

[关于 React 18 RC 你所需要知道的一切](https://react.statuscode.com/link/121312/web "www.telerik.com") — 随着 [第三个候选版本](https://react.statuscode.com/link/121313/web) 刚刚发布， React18 仍然迫在眉睫。这篇文章旨在让您了解新内容，因此当最终发布到来是您不会感到惊讶。

Kathryn Grayson Nanz

[![](https://copm.s3.amazonaws.com/d52404e9.png)](https://react.statuscode.com/link/121314/web)

[🧈  将 ButterCMS 添加进您的 React 应用中. #1 Rated Headless CMS](https://react.statuscode.com/link/121314/web "buttercms.com") — ButterCMS 是您的内容后端。不需要您操作的情况下就可以让您的营销团队更新网站+应用内容。立刻尝试 #1 rated Headless CMS 。30 天免费。

🧈 ButterCMS sponsor

[Liqvid 2.1: 在 React 中创建交互式 'Liquid Videos'](https://react.statuscode.com/link/121341/web "liqvidjs.org") — 新版本允许您使用 [Web Animations API](https://react.statuscode.com/link/121342/web)。 它还包括一个 `useTime` 用于支持更新动画、改进可用性以及为进一步改进打基础的新钩子函数。Remotion 是需要考虑的另一个选项，它更侧重于于渲染视频。

Yuri Sulyma

🔥  [Hooks 被认为是 “有害的”](https://react.statuscode.com/link/121316/web "labs.factorialhr.com") — 作者声称“每周都会发现十几个与 hooks 相关的问题”，他利用这些经验来展示示例、解决方法并避免 “API 的粗糙边界条件” 。这在 Hacker News 上引起了 [相当大的讨论。](https://react.statuscode.com/link/121317/web)

Pau Ramon Revilla

[Ladle 简介：更快地开发和测试您的 React Stories](https://react.statuscode.com/link/121344/web "www.ladle.dev") — 一种用于在隔离环境中构建和测试 React 组件的新工具。让你想起了 Storybook？Ladle 旨在成为一个替代品，但它提供了更快的性能（而且，是有指标的）。

Vojtech Miksu

## **快报：**

*   该 Next.js 项目为任何想要学习使用 Next.js 必备知识的人推出了一个[新的基础课程。](https://react.statuscode.com/link/121315/web)

[如何使用 hooks 创建一个 React 表单并对其进行校验](https://react.statuscode.com/link/121322/web "www.telerik.com") — 有一些库可以抽象出很多这样的工作（例如 [Formik](https://react.statuscode.com/link/121323/web) ），但如果你想纯手写，看这个文章就可以了。

Thomas Findlay

[编写 React 目录组件](https://react.statuscode.com/link/121325/web "blog.eyas.sh") — 虽然目录可以通过让读者直接跳转到他们喜欢的内容来改善用户体验，但这种组件的设置和维护可能有很多苦差事。那么为什么不让目录组件自己处理呢？

Eyas Sharaiha

[升级 Next.js 以实现即时性能改进](https://react.statuscode.com/link/121321/web "vercel.com") — Vercel 团队如何将 Next.js 8 演示提升到 Next.js 12 标准并在过程中看到巨大改进，这篇文章对此案例进行研究。

Lydia Hallie

[使用 React 在 URL 中存储 State](https://react.statuscode.com/link/121327/web)  
Pierre Hedkvist

## 🛠 代码和工具

[![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/y0s6sejeq6drq1yosjri.jpg)](https://react.statuscode.com/link/121329/web)


[Turnstone: React 搜索组件](https://react.statuscode.com/link/121329/web "tomsouthall.com") — 一个完全可定制的搜索框，具有自动完成下拉菜单、预输入和对来自多个数据源的结果进行分组的能力、WAI-ARIA 合规性等。其主要目的是将多个数据源的结果轻松组合到一个字段中。

Tom Southall

[React Webcam 7.0: A Component to Work with Webcams](https://react.statuscode.com/link/121331/web "github.com") — 从 webcam 中获取图像，选择您选择的摄像头等。

Moz Morris

[如何在 2022 年为您的项目选择 Headless CMS](https://react.statuscode.com/link/121332/web "kontent.ai")

Kontent by Kentico sponsor

[react-map-gl：浏览器中的交互式、彻底可定制的地图](https://react.statuscode.com/link/121333/web "github.com") — 一个功能强大且成熟的 [mapbox-gl-js](https://react.statuscode.com/link/121334/web) 库, 该库最初由 Uber 的可视化团队创建。想要一些演示？ [当然可以。](https://react.statuscode.com/link/121335/web)

Vis.gl

[Reactivated：同时使用 React 和 Django 的最简单方法。](https://react.statuscode.com/link/121336/web) — Pythonistas 的一种！
Silvio Gutierrez

[MDX 2.1：在 Markdown 文档合成器和 Vercel 中使用 JSX](https://react.statuscode.com/link/121337/web)  
Compositor and Vercel

## ⚡️ 快报:

[react-spinner-animated](https://react.statuscode.com/link/121338/web) — 各式各样的 “spinners”，使用了新的动画效果。

[react-form-stepper](https://react.statuscode.com/link/121339/web) — 用于指示多步骤进度的简单组件

[react-native-awesome-gallery](https://react.statuscode.com/link/121340/web) — 高性能、类原生且可自定义的画廊组件。

---
> * 译文出自：[weekly-tracker](https://github.com/FEDarling/weekly-tracker) 项目，期待你的加入！
> * [查看原文](https://react.statuscode.com/issues/281)对比阅读
> * 发现错误？[提交 PR](https://github.com/FEDarling/weekly-tracker/blob/main/weeklys/react_status/281)
> * 译者：[Maskedheroe](https://github.com/Maskedheroe)
> * 校对者：[daodaolee](https://github.com/daodaolee)

{'avg_line_length': 45.97979797979798, 'max_line_length': 401, 'alphanum_fraction': 0.7603251318101933, 'licenses': ['MIT'], 'repository_name': 'FEDarling/fe-translate-weekly', 'path': 'weeklys/react_status/281/README.md', 'size': 6586, 'lang': 'Markdown'}