关于更新的 React 文档你需要知道的一切

React 世界中令人兴奋的消息：经过多年的努力和改进，以前的 React Docs Beta 已升级为官方 React 文档，现已在react.dev 上线！

因此，原始文档已被降级为遗留文档，尽管它们仍然可以通过legacy.rectjs.org访问。

历史

React Docs Beta 项目于 2021 年 10 月下旬首次发布，由Rachel Nabors和Dan Abramov领导，旨在更新现有的 React 文档，以反映更新、更贴近时代的 React 编写方式。该项目主要关注 Hooks 的使用（它是 2019 年 2 月发布的 React 16.8 的一部分），以及随之而来的从类组件转向函数式组件的转变。

此前，React 官方文档以类组件为先导，因为这是编写有状态组件的唯一方法。然而，Hooks 的引入——useState()尤其是钩子——让函数式组件也能处理状态。从那时起，关于 Hooks 是否正确，以及它是否实现了简化状态和状态管理的目标，一直存在大量争论。无论如何，Hooks 的引入彻底改变了我们编写 React 的方式。为了区分这一发展前后，许多 React 教程和文章（包括新版 React 官方文档的介绍）通常将后 Hooks 时代称为“现代”React。

然而，这让 React 新手陷入了困境。关于如何从类组件和传统状态管理迁移到函数式组件和 Hook，已经有大量的文档和指导。然而，初学 React 的人却发现，没有完善的文档从零开始讲解 Hook。随着时间的推移，React 官方文档变得越来越过时，越来越难以使用。

什么是新的？

默认使用 Hooks 和函数组件

新文档中最大的变化是，它更加倾向于使用 Hooks 并教授函数式组件作为编写现代 React 的标准方法——除了少数仍然需要使用类组件的用例。除此之外，类组件（尽管仍然受支持）已被正式指定为“遗留”组件。

互动演示和挑战

新文档极大地扩展了交互式代码示例的数量，并添加了新的挑战，让您可以练习所学知识并测试您的知识。文档新增了 600 多个交互式代码示例、沙盒和演示，所有这些示例都可以在codesandbox.io中创建分支，以便进行更大、更广泛的更改，或轻松调整以用于您自己的工作。此外，我们还添加了更多插图和图表，旨在使 React 文档更加友好易懂。

Create React App 不再是标准

文档中最引人注目的变化之一是，新文档的“安装”部分移除了Facebook 官方维护的 React 快速配置工具Create React App (CRA)。旧文档曾推荐 CRA 为“在 React 中构建新的单页应用程序的最佳方式”。

最近，有不少人呼吁移除 CRA 建议，其中最引人注目的或许是人气 YouTuber Theo (t3.gg)，他在 React.js 项目中提交的 Pull 请求，建议用 Vite 替换 CRA，引起了广泛关注。这引发了对 CRA 的激烈批评，包括其被认为缺乏功能（例如对 TypeScript 或流行 CSS 库 Tailwind 的原生支持）、大小、性能等等。

不过，最终，关于 CRA 有一个不容忽视的重大事实：它已不再积极维护。目前有 1.5 千个未解决的问题，超过 400 个未解决的 PR，而且上一个版本发布已超过一年，可以肯定地说CRA 是一个已死的项目。

框架是官方推荐的

对于完全使用 React 创建新应用或网站的用户，更新后的文档现在推荐使用 React 框架，包括 Next.js、Remix、Gatsby 和适用于 React Native 的 Expo。在可点击展开的“深入探讨”部分，官方正式认定使用框架是使用 React 构建的最佳方式。不过，他们也指出，对于那些“喜欢自行定制设置，我们不会阻止你——放手去做吧！”的人来说，Vite 或 Parcel 等选项也是不错的选择。

这与旧版文档有显著的区别，旧版文档为 Next.js 和 Gatsby 分别提供了简短的描述，但重点关注 CRA 作为推荐方法。

新域名

现已成为旧版的文档最初可以在reactjs.org上找到；现在，该域名会重定向到全新的react.dev域名。新文档在 Beta 版时托管在beta.reactjs.org上，现在也会重定向到react.dev。需要原始文档的用户仍然可以在legacy.reactjs.org上找到。这样做是为了重新开始，并明确区分当前文档和旧文档。

新的品牌颜色？

一个不太重要（但仍然很有趣）的更新：一位眼尖的 Twitter 用户（@borekb）指出，React 标志性的蓝绿色品牌颜色在新文档中略有变化。（现在的）旧版文档之前使用了稍微亮一点的颜色#61dafb，而这位用户指出新文档使用的是#0a7ea4。不过，我也做了一些调查，发现其实还有更多内容！

除此以外#0a7ea4，新文档还使用了#149eca“React Blue”——一种略微亮一些的青绿色，更接近原版颜色。具体使用哪种颜色取决于网站是处于亮色模式还是暗色模式，正如我们在这段我通过检查工具从 CSS 中抓取的代码片段中看到的那样。

根据这些信息（虽然不知道具体原因），我猜测是为了方便用户访问，颜色略有调整。暗黑模式的主要背景颜色是#23272F，较浅的颜色会通过颜色对比度检查，而较深的颜色则不会。另一方面，深青色与白色背景的颜色对比度检查会通过，而较浅的颜色则不会。基于此，我推测新文档中的颜色与原始颜色有所调整，以便尽可能提高用户的可访问性。感谢 React 团队对可访问性的关注！

期待

与所有文档一样，React 文档也在不断发展和扩充。“React.dev 简介”博客文章列出了一些我们期待在不久的将来推出的新功能，包括 TypeScript 示例、更新的可访问性指南、扩展的语言翻译等等。

反馈

对新文档有什么意见吗？React 团队有几种提供反馈的方式：

• 填写调查问卷以提供一般反馈。
• 记录问题以记录问题、缺陷、错误等。

激动人心的未来

我个人认为，这些新文档是 React 团队的一大胜利，相比旧版本有了巨大的改进。它们设计精良，易于阅读，总体而言非常人性化。可惜的是，他们花了这么长时间才放心移除 beta 标签，并将这个优秀的新资源过渡到 React 官方文档——但迟做总比不做好！

介绍博客写道：“我们认为现在是学习 React 的最佳时机”——我非常赞同！希望这些精彩的新文档能吸引大量新学员，让他们充满热情。祝 React 再创十年辉煌！

你觉得新文档怎么样？看到 Create React App 被移除，你开心吗？迫不及待地想拥抱 Hooks 了？欢迎在评论区留言！