草庐IT

React 正式推出全新官方文档!

CUGGZ 2023-03-28 原文

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 团队的重点就是添加新信息和进一步改进新网站。

最后,期待新文档中文版能尽快上线!

相关链接

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

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

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

有关React 正式推出全新官方文档!的更多相关文章

  1. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  2. Matlab imread()读到了什么 (浅显 当复习文档了) - 2

    matlab打开matlab,用最简单的imread方法读取一个图像clcclearimg_h=imread('hua.jpg');返回一个数组(矩阵),往往是a*b*cunit8类型解释一下这个三维数组的意思,行数、数和层数,unit8:指数据类型,无符号八位整形,可理解为0~2^8的数三个层数分别代表RGB三个通道图像rgb最常用的是24-位实现方法,即RGB每个通道有256色阶(2^8)。基于这样的24-位RGB模型的色彩空间可以表现256×256×256≈1670万色当imshow传入了一个二维数组,它将以灰度方式绘制;可以把图像拆分为rgb三层,可以以灰度的方式观察它figure(1

  3. Ruby 等同于 Sphinx 文档生成器? - 2

    Ruby有一些不错的文档生成器,例如Yard、rDoc,甚至Glyph。问题是Sphinx可以做网站、PDF、epub、LaTex等。它在重组文本中完成所有这些事情。在Ruby世界中有替​​代方案吗?也许是程序的组合?如果我也能使用Markdown就更好了。 最佳答案 自1.0版以来,Sphinx有了“域”的概念,它是从Python和/或C以外的语言标记代码实体(如方法调用、对象、函数等)的方法。有一个rubydomain,所以你可以只使用Sphinx本身。您唯一会缺少的(我认为)是Sphinx使用autodoc从源代码自动创建文档

  4. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务,每x秒轮询一次队列,并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外,还有其他稳定的替代方案吗? 最佳答案 尽管启动基于Rails的持久任务是一种选择,但您可能希望查看更有序的系统,例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西,因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的,因为Rails上的启动时间通常为5-15秒,具体取决于您的硬件。不过,每天这样做几

  5. ruby-on-rails - 在 irb 中阅读文档 - 2

    我怀念ipython的一件事是它有一个?为特定功能挖掘文档的运算符。我知道ruby​​有一个类似的命令行工具,但是我在irb中调用它非常不方便。ruby/irb有类似的东西吗? 最佳答案 Pry是IPython的Ruby版本,它支持?命令来查找有关方法的文档,但语法略有不同:pry(main)>?File.dirnameFrom:file.cinRubyCore(CMethod):Numberoflines:6visibility:publicsignature:dirname()Returnsallcomponentsofthef

  6. ruby - 使用 Nokogiri 和 Ruby 从 html 文档获取链接和 href 文本? - 2

    我正在尝试使用nokogirigem提取页面上的所有url及其链接文本,并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案 这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t

  7. ruby - 如何让 Nokogiri 解析并返回 XML 文档? - 2

    这是一些奇怪的例子:#!/usr/bin/rubyrequire'rubygems'require'open-uri'require'nokogiri'print"withoutread:",Nokogiri(open('http://weblog.rubyonrails.org/')).class,"\n"print"withread:",Nokogiri(open('http://weblog.rubyonrails.org/').read).class,"\n"运行此返回:withoutread:Nokogiri::XML::Documentwithread:Nokogiri::

  8. H2数据库配置及相关使用方式一站式介绍(极为详细并整理官方文档) - 2

    目录H2数据库入门以及实际开发时的使用1.H2数据库的初识1.1H2数据库介绍1.2为什么要使用嵌入式数据库?1.3嵌入式数据库对比1.3.1性能对比1.4技术选型思考2.H2数据库实战2.1H2数据库下载搭建以及部署2.1.1H2数据库的下载2.1.2数据库启动2.1.2.1windows系统可以在bin目录下执行h2.bat2.1.2.2同理可以通过cmd直接使用命令进行启动:2.1.2.3启动后控制台页面:2.1.3spring整合H2数据库2.1.3.1引入依赖文件2.1.4数据库通过file模式实际保存数据的位置2.2H2数据库操作2.2.1Mysql兼容模式2.2.2Mysql模式

  9. Ruby YAML 多文档 - 2

    这是我的YAML文件“test.yml”:---alpha:100.0beta:200.0gama:300.0---3...第一个文档是一个散列。第二个文档是一个整数。我正在尝试将它们作为散列和整数加载到Ruby程序中。这是我目前的尝试:require'yaml'variables=YAML.load_file('test.yml')putsvariables.inspect 最佳答案 要访问单个文件中的多个YAML文档,请使用load_stream方法(正如“matt”在对其他答案之一的评论中提到的):YAML.load_stre

  10. ruby - 自动将院子文档框架添加到现有的 Rails 遗留代码中 - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。关闭4年前。Improvethisquestion我希望能够将模板化的YARD文档样式注释插入到我现有的Rails遗留应用程序中。目前它的评论很少。我想要具有指定参数的类header和方法header(通过从我假定的方法签名中提取)和返回值的占位符。在PHP代码中,我有一些工具可以检查代码并在适当的位置创建插入到代码中的文档header注释。在带有Ducktyping等的Ruby中,我确信诸如@params等类型之类

随机推荐