耗时 359 天的 React 官方全新文档正式上线

好消息，在2023年3月16号 react 官方全新文档正式上线了。距离上一次 React 新文档的 Beta 版（2022年3月22）上线，文档重写耗时359天。可以想象一下，react 团队对文档的重视程度。与此同时，react 全新文档已启用新的域名：https://react.dev/。react 的粉丝们学习React 看文档，别跑错地方了。由于时间的关系，react 官方全新文档还没有推出中文版，小编推测中文版可能会在一个月之后才会上线，到时候 react 中文版本上线了，会第一时间发文告诉大家的。

react 官方为了考虑到开发者们找不到最新文档网址：https://react.dev/， 当访问 Beta 版文档（https://beta.reactjs.org/）和英文文档（https://reactjs.org/）时，都会重定向到新域名（https://react.dev/）。如果部分粉丝们英文看不懂，别着急那继续直接访问React 中文文档 BETA 版 （
https://react.bootcss.com/ ） 或者访问 （https://react.docschina.org/）

React 中文文档 Beta 版本

React 中文文档

下面跟着小编的步伐一起天天React 全新文档有哪些特色内容。

全文大纲

• React 介绍

• 全面拥抱 React Hooks

• 如何学习 React

• 详细介绍新的 React API Reference

• React 未来规划

React 介绍

官网：https://react.dev/

Github：https://github.com/facebook/react

React是用于构建用户界面的JavaScript库， 起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源，发展到现在差2个月就十周年了。

• React是Facebook开发的一款JS库。

• React一般被用来作为MVC中的V层，它不依赖其他任何的库，因此开发中，可以与任何其他的库集成使用，包括Jquery、Backbone等。

• 它可以在浏览器端运行，也可以通过nodejs在服务端渲染。

• React的思想非常独特，性能出众，可以写出重复代码少，逻辑清晰的前端代码。

• React的语法是jsx，通过使用这种语法，可以在react代码中直接混合使用js和html来编写代码，这样代码的逻辑就非常清晰，当然也意味着，需要将jsx代码编译成普通的javascript代码，才能在浏览器中运行，这个过程根据实际项目情况，可以选择多种不同的思路，或者在服务器端通过webpack进行编译。

特点：

• react 是一个【视图层框架】：声明式设计 -React采用声明方式，可以轻松描述应用。

• 以组建的方式开发

• 特殊的语法【JSX】：使用特殊的jsx（JavaScript XML）语法。

• 【虚拟DOM】：高效 -React通过对DOM的模拟使用了虚拟DOM，最大限度地减少与DOM的交互。

如下图：

react.dev 官网

react 从组件创建用户界面

全面拥抱 React Hooks

当官网在2018年发布React Hooks时，Hooks文档假设读者熟悉类组件。这开发者们帮助社区很快采用了Hooks，但过了一段时间，旧的文档无法为新的读者提供服务。新读者必须学习两次React：先学习类组件，再学习 Hooks。

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

• Learn React：一个自学课程，从零开始教授React。

Learn React 地址：https://react.dev/learn

• API Reference：提供了每个 React API 的详细信息和使用示例。

API Reference 地址：
https://react.dev/reference

注意：仍然有一些罕见的类组件用例还没有基于Hook的实现用例。类组件仍然得到支持，并记录在新站点的旧版API部分中。Legacy API：
https://react.dev/reference/react/legacy

如何学习 React

学习React 总体包含两个部分：快速学习（Quick Start）和深入学习 （Learn React）。

快速学习（Quick Start）

“学习”部分从“快速入门”页面开始。React 学习教程的入门部分，介绍了 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 中的一张图表：

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

官方已经与浏览器提供商确认，这一描述在科学上是100%准确的。

详细介绍新的 React 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。

React 社区

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

React 社区

React 未来规划

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

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

• 为所有示例提供 TypeScript 版本；

• 创建更新的性能、测试和可访问性指南；

• 独立于支持它们的框架记录 React 服务端组件；

• 与国际社区合作翻译新文档；

• 向新网站添加缺少的功能（例如，博客的 RSS）。

现在新文档已经发布了，未来 React 团队的重点就是添加新信息和进一步改进新网站。

来源：

https://www.toutiao.com/article/7211887846780142092/?log_from=2a6d0a8e86fec_1679362634799