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/??

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

• 教程和指南：提供了大量的教程和指南，幫助開(kāi)發(fā)者從零開(kāi)始學(xué)習(xí)React或深入研究特定主題。
• 代碼示例和演示：提供了一系列的代碼示例和演示，展示了React的強(qiáng)大和靈活性。
• 最佳實(shí)踐和技巧：了解最新的 React 最佳實(shí)踐和技巧，學(xué)習(xí)如何優(yōu)化代碼以實(shí)現(xiàn)更好的性能。
• 社區(qū)論壇：與其他 React 開(kāi)發(fā)人員聯(lián)系，在項(xiàng)目中獲得幫助或在社區(qū)分享專業(yè)知識(shí)。
• 新聞和更新：第一時(shí)間了解 React 開(kāi)發(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，從開(kāi)始就教授如何使用 Hooks 來(lái)學(xué)習(xí) React。文檔分為兩個(gè)主要部分：

• Learn React^[1]：一個(gè)自學(xué)課程，從零開(kāi)始教授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è)井字棋小游戲，并教授了一些開(kāi)發(fā)技能。這是一個(gè)在線交互式教程，可以自己嘗試修改：

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

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

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ì)常見(jiàn)問(wèn)題）和備選方案（針對(duì)已棄用的 API）。希望這種方法將使 API Reference 不僅作為一種查找參數(shù)的方式，而且作為一種方式來(lái)查看可以使用任何給定的 API 執(zhí)行的所有不同的事情——以及它如何連接到其他 API。

Community

React 擁有一個(gè)由數(shù)百萬(wàn)開(kāi)發(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。