React 正式推出全新官方文檔！

作者：CUGGZ 2023-03-19 11:42:19

開發前端

React 團隊花了很長時間才發布新文檔。希望保持 React 社區應得的高質量標準。在編寫這些文檔和創建所有示例時，React 團隊發現了自己的一些解釋中的錯誤、React 中的錯誤，甚至現在正在努力解決的 React 設計中的漏洞。

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 提升到一個更高的標準。

社區中還有許多對擴展網站內容和功能的要求，例如：

為所有示例提供 TypeScript 版本。
創建更新的性能、測試和可訪問性指南。
獨立于支持它們的框架記錄 React 服務端組件。
與國際社區合作翻譯新文檔。
向新網站添加缺少的功能（例如，博客的 RSS）。

現在新文檔已經發布了，未來 React 團隊的重點就是添加新信息和進一步改進新網站。

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