React 正式推出全新官方文档！ react.dev

最新推荐文章于 2024-09-23 09:00:00 发布

若川视野

最新推荐文章于 2024-09-23 09:00:00 发布

阅读量1.1k

点赞数 2

文章标签： react.js 前端 javascript ecmascript 前端框架

原文链接：https://mp.weixin.qq.com/s?__biz=MzA5MjQwMzQyNw==&mid=2650766329&idx=1&sn=0b1f096d9bb7839c68e7b810670efb3b&chksm=88667875bf11f1634f3d2be1c3389e002ac3057c5c09099d6aef654f22f38e791367d37801d5&scene=126&sessionid=0

版权

大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以点此扫码加我微信 lxchu‍an12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。欢迎星标我的公众号~不错过推文~

3 月 17 日，在 React 新文档的 Beta 版上线一年之后，React 终于正式发布了全新的 React 官方文档！新文档已启用新的域名：https://react.dev/。不过，目前新文档只发布了英文版，中文版并未上线。

目前，访问 Beta 版文档（https://beta.reactjs.org/）和英文文档（https://reactjs.org/）时，都会重定向到新域名（https://react.dev/）。

新的文档目前并未提供其他语言的文档入口。

如需访问旧的中文版文档，可以访问：
https://zh-hans.reactjs.org/
。
如需访问旧的英文版文档，可以访问：
https://legacy.reactjs.org/
。

新文档主要包含以下部分：

教程和指南：提供了大量的教程和指南，帮助开发者从零开始学习React或深入研究特定主题。
代码示例和演示：提供了一系列的代码示例和演示，展示了React的强大和灵活性。
最佳实践和技巧：了解最新的 React 最佳实践和技巧，学习如何优化代码以实现更好的性能。
社区论坛：与其他 React 开发人员联系，在项目中获得帮助或在社区分享专业知识。
新闻和更新：第一时间了解 React 开发团队的最新版本、更新和新闻。

下面就来看看全新的 React 文档都有哪些特色！

全面拥抱 Hooks

当 2018 年发布 Hooks 时，Hooks 文档假设读者已经熟悉类组件。这有助于社区迅速采用 Hooks，但过了一段时间，旧文档就无法满足新读者的需求。新读者必须要学习两次React：先学习类组件，再学习 Hooks。

而新文档全面拥抱 Hooks，从开始就教授如何使用 Hooks 来学习 React。文档分为两个主要部分：

Learn React^[1]：一个自学课程，从零开始教授React。
API Reference^[2]：提供了每个 React API 的详细信息和使用示例。

注意：目前仍有一些类组件用例没有基于 Hook 的实现。类组件仍然得到支持，并在新站点的 Legacy API^[3] 部分进行了记录。

Learn

Learn 包含两部分：Quick Start 和 Learn React。

Quick Start

React 学习教程的入门部分，介绍了 React 的基本概念和语法，例如组件、属性和状态等。

如果希望通过实践学习，文档还提供了一个井字棋教程。该教程使用 React 构建了一个井字棋小游戏，并教授了一些开发技能。这是一个在线交互式教程，可以自己尝试修改：

除了井字棋教程之外，这一部分还包含了一个 Thinking in React 教程，帮助用户更深刻的理解 React。

上面的井字棋沙箱只是新文档众多示例的其中之一，整个网站添加了超过 600 个沙箱！可以编辑任何沙箱，或在右上角按“Fork”将其在一个单独的选项卡中打开。

Learn React

Quick Start 部分并没有详细介绍如何使用 React。可以在 Learn React 部分一步步学习如何使用 React。该部分包含四个模块：

Describing the UI：如何用组件显示信息
Adding Interactivity：如何响应用户输入更新屏幕
Managing State：如何在应用变得越来越复杂时组织逻辑
Escape Hatches：如何“走出”React，以及什么时候这样做最有意义

Learn 部分的大多数页面都以一些挑战结尾，以检查理解程度。例如，以下是有关条件渲染页面的挑战：

在每个挑战的左下角都有一个 Show solution 按钮，可以点击查看挑战的解决方案。

在教程中，通过了很多更直观的图表，以帮助快速快速理解。例如，这是 Preserving and Resetting State 中的一张图表：

我们还可以在新文档中看到一些插图，下面是绘制屏幕的浏览器：

API Reference

在 API Reference 中，每个 React API 现在都有一个专用的页面。这包括各种 API：

内置 Hooks，如 useState。
内置组件，如 <Suspense>。
内置浏览器组件，如 <input>。
面向框架的 API，例如 renderToPipeableStream。
其他 React API，例如 memo。

每个 API 页面都至少分为两个部分：

Reference：通过列出其参数和返回值来描述 API 的签名。
Usage：显示了为什么以及如何在实践中使用此 API。它显示了 React 团队如何使用每个 API 的典型场景。

除此之外，一些 API 页面还包括故障排除（针对常见问题）和备选方案（针对已弃用的 API）。希望这种方法将使 API Reference 不仅作为一种查找参数的方式，而且作为一种方式来查看可以使用任何给定的 API 执行的所有不同的事情——以及它如何连接到其他 API。

Community

React 拥有一个由数百万开发人员组成的社区，Community 部分包含了一些可以加入的 React 相关社区。除此之外，还包含了React 会议、React 视频、React 聚会、React 团队、React 文档贡献者、致谢以及版本控制策略。

未来

React 团队花了很长时间才发布新文档。希望保持 React 社区应得的高质量标准。在编写这些文档和创建所有示例时，React 团队发现了自己的一些解释中的错误、React 中的错误，甚至现在正在努力解决的 React 设计中的漏洞。希望新文档能帮助 React 团队在未来将 React 提升到一个更高的标准。

社区中还有许多对扩展网站内容和功能的要求，例如：