react2023.yml

locale: zh-Hans
translations:
  ###########################################################################
  # General
  ###########################################################################

  - key: general.results.description
    t: 2023 年度调查，聚焦 React 生态系统的最新趋势。

  ###########################################################################
  # Introduction
  ###########################################################################

  - key: introduction.react2023
    t: |

      <span class="first-letter">R</span>eact 已经存在 11 年了，这在当前 Web 开发的快速节奏下似乎难以想象。

      我们今天仍在谈论 React 的原因是，它以某种方式能够跟上时代的步伐，不断发展以应对用户提出的挑战。

      事实上，React 并不满足于仅仅跟上脚步，它甚至在引领新的创新模式，如服务器组件和即将推出的编译器。

      话虽如此，请注意，这些数据是在 **2023 年 10 月 27 日**至 **11 月 15 日**期间收集的，这意味着本次调查未涵盖 React 19 以及在此时间段之后可能发生的任何其他发展。

      即便如此，这里仍有很多值得探索的内容，从组件库到状态管理技术，再到应用程序模式。让我们一起来看看第一次 React 社区调查的结果吧！

      *这是一项非官方调查，与 Meta、Vercel 或 React 团队无关。*

      <span class="conclusion__byline">– Sacha Greif</span>

  ###########################################################################
  # Tshirt
  ###########################################################################

  - key: sections.tshirt.title
    t: T 恤

  - key: sections.tshirt.description
    t: |
      ## 购买官方 State of React T 恤支持本次调查

      这是一个库？一个框架？还是一个处于突变边缘的未知元素，可能变成一个危险的、不稳定的实体？无论你对 React 有何看法，你都会在这个设计中找到自己的感受，它呼应了动漫和科幻的元素。

  - key: tshirt.about
    t: 关于 T 恤

  - key: tshirt.description
    t: |
      我们使用高质量的 T 恤，由我们的合作伙伴 Cotton Bureau 印制。

  - key: tshirt.getit
    t: 立即购买

  - key: tshirt.price
    t: 32 美元 + 运费

  - key: tshirt.designer.heading
    t: 关于设计师

  - key: tshirt.designer.name
    t: Christopher Kirk-Nielsen

  - key: tshirt.designer.bio
    t: |
      Chris 原籍法国，现居美国，他不仅是一位出色的前端开发者，还是一位专注于复古视觉的talented插画师。事实上，我们也鼓励你去看看他的[其他 T 恤设计](https://chriskirknielsen.com/designs)！

  ###########################################################################
  # Content
  ###########################################################################

  # user_info

  - key: sections.user_info.description
    t: |
      **13,003** 名受访者参与了首次 State of React 调查。虽然这只是整个社区的一小部分样本，但足以为我们提供有价值的数据！

  - key: user_info.country.takeaway
    t: |
      大多数受访者来自**美国**和**欧洲**。

  - key: user_info.locale.takeaway
    aliasFor: user_info.locale.description

  - key: user_info.completion_stats.takeaway
    aliasFor: user_info.completion_stats.description

  # features

  - key: sections.features.description
    t: |
      我们询问了受访者对 **28** 个不同特性的看法，从无处不在的 Hooks（如 `useState`）到更小众的 API（如 `useDeferredValue`）。记得尝试按 "sentiment" 排序！

  - key: features.all_features
    t: 所有特性

  - key: features.all_features.takeaway
    t: |
      这张图表总结了调查中所有的特性问题。主要条形图代表受访者的经验；它们进一步细分为受访者的感受。你可以更改分组以在两者之间切换。

  - key: features.reading_list.takeaway
    t: >
      **30%** 的受访者在参与调查时至少添加了一项内容到他们的阅读列表中，以便日后学习。这里是他们选择的内容明细。

  - key: features.main_apis_items
    t: 主要 API 的使用经验和感受

  - key: features.main_apis_pain_points.takeaway
    t: >
      在最常用的 React API 中，`forwardRef` 是给开发者带来最多痛点的，紧随其后的是 `memo`。幸运的是，React 团队正在推出更好的替代方案。

  - key: features.hooks_items
    t: Hooks 的使用经验和感受

  - key: features.hooks_pain_points.takeaway
    t: >
      不出所料，`useEffect` 和 `useCallback` 被认为是最有问题的 React hooks，主要是由于依赖数组的管理。

  - key: features.new_apis_items
    t: 新 API 的使用经验和感受

  - key: features.new_apis_pain_points.takeaway
    t: >
      虽然 React 能够不断发展并保持相关性是其最大的优势之一，但这也是有代价的，新的 API（如**服务器组件**）确实可能很难采用。

  # libraries

  - key: sections.libraries.description
    t: |
      我们重新设计了图表，不仅突出显示开发者的使用经验，还包括他们的*感受*。一定要探索这些新的分组和排序选项，了解哪些库最受欢迎……或最不受欢迎！

  - key: tools.all_tools_experience
    t: 库的使用经验和感受

  - key: tools.all_tools_experience.takeaway
    t: >
      在 React 库和框架中，**Next.js** 和 **TanStack Query** 在整体积极性方面领先。

      请注意，一些项目（如 `useState` 和 `fetch`）也被包括在内，以提供基准，尽管它们本身并不是库。

  - key: tools.scatterplot_overview
    t: 库的保留率与使用率

  - key: tools.scatterplot_overview.takeaway
    t: >
      在库和框架中，**Next.js** 是唯一一个同时具有高保留率和高使用率的项目。另一方面，虽然更多的受访者使用过 **Create React App**，但愿意继续使用它的人要少得多。

  # component libraries

  - key: tools.component_libraries_experience
    t: 组件库的使用经验和感受

  - key: tools.component_libraries_experience.takeaway
    t: >
      **React Aria** 和 **Radix** 在积极性排名中领先，证明了无头（headless）组件库方法的优势。

  # state management

  - key: tools.state_management_experience
    t: 状态管理的使用经验和感受

  - key: tools.state_management_experience.takeaway
    t: >
      除了 **useState**，积极比率最高的状态管理解决方案是 **Zustand**。而虽然 **Redux** 仍然拥有庞大的用户群，但它并没有那么受欢迎。

  # data loading

  - key: tools.data_loading_experience
    t: 数据加载的使用经验和感受

  - key: tools.data_loading_experience.takeaway
    t: >
      **TanStack Query** 已经引起轰动一段时间了，事实证明它的声誉反映在数据中，它是受访者感觉最积极的数据加载方法，仅次于原生的 `fetch` API。

  # back-end infrastructure

  - key: tools.meta_frameworks_experience
    t: 元框架的使用经验和感受

  - key: tools.meta_frameworks_experience.takeaway
    t: >
      虽然你肯定能找到很多人抱怨 **Next.js**，但它仍然在元框架的积极性排名中名列前茅，其次是 **Remix** 和 **Astro**。

  # other_tools

  - key: sections.other_tools.description
    t: |
      React 以专注于 UI 渲染而闻名，同时对应用程序的其他部分保持相当中立的态度，这反映在为填补这些空白而涌现的充满活力的生态系统中！

  # usage

  - key: sections.usage.description
    t: |
      无论你使用哪个版本、采用什么应用程序模式，或者属于哪个行业领域，使用 React 都没有错误的方式！

  - key: usage.js_app_patterns.takeaway
    t: >
      尽管人们关注静态站点生成、服务器端渲染和服务器组件，但有趣的是，绝大多数 React 用户仍在开发单页应用程序。

  - key: usage.react_version.takeaway
    t: >
      请注意，这次调查是在 React 19 宣布或发布**之前**进行的。

  # resources

  - key: sections.resources.description
    t: |
      React 持续主导的一个重要原因是它多年来积累的大量文档、博客文章、视频和其他资源。这里只是其中的一小部分样本！

  - key: resources.learning_methods.takeaway
    t: |
      React 团队在新的 React 文档网站上做得非常出色，所以它成为人们学习这个框架的首选方式并不令人意外。

  - key: resources.blogs_news_magazines.takeaway
    t: |
      虽然这个列表中有许多常见的名字，但值得庆祝的是出现了一些专注于 React 的媒体，如 **This Week in React** 或 **React Status**。

  - key: resources.sites_courses.takeaway
    t: |
      虽然 **Stack Overflow** 最近经历了自己的一些 AI 相关的麻烦，但它目前仍然排名第一。

  - key: resources.podcasts.takeaway
    t: |
      **Syntax** 继续在开发播客领域保持领先地位。同时值得注意的是，前 10 名中缺少任何专门涉及 React 的活跃播客。

  - key: resources.video_creators.takeaway
    t: |
      虽然 **Theo** 和 **Web Dev Simplified** 都包含 React 内容，但有趣的是，尽管通常不涉及 React，**The Primeagen** 仍然排在第 3 位。

  - key: resources.people.takeaway
    t: |
      在 React 社区中，成为有影响力的人物并不令人意外，**Dan Abramov** 排名第一 —— 尽管 **Kent C. Dodds** 和 **Theo** 似乎都在挑战这个位置。

  # awards
  - key: sections.awards.description
    t: |
      今年的奖项被一个非常特别的项目主导…… 你能多快猜出它是什么？

  ###########################################################################
  # Charts
  ###########################################################################

  - key: options.features_categories.language
    aliasFor: sections.language.title
  - key: options.features_categories.browser_apis
    aliasFor: sections.browser_apis.title
  - key: options.features_categories.other_features
    aliasFor: sections.other_features.title

  ###########################################################################
  # Notes
  ###########################################################################

  - key: blocks.gender.note
    t: |
      如果你想了解更多，我们[写了一篇博客文章](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj)，讨论了调查中的性别动态。

  - key: blocks.source.note
    t: >

      这张图表汇总了一系列推荐人、URL 参数和自由形式的回答。

      - State of JS：[State of JS](https://stateofjs.com) 邮件列表。

      - State of CSS：State of CSS 邮件列表；也匹配 `email`、`by email` 等。

      - 工作：匹配 `work`、`colleagues`、`coworkers` 等。

  ###########################################################################
  # Awards
  ###########################################################################

  - key: award.feature_adoption_delta_award.comment
    t: 在 2022 年，**顶级 await** 的使用率增长了 **{value}**，迅速成为 JavaScript 的一个不可或缺的部分。

  - key: award.tool_usage_delta_award.comment
    t: |
      **Vite** 继续成为增长最快的库，年同比使用率增长 **{value}**！

  - key: award.tool_satisfaction_award.comment
    t: Vite 再次夺得榜首，**{value}** 的开发者愿意再次使用它！

  - key: award.tool_interest_award.comment
    t: 你猜是 Vite 吗？差不多，但今年 **Vitest** 是开发者最感兴趣的技术，兴趣比率为 **{value}**。

  - key: award.most_write_ins_award.comment
    t: 在自由形式的问题中，**Bun** 以 **{value}** 次提及成为被提到最多的技术。

  - key: award.most_commented_tool_award.comment
    t: 以 **{value}** 条评论，React 再次证明它是最受讨论的库。

  - key: award.most_loved_tool_award.comment
    t: 有 **{value}** 的开发者对它持积极态度，Vite 通过成为最受喜爱的技术完成了对这些奖项的横扫！

  ###########################################################################
  # Conclusion
  ###########################################################################

  - key: conclusion.react2023.josh_comeau
    t: |

      <span class="first-line">多么不平凡的一年啊！</span>

      随着 React 服务器组件的引入，我要说这是自 2018 年 React Hooks 首次推出以来，React 最重要的一年。

      在 2018 年之后的 5 年里，Hooks 已经获得了压倒性的采用率。高达 99.5% 的调查受访者已经采用了 `useState`，而且不到 2% 的人对此不满意。类组件仍然存在，但它们已经被降级到遗留代码库和偶尔的错误边界组件中。

      然而，我在想…… 在服务器组件发布 5 年后的 2028 年，我们都会使用服务器组件吗？我不太确定。服务器组件范式需要与打包工具和路由器深度集成。这不是大多数开发者可以在当前 React 代码库中逐步采用的东西。

      React 开发者喜欢保持更新；71% 的调查受访者表示他们正在使用 React 18，这是收集数据时可用的最新版本。同时，最广泛使用的 React 环境仍然是 Create React App，尽管它已经正式弃用，自 2022 年 4 月以来没有发布新版本。我们很乐意在新版本发布时更新 React，但我们不会切换到不同的环境；37% 的调查受访者甚至从未使用过 SSR（服务器端渲染），尽管这个选项已经存在十多年了！

      如果让我猜的话，我会说在 2028 年，将会有两个广泛流通的 React 版本，使用率大致相当。一个是带有服务器组件和服务器操作的"全栈"版本，另一个是仅客户端的单页应用版本。

      我们生活在一个有趣的时代！我很期待看到 React 及其生态系统在未来几年如何发展。❤️

  - key: conclusion.react2023.josh_comeau.bio
    t: 软件工程师和教育者。[The Joy of React](https://www.joyofreact.com/) 的创作者

  ###########################################################################
  # Picks
  ###########################################################################

  - key: picks.my_pick
    t: "我的 2023 年度之选："
  - key: picks.intro
    t: 我们邀请了 React 社区的成员分享他们的"年度之选"

  # https://zustand-demo.pmnd.rs
  - key: picks.jack_herrington.name
    t: Zustand
  - key: picks.jack_herrington.bio
    t: 首席工程师和 YouTuber
  - key: picks.jack_herrington.description
    t: |
      简单、优雅、可扩展的状态管理，"就是好用"（TM）。如今，你可能不需要状态管理，但如果你需要，Zustand 是一个很好的起点。

  # https://react.dev/reference/rsc/server-components
  - key: picks.alex_sidorenko.name
    t: React 服务器组件
  - key: picks.alex_sidorenko.bio
    t: 在 Twitter 上制作关于 Next.js 的短视频
  - key: picks.alex_sidorenko.description
    t: |
      十一年前，React 通过挑战既定做法重新想象了 Web 开发。现在，React 正在通过 RSC 再次这样做。

      附：向推动这一新愿景前进的 Next.js 团队致敬。

  # https://youtube.com/watch?v=zqhE-CepH2g
  - key: picks.sam_selikoff.name
    t: |
      "Mind the Gap" —— Ryan Florence 在 Big Sky Dev Con 2024 的演讲
  - key: picks.sam_selikoff.bio
    t: Build UI 和 YouTube 上的前端开发者视频制作者，Frontend First 播客的共同主持人
  - key: picks.sam_selikoff.description
    t: |
      Ryan 巧妙地展示了 React 的新 "use server" 和 "use client" 指令如何让我们使用相同的统一范式在网络的两端构建丰富的功能。这是每个 React 开发者必看的内容。

  # https://www.remotion.dev/
  - key: picks.sebastien_lorber.name
    t: Remotion
  - key: picks.sebastien_lorber.bio
    t: |
      [This Week in React](https://thisweekinreact.com/) 的创建者
  - key: picks.sebastien_lorber.description
    t: |
      在 React 中创建程序化视频的想法继续让我着迷。Remotion 是一个相当低调的项目，它继续缓慢但稳定地增长，成功被开发者关系人员、教育工作者、独立创作者和大型公司（特别是 GitHub 的 Unwrapped 视频活动）采用。

  # https://buildui.com/posts/instant-search-params-with-react-server-components
  - key: picks.aurora_scharff.name
    t: 使用 React 服务器组件实现即时搜索参数
  - key: picks.aurora_scharff.bio
    t: Inmeta 的 Web 开发者和顾问
  - key: picks.aurora_scharff.description
    t: |
      这篇博文讨论了在使用 Next.js App Router 构建proper应用时可能遇到的问题：处理搜索参数。让交互表现"完美"出奇地困难，文章最后给出了解决方案：useOptimistic。它还通过大量沙盒演示教你关于transitions的知识。

  # https://mui.com/blog/introducing-pigment-css/
  - key: picks.josh_comeau.name
    t: Pigment CSS
  - key: picks.josh_comeau.bio
    t: 软件工程师和教育者。[The Joy of React](https://www.joyofreact.com/) 的创作者
  - key: picks.josh_comeau.description
    t: |
      Material UI 团队正在构建一个下一代的 CSS-in-JS 库，将 styled API 引入 React 服务器组件时代。虽然已经有不少 CSS-in-JS 工具，但这个符合我所有的要求。

  # https://www.propelauth.com/post/nextjs-challenges
  - key: picks.carl_vitullo.name
    t: 不是你的错，Next.js 正变得越来越难使用
  - key: picks.carl_vitullo.bio
    t: 独立创业者，目前主持 [This Month in React](https://podcasts.apple.com/us/podcast/this-month-in-react/id1661733526)，以及 [Reactiflux](https://www.reactiflux.com/) 的社区负责人
  - key: picks.carl_vitullo.description
    t: |
      这是一篇很棒的博文！我认为它捕捉到了 React 当前的时代精神，清晰地阐述了 2024 年贯穿整个生态系统的一种潜在挫折感。

  # https://sonner.emilkowal.ski
  - key: picks.miguel_angel_duran.name
    t: Sonner
  - key: picks.miguel_angel_duran.bio
    t: Twitch 编程主播和内容创作者
  - key: picks.miguel_angel_duran.description
    t: |
      Sonner 是 React 最好的 toast 组件。默认就很漂亮，高度可配置，并且有一个简单的 API 可以在任何项目中使用。Emil 的出色作品。

  # https://docs.expo.dev/router/introduction/
  - key: picks.lydia_hallie.name
    t: Expo Router
  - key: picks.lydia_hallie.bio
    t: 独立软件工程师和技术内容创作者
  - key: picks.lydia_hallie.description
    t: |
      Expo Router 凭借其在 Web 和原生领域的巨大潜力成为我的首选。它是首个利用 React 全部功能在所有平台上运行的框架，使 React 成为真正的平台无关渲染器。它基于文件的架构使 Web 开发者更容易适应原生平台，加快开发速度，缩短了在所有设备上发布的时间。

  ###########################################################################
  # Sponsors
  ###########################################################################

  - key: sponsors.frontendmasters.description
    t: 通过深入、现代的前端工程课程提升你的技能。
  - key: sponsors.google_chrome.description
    t: 感谢 Google Chrome 团队对我们工作的支持。
  - key: sponsors.tokyodev.description
    t: 立即在日本找到你理想的开发者工作。
  - key: sponsors.renderatl.description
    t: 专注于 Web 领域的科技会议。

  ###########################################################################
  # FAQ/About
  ###########################################################################

  - key: about.content
    t: |
      2023 年 State of React 调查于 2023 年 10 月 27 日至 11 月 15 日进行，共收集了 13,003 份回复。结果于 2024 年 7 月 20 日发布。该调查由 [Devographics](https://devographics.com/) 运营，这是一个由我（[Sacha Greif](https://sachagreif.com/)）和 [Eric Burel](https://www.lbke.fr/) 组成的集体，以及受邀专家和开源贡献者。

      State of React 的标志和 T 恤由 [Christopher Kirk-Nielsen](http://chriskirknielsen.com/) 设计。

      ### 调查目标

      创建这个调查的目的是为了识别 React 生态系统中即将出现的趋势，以帮助开发者做出技术选择。

      因此，调查的重点是预测未来几年可能出现的情况，而不是分析现在流行的东西，这就是为什么有时会忽略某些特性或技术，即使它们目前广泛使用。

      它也应该被视为**特定开发者子集的快照**，并不意味着代表整个 React 生态系统。

      ### 调查设计

      调查的设计部分基于去年的调查，并有一个开放的反馈期，在此期间[在 GitHub 上](https://github.com/Devographics/surveys/issues/85)讨论了调查大纲。

      所有调查问题都是可选的。

      ### 调查受众

      该调查在网上公开访问，受访者没有经过任何筛选或选择。受访者主要是过去调查的受访者（通过专门的邮件列表通知）和社交媒体流量的混合。

      请注意，框架、库等可以自由鼓励他们的受众参与调查，有些确实通过横幅、推文等方式利用了这一点。详细的流量来源明细包含在"来源"图表中。

      ### 项目资金

      该项目的资金来自多个来源：

      - **T 恤销售**。

      - **赞助链接**：每个页面底部的推荐资源链接由我们的合作伙伴 [Frontend Masters](https://frontendmasters.com/) 提供。

      - **直接资助**：今年，[Google](https://www.google.com/) 和 [TokyoDev](https://www.tokyodev.com/) 资助了我在调查上的工作。

      我们非常感谢任何贡献或赞助。我们特别希望与更多的浏览器供应商密切合作，因为它们在 Web 生态系统中扮演着如此重要的角色。

      ### 技术概述

      你可以在[这里](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a)找到关于如何运行调查的更深入的技术概述。

      **注意：这*不是*官方的 React 调查，调查团队也不隶属于 Meta、Vercel 或 React 团队。**

      ### 特别鸣谢

      特别感谢 Paul McMahon、Marc Grabanski 和 Justin E. Samuels 的持续支持。