3 月 17 日，在 React 新文檔的 Beta 版上線一年之后，React 終于正式發(fā)布了全新的 React 官方文檔！新文檔已啟用新的域名：https://react.dev/?。不過(guò)，目前新文檔只發(fā)布了英文版，中文版并未上線。

目前，訪問(wèn) Beta 版文檔（https://beta.reactjs.org/?）和英文文檔（https://reactjs.org/?）時(shí)，都會(huì)重定向到新域名（https://react.dev/）。

新的文檔目前并未提供其他語(yǔ)言的文檔入口。

• 如需訪問(wèn)舊的中文版文檔，可以訪問(wèn)：?https://zh-hans.reactjs.org/?
• 如需訪問(wèn)舊的英文版文檔，可以訪問(wèn)：?https://legacy.reactjs.org/??

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

• 教程和指南：提供了大量的教程和指南，幫助開發(fā)者從零開始學(xué)習(xí)React或深入研究特定主題。
• 代碼示例和演示：提供了一系列的代碼示例和演示，展示了React的強(qiáng)大和靈活性。
• 最佳實(shí)踐和技巧：了解最新的 React 最佳實(shí)踐和技巧，學(xué)習(xí)如何優(yōu)化代碼以實(shí)現(xiàn)更好的性能。
• 社區(qū)論壇：與其他 React 開發(fā)人員聯(lián)系，在項(xiàng)目中獲得幫助或在社區(qū)分享專業(yè)知識(shí)。
• 新聞和更新：第一時(shí)間了解 React 開發(fā)團(tuán)隊(duì)的最新版本、更新和新聞。

下面就來(lái)看看全新的 React 文檔都有哪些特色！

全面擁抱 Hooks

當(dāng) 2018 年發(fā)布 Hooks 時(shí)，Hooks 文檔假設(shè)讀者已經(jīng)熟悉類組件。這有助于社區(qū)迅速采用 Hooks，但過(guò)了一段時(shí)間，舊文檔就無(wú)法滿足新讀者的需求。新讀者必須要學(xué)習(xí)兩次React：先學(xué)習(xí)類組件，再學(xué)習(xí) Hooks。

而新文檔全面擁抱 Hooks，從開始就教授如何使用 Hooks 來(lái)學(xué)習(xí) React。文檔分為兩個(gè)主要部分：

• Learn React^[1]：一個(gè)自學(xué)課程，從零開始教授React。
• API Reference^[2]：提供了每個(gè) React API 的詳細(xì)信息和使用示例。

注意：目前仍有一些類組件用例沒(méi)有基于 Hook 的實(shí)現(xiàn)。類組件仍然得到支持，并在新站點(diǎn)的 Legacy API^[3] 部分進(jìn)行了記錄。

Learn

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

Quick Start

React 學(xué)習(xí)教程的入門部分，介紹了 React 的基本概念和語(yǔ)法，例如組件、屬性和狀態(tài)等。

如果希望通過(guò)實(shí)踐學(xué)習(xí)，文檔還提供了一個(gè)井字棋教程。該教程使用 React 構(gòu)建了一個(gè)井字棋小游戲，并教授了一些開發(fā)技能。這是一個(gè)在線交互式教程，可以自己嘗試修改：

除了井字棋教程之外，這一部分還包含了一個(gè) Thinking in React 教程，幫助用戶更深刻的理解 React。

上面的井字棋沙箱只是新文檔眾多示例的其中之一，整個(gè)網(wǎng)站添加了超過(guò) 600 個(gè)沙箱！可以編輯任何沙箱，或在右上角按“Fork”將其在一個(gè)單獨(dú)的選項(xiàng)卡中打開。

Learn React

Quick Start 部分并沒(méi)有詳細(xì)介紹如何使用 React。可以在 Learn React 部分一步步學(xué)習(xí) 如何使用 React。該部分包含四個(gè)模塊：

• Describing the UI：如何用組件顯示信息
• Adding Interactivity：如何響應(yīng)用戶輸入更新屏幕
• Managing State：如何在應(yīng)用變得越來(lái)越復(fù)雜時(shí)組織邏輯
• Escape Hatches：如何“走出”React，以及什么時(shí)候這樣做最有意義

Learn 部分的大多數(shù)頁(yè)面都以一些挑戰(zhàn)結(jié)尾，以檢查理解程度。例如，以下是有關(guān)條件渲染頁(yè)面的挑戰(zhàn)：

在每個(gè)挑戰(zhàn)的左下角都有一個(gè) Show solution 按鈕，可以點(diǎn)擊查看挑戰(zhàn)的解決方案。

在教程中，通過(guò)了很多更直觀的圖表，以幫助快速快速理解。例如，這是 Preserving and Resetting State 中的一張圖表：

我們還可以在新文檔中看到一些插圖，下面是繪制屏幕的瀏覽器：

API Reference

在 API Reference 中，每個(gè) React API 現(xiàn)在都有一個(gè)專用的頁(yè)面。這包括各種 API：

• 內(nèi)置 Hooks，如 useState。
• 內(nèi)置組件，如 <Suspense>。
• 內(nèi)置瀏覽器組件，如 <input>。
• 面向框架的 API，例如 renderToPipeableStream。
• 其他 React API，例如 memo。

每個(gè) API 頁(yè)面都至少分為兩個(gè)部分：

• Reference：通過(guò)列出其參數(shù)和返回值來(lái)描述 API 的簽名。
• Usage：顯示了為什么以及如何在實(shí)踐中使用此 API。它顯示了 React 團(tuán)隊(duì)如何使用每個(gè) API 的典型場(chǎng)景。

除此之外，一些 API 頁(yè)面還包括故障排除（針對(duì)常見問(wèn)題）和備選方案（針對(duì)已棄用的 API）。希望這種方法將使 API Reference 不僅作為一種查找參數(shù)的方式，而且作為一種方式來(lái)查看可以使用任何給定的 API 執(zhí)行的所有不同的事情——以及它如何連接到其他 API。

Community

React 擁有一個(gè)由數(shù)百萬(wàn)開發(fā)人員組成的社區(qū)，Community 部分包含了一些可以加入的 React 相關(guān)社區(qū)。除此之外，還包含了React 會(huì)議、React 視頻、React 聚會(huì)、React 團(tuán)隊(duì)、React 文檔貢獻(xiàn)者、致謝以及版本控制策略。

未來(lái)

React 團(tuán)隊(duì)花了很長(zhǎng)時(shí)間才發(fā)布新文檔。希望保持 React 社區(qū)應(yīng)得的高質(zhì)量標(biāo)準(zhǔn)。在編寫這些文檔和創(chuàng)建所有示例時(shí)，React 團(tuán)隊(duì)發(fā)現(xiàn)了自己的一些解釋中的錯(cuò)誤、React 中的錯(cuò)誤，甚至現(xiàn)在正在努力解決的 React 設(shè)計(jì)中的漏洞。希望新文檔能幫助 React 團(tuán)隊(duì)在未來(lái)將 React 提升到一個(gè)更高的標(biāo)準(zhǔn)。

社區(qū)中還有許多對(duì)擴(kuò)展網(wǎng)站內(nèi)容和功能的要求，例如：

• 為所有示例提供 TypeScript 版本。
• 創(chuàng)建更新的性能、測(cè)試和可訪問(wèn)性指南。
• 獨(dú)立于支持它們的框架記錄 React 服務(wù)端組件。
• 與國(guó)際社區(qū)合作翻譯新文檔。
• 向新網(wǎng)站添加缺少的功能（例如，博客的 RSS）。

現(xiàn)在新文檔已經(jīng)發(fā)布了，未來(lái) React 團(tuán)隊(duì)的重點(diǎn)就是添加新信息和進(jìn)一步改進(jìn)新網(wǎng)站。

最后，期待新文檔中文版能盡快上線！

相關(guān)鏈接

[1]Learn React: https://react.dev/learn。

[?2]API Reference: https://react.dev/reference。

[3]Legacy API: https://react.dev/reference/react/legacy。