react2024.yml

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

  - key: general.results.description
    t: 2024 年度 React 生态系统最新趋势调查报告。

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

  - key: general.react2024.survey_intro
    t: |
      让我们面对现实：无论是你还是我，都没有那个毅力和耐心去完全跟上 React 生态系统的发展。每周都有新的 API、新的库甚至新版本发布，实在令人应接不暇。

      幸运的是，有一个人主动承担起了这个重任：他就是 [This Week in React](https://thisweekinreact.com/) 的 Sebastien Lorber。

      Sebastien 慷慨地分享了他的专业知识，确保今年的调查涵盖了所有重要领域。这意味着通过参与这次调查，你不仅能为社区提供宝贵的见解，还能借此机会了解到你可能错过的最新进展。

      所以，让我们再次一起参与今年的 React 生态调查吧！

  - key: features.features_intro.react2024
    t: |
      欢迎参加调查！第一部分主要是分享你对各种 React 特性的使用体验：

      - **从未听说**：这是你第一次看到这个特性，或者虽然听说过但完全不知道它是做什么的。

      - **听说过**：你读到过或了解过这个特性，但还没有实际使用过。

      - **使用过**：你至少使用过一次这个特性，哪怕只是尝试性质的。

      顺便说一下，如果你想详细说明你的选择理由，只需点击那个小小的"评论"图标就可以了！
  - key: tools.tools_intro.react2024
    t: |
      调查的下一部分是关于构成 React 生态系统的各种库和框架。

  - key: introduction.react2024
    t: |

      <span class="first-letter">对</span>于 React 来说，今年是整合的一年。

      由于社区仍在为 React Server Components 的推出而忐忑不安，因此没有出现任何重大的破坏性变化是非常值得欢迎的。

      相反，React 19 专注于消除我们的许多痛苦，从让 `forwardRef` 过时，到水合错误的差异，再到新的编译器，它让我们的代码性能更强，而我们只需做极少的额外工作。

      尽管 React 本身可能正试图平息事态，但生态系统仍在以迅猛的速度进行创新。例如，在过去的一年中，TanStack 团队利用 TanStack Query 的成功经验创建了 TanStack Start，这是 Next.js 元框架王座的潜在挑战者--尤其是对于那些尚未准备好接受服务器优先的人来说。 

      但至少现在，让我们喘口气，庆祝一下世界上最流行的 JavaScript 库的相对稳定性。

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

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

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

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

  - key: sections.tshirt.description
    t: |
      ## 购买官方 React 生态调查 T 恤支持我们

      它是一个库？一个框架？还是一个正在突变成危险且不稳定实体的未知元素？不管你对 React 有什么看法，你都能在这件融合了动漫和科幻元素的设计中找到共鸣。

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

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

  - 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 原籍法国，现居美国，他不仅是一位出色的前端开发者，还是一位专注于复古视觉风格的才华横溢的插画师。事实上，我们建议你也去看看他的[其他 T 恤设计作品](https://chriskirknielsen.com/designs)！

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

  # user_info

  - key: sections.user_info.description.react2024
    t: |
      **共有 7870** 名受访者参与了第二期 React 现状调查。虽然这只是整个社区的一小部分样本，但仍足以为我们提供有价值的数据！
  - key: user_info.country.takeaway
    t: |
      大多数受访者来自**美国**和**欧洲**。

  - key: user_info.age.takeaway.react2024
    t: |
      State of React 受访者的平均年龄为 32.4 岁，略低于 State of JS（33.5 岁）和 State of CSS （34.9 岁）。

  - key: user_info.years_of_experience.takeaway.react2024
    t: |
      59% 的受访者拥有不到 10 年的工作经验，这意味着他们从来不知道没有 React 的世界（React 本身已有近 12 年的历史！）。

  - key: user_info.company_size.takeaway.react2024
    t: |
      44% 的受访者供职于员工人数超过 100 人的公司。

  - key: user_info.yearly_salary.takeaway.react2024
    t: |
      调查对象的工资中位数（75,000 美元）略高于 State of JS 的结果（70,000 美元）。然而，美国与世界其他国家的收入差距依然存在。

  - key: user_info.job_title.takeaway.react2024
    t: |
      “工程师 “仍然是最赚钱的职称，而 ”开发人员 "仍然处于最底层。

      与最近的[JavaScript 现状调查结果]（https://2024.stateofjs.com/en-US/demographics/#job_title）一样，全栈和前端职位的平均员工年龄最小，前端职位的女性比例也明显较高。

  - key: user_info.higher_education_degree.takeaway.react2024
    t: |
      与其他调查显示的结果不同，这次没有高等教育学位似乎与收入水平较低并不相关。

  - key: user_info.gender.takeaway.react2024
    t: |
      本期调查的男性比例为 92%，与以往调查的性别比例保持一致，这表明仍需进一步努力扩大调查的覆盖面，确保调查能代表社会的方方面面。

  - key: user_info.race_ethnicity.takeaway.react2024
    t: |
      令人鼓舞的是，西班牙裔和拉丁裔受访者的比例从 11% 攀升至 19%，这可能与讲西班牙语和葡萄牙语的流媒体和教育工作者越来越受欢迎相吻合。

  - key: user_info.disability_status.takeaway.react2024
    t: |
      无论是永久性的还是暂时性的，残疾是许多人日常生活的一部分，这一点值得我们在开发新应用程序时牢记。

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

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

  # features

  - key: sections.features.description.react2024
    t: |
      我们询问了受访者对 **28** 个不同功能特性的看法，从无处不在的 `useState` 钩子，到较为小众的 API 如 `useDeferredValue`。记得试着按"情感倾向"排序查看！

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

  - key: features.all_features.takeaway.react2024
    t: |
      本图表概括了调查的所有特性问题。主条形图代表受访者的体验，然后根据受访者的情感进一步细分。您可以更改分组，使两者交替进行。


      今年值得强调的是 虽然只有 46.4% 的受访者使用过 `createPortal`，但它却是第五大最受喜爱的功能。另一方面，“Taint API ”既是使用率最低的功能，也是最不为人知的功能，这也是情理之中的，因为它仍处于试验阶段。


      相反，`useState` 不仅是使用率最高的功能，也是最受喜爱的功能，只有 1.26% 的负面情绪。

  - key: features.reading_list.takeaway.react2024
    t: >
      **25%** 的受访者在接受调查时在阅读清单中添加了一些项目，以便日后了解更多相关信息。以下是他们选择的细目。

  - key: features.main_apis_items
    t: 主要 API 的体验与感受
  - key: features.main_apis_pain_points.takeaway.react2024
    t: >
      与去年一样，`forwardRef` 和 `memo` 是最常见的 React API 中的首要痛点。随着 React 19 的发布并有望缓解这两个问题，我们不妨看看明年的图表会是什么样子。

  - key: features.hooks_items
    t: Hooks 的体验与感受
  - key: features.hooks_pain_points.takeaway.react2024
    t: >
      `useEffect` 仍然是最容易出问题的 React Hook，这在很大程度上是由于必须手动管理依赖关系数组。

  - key: features.new_apis_items
    t: 新 API 的体验与感受
  - key: features.new_apis_pain_points.takeaway.react2024
    t: >
      **React 服务器组件** 和整体复杂性仍然是使用 React 新特性时的最大痛点。

  # libraries

  - key: sections.libraries.description.react2024
    t: |
      我们重新设计了图表，不仅展示开发者体验，还突出展示了*情感倾向*。一定要探索这些新的分组和排序选项，看看哪些库最受欢迎……或者最不受欢迎！

  - key: tools.all_tools_experience
    t: 库的体验与感受

  - key: tools.all_tools_experience.takeaway.react2024
    t: >
      在 React 库和框架中，**TanStack Query** 和 **Zustand** 已超过 **Next.js** ，在整体积极性方面处于领先地位。


      虽然 **Create React App** 可能是使用最多的框架，但它也是最不受欢迎的框架之一，负面意见占 33.1%，仅次于 Redux 的 34.1%。


      请注意，`useState` 和 `fetch` 等选项也被列为比较点，尽管它们本身并不是库。

  - key: tools.scatterplot_overview
    t: 库的留存率与使用率对比
  - key: tools.scatterplot_overview.takeaway.react2024
    t: >
      在库和框架中，**Next.js** 仍然是唯一一个同时拥有高留存率和高使用率的项目。尽管如此，**TanStack Query** 似乎随时都有可能进入使用率大于 50% 的象限！

  # component libraries

  - key: sections.libraries.description.react2024
    t: |
      We reworked our charts to highlight not just developer experience, but *sentiment*. Be sure to explore these new grouping and sorting options to figure out which libraries get the most love… or the least!

  - key: tools.all_tools_experience
    t: Libraries Experience & Sentiment
  - key: tools.all_tools_experience.takeaway.react2024
    t: >
      Among React libraries and frameworks, **TanStack Query** and **Zustand** have overtaken **Next.js** to take the lead the way in terms of overall positivity.


      And while **Create React App** may be the most used framework, it's also one of the most disliked with 33.1% of negative opinions, right after Redux's 34.1%.


      Note that some items such as `useState` and `fetch` were also included as points of comparison, even though they're not libraries themselves.

  - key: tools.scatterplot_overview
    t: Libraries Retention vs Usage
  - key: tools.scatterplot_overview.takeaway.react2024
    t: >
      Among libraries and frameworks, **Next.js** was still the only item boasting both high retention and high usage. That being said, **TanStack Query** does seem to be on the verge of crossing over into the >50% usage quadrant anytime now!

  # component libraries

  - key: tools.component_libraries_experience
    t: 组件库的体验与感受
  - key: tools.component_libraries_experience.takeaway.react2024
    t: >
      **React Aria** 和 **Radix** 在积极性方面排名第一，这证明无头组件库有很多优点。

  - key: tools.component_libraries_ratios
    t: 组件库随时间变化的比重
  - key: tools.component_libraries_ratios.takeaway.react2024
    t: >
      虽然 **MUI** 在使用率方面一直排名第一，但 **shadcn/ui** 的使用率却大幅提升，一年内从 20% 翻番至 42%，并以 80% 的积极性高居榜首！

  - key: tools.animation_libraries.takeaway.react2024
    t: >
      **Motion**（前身为 Framer Motion）当之无愧地获得第一名，以庆祝其最近的品牌重塑！

  - key: tools.data_visualization_libraries.takeaway.react2024
    t: >
      今年，**Chart.js** 位居榜首。顺便提一下，你知道这项调查的所有图表都是定制的吗？

  - key: tools.form_libraries.takeaway.react2024
    t: >
      目前，**React Hook Form** 是最常见的表单库。但随着 TanStack 的日益流行，未来对 **TanStack Forms** 的关注将非常有趣。

  - key: tools.react_form_patterns.takeaway.react2024
    t: >
      有趣的是，大多数开发人员都能自如地使用 **controlled** 和 **uncontrolled** 两种形式。


      尽管如此，如果你必须只选择一种，那么 **controlled** 表单输入似乎是个不错的选择！

  - key: tools.css_tools.takeaway.react2024
    t: >
      是 **Tailwind** 干掉了 CSS-in-JS 吗？还是 CSS 本身迎头赶上了？无论如何，CSS 架构花哨的时代似乎已经过去了，因为前三名都被历史悠久的 CSS 工具占据了。

  - key: tools.component_libraries_pain_points.takeaway.react2024
    t: >
      由于 **风格和定制** 问题带来的痛苦，难怪 **Radix** 和 **React Aria** 等 “无头” 库如此受欢迎。

  # state management

  - key: tools.state_management_experience
    t: 状态管理的体验与感受
  - key: tools.state_management_experience.takeaway.react2024
    t: >
      除了**useState** ，积极性最高的状态管理解决方案是 **Zustand** 。虽然 **Redux** 仍然拥有庞大的用户群，但它并不那么受人喜爱。

  - key: tools.state_management_ratios
    t: 状态管理随时间变化的比重
  - key: tools.state_management_ratios.takeaway.react2024
    t: >
      **Zustand** 证实了其在积极性方面的领先地位，只有默认的 **useState** 得分更高。在使用率方面，**Zustand** 也有所增长，在过去一年中从 28% 上升到 41%！

  - key: tools.state_management_others.takeaway.react2024
    t: >
      虽然 **TanStack Query** 以数据加载库而闻名，但它在管理结果状态方面也做得很好。

  - key: tools.state_management_pain_points.takeaway.react2024
    t: >
      状态管理作为一个整体仍然过于复杂，特别是 **Redux** 在受访者中受到的批评很大。

  # data loading

  - key: tools.data_loading_experience
    t: 数据加载的体验与感受
  - key: tools.data_loading_experience.takeaway.react2024
    t: >
      **TanStack Query** 已经掀起了一阵波澜，事实证明，它的声誉也反映在了数据中，因为它是受访者感觉最积极的数据加载方案，仅次于本机的 `fetch` API。

  - key: tools.data_loading_ratios
    t: 数据加载随时间变化的比重
  - key: tools.data_loading_ratios.takeaway.react2024
    t: >
      无论是在使用率还是积极性方面，**TanStack Query** 都在继续增长。特别是兴趣图显示，除了 **tRPC** 之外，它几乎是目前唯一一个仍在吸引受访者的数据加载库！

  - key: tools.data_loading_others.takeaway.react2024
    t: >
      除 **ky** 和 **URQL** 外，没有一个新的数据加载库得分超过 10 次提及的最低门槛。

  - key: tools.data_loading_pain_points.takeaway.react2024
    t: >
      事实上，**状态管理** 被认为是数据加载时的最大问题，这也许是 **TanStack Query** 受欢迎的原因，因为它迎头解决了这个问题。


      然而，总体而言，只有 3% 的受访者分享了痛点，这表明数据加载实际上可能已经成为现代 Web 应用中*不*痛苦的部分之一。

  # back-end infrastructure

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

  - key: tools.meta_frameworks_ratios
    t: 元框架随时间变化的比重
  - key: tools.meta_frameworks_ratios.takeaway.react2024
    t: >
      唯一显示出强劲使用率增长的框架是 **Astro**，从 18% 增长到 26%。另外值得注意的是，**TanStack Start** 的首次亮相表现非常抢眼，关注度达到 81%，保留率达到 90%！

  - key: tools.meta_frameworks_others.takeaway.react2024
    t: >
      值得注意的是，**Waku** 是在 React 服务器组件问世后发布的少数几个框架之一，目的是从一开始就充分利用这些组件。

  - key: tools.build_tools.takeaway.react2024
    t: >
      现在，**Vite** 已经超越了 **Webpack**，考虑到 Webpack 已经存在了很长时间，这一点非常了不起。

  - key: tools.hosting.takeaway.react2024
    t: >
      **Vercel** 在排名中遥遥领先，这也是可以理解的，因为它在 React 生态系统中投入了大量资金。

  - key: tools.other_services.takeaway.react2024
    t: >
      **Firebase** 仍然是一个流行的数据存储平台，而 **Sentry** 仍然是大多数人进行错误跟踪的首选。

  - key: tools.backend_language.takeaway.react2024
    t: >
      不出所料，**TypeScript** 和 **JavaScript** 为大多数 React 应用程序的后端提供了动力，这表明开发人员非常重视将整个代码库保持在同一种语言中。

  - key: tools.back_end_infrastructure_pain_points.takeaway.react2024
    t: >
      通常，最常见的痛点是 “过于复杂 ”或 “学习曲线过长 ”等一般性问题，但这次不是。

      **端到端类型安全**（在服务器和客户端之间共享类型，并确保传输的任何数据都符合这些类型）显然是今年后端基础架构的首要问题，这也解释了为什么我们现在看到 **TanStack Start** 和 **tRPC** 等工具来解决这个问题。

  # other_tools

  - key: sections.other_tools.description.react2024
    t: |
      React 以专注于用户界面渲染而闻名，同时对应用程序的其他部分相当不可知，这反映在为填补这些空白而出现的充满活力的生态中！

  - key: tools.testing.takeaway.react2024
    t: |
      今年，**Jest** 和 **Testing Library** 继续保持领先地位。**Bun** 也出现了一些写入，这取决于新运行时的总体成功情况，可能是一次性的异常现象，也可能是未来的征兆。

  - key: tools.renderers.takeaway.react2024
    t: |
      不出所料，绝大多数开发者都会在浏览器中渲染应用，但这个问题凸显了 React 生态系统的多样性，从 PDF 到命令行应用程序都有渲染器！

  - key: tools.validation.takeaway.react2024
    t: |
      您可能已经猜到，**Zod** 仍然是最常用的验证库。

  - key: tools.auth.takeaway.react2024
    t: |
      根据您偏好托管服务还是自托管解决方案，**Auth0** 和 **Auth.js** 都是不错的选择。

  - key: tools.mobile_development.takeaway.react2024
    t: |
      虽然 **React Native** 仍占据首位，但 **Expo** 的排名正在迅速上升，在一年内抢占榜首位置也不足为奇。

  - key: tools.other_frontend_frameworks.takeaway.react2024
    t: |
      不使用 React 时，React 开发人员会使用什么？原来是 **Angular** 和 **Vue**，就像其他人一样！

  # usage

  - key: sections.usage.description.react2024
    t: |
      无论您使用的是什么版本，采用的是什么应用模式，属于哪个行业，使用 React 的方法都不会错！

  - key: usage.what_do_you_use_react_for.takeaway.react2024
    t: >
      有趣的是，尽管 React 传统上与复杂的客户端应用相关联，**静态网站** 仍位居第二，这表明 JSX 作为一种简单的模板语言也能发挥巨大作用。

  - key: usage.react_version.takeaway.react2024
    t: >
      请注意，该调查是在 React 19 稳定版发布 **之前** 进行的。

  - key: usage.usage_type.takeaway.react2024
    t: >
      大多数回应者都在专业环境中使用 React。

  - key: usage.industry_sector.takeaway.react2024
    t: >
      **编程和技术工具** 作为一个行业部门，其代表性可能会略微偏高，因为它通常会吸引最有可能填写此类调查的那类开发人员。

  - key: usage.js_app_patterns.takeaway.react2024
    t: >
      尽管最近大家都在关注静态网站生成、服务器端渲染和服务器组件，但值得注意的是，绝大多数 React 开发人员仍在开发单页面应用程序。

  - key: usage.new_features.takeaway.react2024
    t: >
      由于 `memo` 是一个长期存在的痛点，因此受访者对**React 编译器**最感兴趣也就在情理之中了。

  - key: usage.usage_pain_points.takeaway.react2024
    t: >
      **过多的复杂性** 再次成为一个主要问题。新一代工具能否最终减轻我们的痛苦，或者这种复杂性是否只是网络运行方式的自然结果，我们拭目以待。

  # resources

  - key: sections.resources.description.react2024
    t: |
      React 能够持续占据主导地位，其中一个重要原因是它多年来积累了大量的文档、博文、视频和其他资源。以下只是其中的一小部分！

  - key: resources.learning_methods.takeaway.react2024
    t: |
      React 团队在新的 React 文档网站上做得非常出色，因此它成为人们了解该框架的首要途径也就不足为奇了。

  - key: resources.blogs_news_magazines.takeaway.react2024
    t: |
      虽然这份名单上有许多常见的人，但值得庆贺的是出现了 React 专门的媒体，如 **This Week in React** 或 **React Status**。

  - key: resources.courses.takeaway.react2024
    t: |
      **Wes Bos** 和 **Epic React** 的 Kent C. Dodds 等教育工作者的排名几乎与 **Udemy** 或 **freeCodeCamp** 等整个平台的排名一样高，这总是令人印象深刻。

  - key: resources.podcasts.takeaway.react2024
    t: |
      **Syntax** 继续保持其在开发播客领域的主导地位，而以 Web 为重点的 React 播客仍然不多，**React Native Radio** 排在非常光荣的第 8 位。

  - key: resources.video_creators.takeaway.react2024
    t: |
      去年，**Fireship** 的排名低得出奇，而现在，这位广受欢迎的 YouTuber 在视频创作者排行榜上名列前茅，超过了 **Theo** 和 **The Primeagen** 。

  - key: resources.people.takeaway.react2024
    t: |
      从 17 到 5 的大幅攀升，**shadcn** 正在尽最大努力与自己的库的受欢迎程度相匹配！

  - key: resources.other_surveys.takeaway.react2024
    t: |
      许多受访者也参加了 **State of JS** 调查，这一点不足为奇，但值得注意的是，大多数受访者也填写了 **State of CSS** 调查，这表明 JS/CSS 之间的鸿沟可能并不像我们常说的那样大。

  # awards

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

  # metadata

  - key: user_metadata.source.takeaway.react2024
    t: >
      大多数受访者知道前几年的调查或其他调查，但像 **This Week in React** 这样的时事通讯也是一大流量来源。

  ###########################################################################
  # 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 邮件列表；也匹配"邮件"、"通过邮件"等。

      - 工作：匹配"工作"、"同事"、"同事们"等。

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

  - key: award.feature_adoption_delta_award.comment
    t: 在 2022 年取得了 **{value}** 的增长后，**top-level await** 已经迅速成为 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: React 收到了 **{value}** 条评论，再次证明它是最受关注的库。

  - key: award.most_loved_tool_award.comment
    t: 有 **{value}** 的开发者对它持积极态度，Vite 横扫本次奖项，成为最受欢迎的技术！

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

  - key: conclusion.react2024.sebastien_lorber
    t: |

      <span class="first-line">对于 React 开发人员来说，这是一个多么美好的时代！/span>

      今年以一个 [React Labs 更新](https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024) 和安德鲁·克拉克的一条 [推文](https://x.com/acdlite/status/1758229889595977824) 开始，他在推文中承诺我们再也不需要使用 forwardRef 了——这是 [React 最不受喜欢的功能](../features/#all_features)。快进到现在，这一承诺已经基本实现，React 19 在此过程中引入了许多令人兴奋的新功能。

      虽然是一次惊险的发布：新版本原定于[六月](https://x.com/acdlite/status/1797668537349328923)发布，当时上演了一场[悬疑剧](https://tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts)，导致发布推迟到十二月。一项优化措施旨在更早地渲染 Suspense 备选方案，意外地在许多客户端应用中引入了 Suspense 邻近节点瀑布问题。幸运的是，React 团队在保留优化的同时，通过引入一个新的[Suspense 邻近节点预热](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense)功能，防止了瀑布问题的发生。

      除了长时间的等待，从我的角度来看，这个版本的采用过程相对平滑。`18.3`版本引入了额外的警告，帮助我们在新版本到来之前做好准备，React 团队在这方面做得非常出色，尽量减少了破坏性变更，并在[升级指南](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)中详细记录了这些变更。当然，我们仍在努力理解所有新的功能和API，但正如我们所熟知和喜爱的那样，客户端的React现在比以往任何时候都要好。

      React 服务器组件和服务器操作的引入为我们带来了新的、强大的内置原语。Next.js，领先的实现，展示了它们的好处，但也突显了路由和缓存方面的新挑战，这在社区中引发了抵触情绪。我个人认为，继续在客户端使用 React，而在合适的情况下采用服务器端功能是完全可以的，一旦最佳实践变得更加清晰，就可以逐步采用这些功能。

      但今年不仅仅是关于 React 19 — 这一年还是 React Native 的 [新架构](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here) 准备好用于生产的重要时刻，标志着跨平台生态系统向前迈进了一大步。我们还得到了 [React 编译器](https://react.dev/blog/2024/10/21/react-compiler-beta-release) 的 beta 版本。最初它被介绍为一个自动 memoizing 编译器，实际上它是一个完整的 React 优化平台，未来将会变得更加强大。

      这些新的基础为 2025 年的光明未来奠定了基础。我们才刚刚开始挖掘它们的潜力，未来将有许多具有影响力的特性和集成。类似于引入 Hooks， 我们可能正处于 React 复兴的边缘。

  - key: conclusion.react2024.sebastien_lorber.bio
    t: |
      [This Week In React](https://thisweekinreact.com/) 创办者以及 [Docusaurus](https://docusaurus.io/) 的维护者

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

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

  # https://zustand-demo.pmnd.rs
  - key: picks.jack_herrington.name
    t: Tanstack Start
  - key: picks.jack_herrington.bio
    t: 首席工程师和 YouTuber
  - key: picks.jack_herrington.description
    t: |
      简单、优雅、可扩展的状态管理工具，完全符合"直接可用"的标准。如今，你可能不需要状态管理，但如果需要，Zustand 是一个很好的起点。

  # https://react.dev/reference/rsc/server-components
  - key: picks.alex_sidorenko.name
    t: React Server Components
  - key: picks.alex_sidorenko.bio
    t: 在 Twitter 上制作 Next.js 相关的短视频
  - key: picks.alex_sidorenko.description
    t: |
      十一年前，React 通过挑战既定实践重新构想了网络开发。现在，React 正在通过 RSC 再次实现这一目标。

      另外，要特别感谢 Next.js 团队推动这一新愿景向前发展。

  # https://youtube.com/watch?v=zqhE-CepH2g
  - key: picks.sam_selikoff.name
    t: |
      "Mind the Gap" —— Ryan Florence 在 2024 年 Big Sky Dev Con 的演讲
  - 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: TanStack Router
  - key: picks.sebastien_lorber.bio
    t: |
      [This Week in React](https://thisweekinreact.com/) 的创建者
  - key: picks.sebastien_lorber.description
    t: |
      这款新路由库于 2023 年 12 月发布的 v1 版本证明了类型安全和搜索参数管理方面的创新仍然是可能的。从 2024 年开始，该产品的采用率显著增强，并且社区给予了非常积极的反馈。

  # https://buildui.com/posts/instant-search-params-with-react-server-components
  - key: picks.aurora_scharff.name
    t: |
      nuqs: React 的类型安全搜索参数状态管理器
  - key: picks.aurora_scharff.bio
    t: Inmeta 的 Web 开发者和顾问
  - key: picks.aurora_scharff.description
    t: |
      我的选择是 [François Best](https://bsky.app/profile/francoisbest.com) 和他的库 [nuqs](https://nuqs.47ng.com/)。除了 Next.js 之外，最近还为其他 React 框架提供了支持，它在处理URL查询参数时解决了许多痛点，API 非常流畅且易于使用。

  - key: picks.shaundai_person.name
    t: CodeTV (formerly Learn with Jason)
  - key: picks.shaundai_person.bio
    t: 前端高级软件工程师（Netflix）和课程讲师
  - key: picks.shaundai_person.description
    t: |
      杰森的使命是让编程对每个人来说都变得有趣且易于接触，他在这方面做得非常出色。在其中一个系列中，杰森和3名开发者面临挑战，需要根据简短的编程提示（如“构建一个排行榜”或“构建一个电子商务网站”）来创建应用程序。而他最新的系列是一个网页开发游戏秀，有点像《危险边缘》和《辣根一口》的混合体！

  # https://mui.com/blog/introducing-pigment-css/
  - key: picks.josh_comeau.name
    t: Lucide Icons
  - 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 库，将样式化 API 引入 React Server Components 时代。虽然已经有很多 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 年生态系统中一直在酝酿的frustration。

  # 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 开发者更容易适应原生平台，加快开发速度，缩短了在所有设备上的发布时间。

  - key: picks.sacha_greif.name
    t: React Scan
  - key: picks.sacha_greif.bio
    t: Creator @ Devographics
  - key: picks.sacha_greif.description
    t: |
      当我十多年前第一次看到 React 的演示时，它的主要卖点之一是它可以非常快速地渲染长而复杂的网页。然而，今天，糟糕的性能和过度的重新渲染经常被看作是该框架的弱点。因此，很高兴看到像 [Aiden Bai](https://aiden.mov/) 创建的 [Million](https://million.dev/) 这样的工具通过 React Scan 来应对这一挑战，并为你提供新的方法来提高 React 的性能。

  ###########################################################################
  # 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
  ###########################################################################

  # React 2023

  - key: faq.data_used_react2024
    t: 这些数据将如何使用？
  - key: faq.data_used_react2024.description
    t: >
      所有收集的数据将公开发布供任何人查阅。开发者或公司可以使用它来确定重点领域和制定路线图。

  - key: faq.survey_goals_react2024
    t: 调查的目标是什么？
  - key: faq.survey_goals_react2024.description
    t: >
      调查的目标是衡量 React API 以及 React 生态系统中各个库的知名度和流行程度。

  - key: faq.who_should_take_survey_react2024
    t: 谁应该参与这项调查？
  - key: faq.who_should_take_survey_react2024.description
    t: >
      这是一项开放性调查，任何使用 React 的人都可以参加，无论是经常使用还是偶尔使用，无论是工作需要、学生身份，还是仅仅是为了娱乐！

  - key: faq.how_long_will_survey_take_react2024
    t: 完成调查需要多长时间？
  - key: faq.how_long_will_survey_take_react2024.description
    t: >
      根据你回答的问题数量（所有问题都是可选的），完成调查大约需要 15-20 分钟。

  - key: faq.survey_design_react2024
    t: 这项调查是如何设计的？
  - key: faq.survey_design_react2024.description
    t: >
      该调查是通过一个[开放式反馈主题](https://github.com/Devographics/surveys/issues/250)，收集社区意见后设计的。

  - key: faq.results_released_react2024
    t: 结果什么时候发布？
  - key: faq.results_released_react2024.description
    t: 调查将从 10 月 19 日持续到 11 月 19 日，调查结果将在之后不久发布。

  - key: about.content
    t: |
      2024 年 React 状态调查于 2024 年 10 月 19 日至 11 月 19 日进行，共收到 7870 份回复。调查结果于 2025 年 2 月 10 日发布。该调查由 [Devographics](https://devographics.com/) 负责。

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

      ### 调查目标

      这项调查旨在识别 React 生态系统中的新兴趋势，以帮助开发者做出技术选择。

      因此，调查更关注未来几年的发展趋势，而不是分析当前流行的技术。这就是为什么即使某些功能或技术目前很普及，也可能被省略的原因。

      这也应该被视为**特定开发者群体的一个快照**，而不是代表整个 React 生态系统

      ### 调查设计

      本次调查部分基于去年的调查设计，并在 [GitHub](https://github.com/Devographics/surveys/issues/250) 上进行了公开的反馈讨论。

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

      ### 调查受众

      调查在网上公开进行，respondents 没有经过任何筛选或选择。受访者主要来自往年的调查受众（通过专门的邮件列表通知）和社交媒体流量。

      需要注意的是，各个框架、类库等都可以自由地鼓励其用户参与调查，有些确实通过横幅、推文等方式进行了宣传。详细的流量来源分析包含在"来源"图表中。

      ### 项目资金

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

      - **T 恤销售**。

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

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

      我们非常感谢任何形式的贡献或赞助。我们特别希望能够与更多的浏览器厂商密切合作，因为他们在 Web 生态系统中扮演着核心角色。

      ### 技术概览

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

      **注意：这*不*是一项官方 React 调查，调查团队与 Meta、Vercel 或 React 团队没有任何关联。**

      ### 特别感谢

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


  - key: general.react2024.ai2025_banner

    t: 参与 State of Web Dev AI 调查，帮助我们了解 AI 对 Web 的影响！ →

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

  - key: user_info.age.takeaway.react2024
    t: |
      本次 React 调查受访者的平均年龄为 32.4 岁，比 State of JS (33.5) 或 State of CSS (34.9) 的受访者略年轻。

  - key: user_info.years_of_experience.takeaway.react2024
    t: |
      59% 的受访者拥有不到 10 年的经验，这意味着他们从未经历过没有 React 的世界（React 本身已有近 12 年历史！）。

  - key: user_info.company_size.takeaway.react2024
    t: |
      44% 的受访者在拥有超过 100 名员工的公司工作。

  - key: user_info.yearly_salary.takeaway.react2024
    t: |
      调查受访者的中位薪资（$75,000）略高于 State of JavaScript 的结果（$70,000）。但在查看美国与世界其他地区的对比时，同样的收入差距依然存在。

  - key: user_info.job_title.takeaway.react2024
    t: |
      “工程师”仍然是收入最高的职位头衔，而“开发者”则处于阶梯的底端。


      就像最近的 [State of JavaScript 调查结果](https://2024.stateofjs.com/en-US/demographics/#job_title)一样，全栈和前端职位的受访者平均年龄最小，而且前端职位中女性的比例明显更高。

  - key: user_info.higher_education_degree.takeaway.react2024
    t: |
      与其他调查显示的结果不同，这次缺乏高等教育学位似乎并没有与较低的收入水平相关联。

  - key: user_info.gender.takeaway.react2024
    t: |
      本次调查中男性占比 92%，与往年调查保持一致，这表明我们仍需付出更多努力来扩大调查的覆盖范围，确保其代表社区的各个方面。

  - key: user_info.race_ethnicity.takeaway.react2024
    t: |
      令人鼓舞的是，西班牙裔和拉丁裔受访者的比例从 11% 上升到了 19%，这可能与讲西班牙语和葡萄牙语的主播和教育工作者的日益普及有关。

  - key: user_info.disability_status.takeaway.react2024
    t: |
      无论这种状况是永久的还是暂时的，残疾是许多人日常生活的一部分，这一事实值得我们在构建新应用时时刻铭记。

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

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

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


      今年值得强调的是：`createPortal` 虽然只有 46.4% 的受访者使用，但却是第五大最受欢迎的特性。另一方面，Taint API 既是最少使用的，也是最不为人知的特性——这很有道理，因为它仍处于实验阶段。


      在另一个极端，`useState` 不仅是使用最多的特性，也是最受喜爱的，只有 1.26% 的负面评价，这表明简单的解决方案永远有其一席之地。

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

  - key: features.main_apis_pain_points.takeaway.react2024
    t: |
      就像去年一样，`forwardRef` 和 `memo` 是最常用的 React API 中的主要痛点。随着 React 19 的发布并承诺缓解这两个问题，看看明年的这张图表会是什么样子将会很有趣。

  - key: features.hooks_pain_points.takeaway.react2024
    t: |
      `useEffect` 仍然是最有问题的 React hook，很大程度上是因为必须手动管理依赖数组。

  - key: features.new_apis_pain_points.takeaway.react2024
    t: |
      在利用 React 的新特性方面，**React 服务器组件**和整体复杂性仍然是主要的痛点。

  - key: tools.all_tools_experience.takeaway.react2024
    t: |
      在 React 库和框架中，**TanStack Query** 和 **Zustand** 在整体积极性方面已经超过了 **Next.js** 处于领先地位。


      虽然 **Create React App** 可能是使用最多的框架，但它也是最不受欢迎的框架之一，有 33.1% 的负面意见，仅次于 Redux 的 34.1%。


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

  - key: tools.scatterplot_overview.takeaway.react2024
    t: |
      在库和框架中，**Next.js** 仍然是唯一一个同时具有高保留率和高使用率的项目。话虽如此，**TanStack Query** 似乎随时都有可能跨入 >50% 使用率的象限！

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

  - key: tools.component_libraries_ratios.takeaway.react2024
    t: |
      虽然 **MUI** 在使用率方面保持第一，但 **shadcn/ui** 正在取得巨大进展，在一年内从 20% 翻倍至 42%；并且以 80% 的积极性位居榜首！

  - key: tools.animation_libraries.takeaway.react2024
    t: |
      **Motion**（以前称为 Framer Motion）获得了当之无愧的第一名，以庆祝其最近的品牌重塑！


  - key: tools.data_visualization_libraries.takeaway.react2024
    t: |
      **Chart.js** 今年位居榜首。顺便说一句，你知道这次调查的所有图表都是定制的吗？

  - key: tools.form_libraries.takeaway.react2024
    t: |
      **React Hook Form** 是目前最常用的表单库。但随着 TanStack 的日益普及，未来关注 **TanStack Forms** 将会很有趣。

  - key: tools.react_form_patterns.takeaway.react2024
    t: |
      有趣的是，大多数开发者对使用**受控**和**非受控**表单都感到舒适。

      话虽如此，如果你必须只选一个，那么**受控**表单输入似乎是正确的选择！

  - key: tools.css_tools.takeaway.react2024
    t: |
      **Tailwind** 杀死了 CSS-in-JS 吗？还是 CSS 本身迎头赶上了？无论如何，追求花哨 CSS 架构的日子似乎已经结束了，因为前三名都被老牌 CSS 工具占据。

  - key: tools.component_libraries_pain_points.takeaway.react2024
    t: |
      鉴于**样式和定制**问题带来的痛苦，难怪像 **Radix** 和 **React Aria** 这样的“无头”库被证明如此受欢迎。

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

  - key: tools.state_management_ratios.takeaway.react2024
    t: |
      **Zustand** 证实了其在积极性方面的领先地位，只有默认的 **useState** 得分更高。在过去的一年里，它的使用率也有所增长，从 28% 上升到了 41%！

  - key: tools.state_management_others.takeaway.react2024
    t: |
      虽然 **TanStack Query** 最为人所知的是数据加载库，但它在管理结果状态方面也做得很好。


  - key: tools.state_management_pain_points.takeaway.react2024
    t: |
      状态管理整体上仍然不必要地复杂，**Redux** 尤其受到受访者的指责。

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

  - key: tools.data_loading_ratios.takeaway.react2024
    t: |
      **TanStack Query** 继续保持增长轨迹，无论是在使用率还是积极性方面。兴趣图表特别显示，除了 **tRPC** 之外，它几乎是目前唯一仍让受访者感兴趣的数据加载库！

  - key: tools.data_loading_others.takeaway.react2024
    t: |
      除了 **ky** 和 **URQL**，没有新的数据加载库得分超过最低 10 次提及的阈值。

  - key: tools.data_loading_pain_points.takeaway.react2024
    t: |
      在涉及数据加载时，**状态管理**被认为是最大的问题，这可能解释了 **TanStack Query** 的流行，因为它正面解决了这个问题。

      然而总体而言，只有 3% 的受访者分享了一个痛点，这表明数据加载实际上可能已经以某种方式成为现代 Web 应用程序中*最不*痛苦的部分之一。

  - key: tools.meta_frameworks_experience.takeaway.react2024
    t: |
      虽然你肯定不难发现人们抱怨 **Next.js**，但它仍然设法在元框架的积极性排名中名列前茅，紧随其后的是 **Remix** 和 **Astro**。

  - key: tools.meta_frameworks_ratios.takeaway.react2024
    t: |
      唯一显示出强劲使用增长的框架是 **Astro**，从 18% 上升到 26%。同样值得注意的是，**TanStack Start** 首次亮相就表现强劲，拥有 81% 的兴趣和 90% 的保留率！


  - key: tools.meta_frameworks_others.takeaway.react2024
    t: |
      **Waku** 值得注意的是，它是少数在 React 服务器组件出现后启动的框架之一，旨在从一开始就充分利用它们。

  - key: tools.build_tools.takeaway.react2024
    t: |
      **Vite** 现在已经超过了 **Webpack**，考虑到 Webpack 存在的时间，这相当了不起。

  - key: tools.hosting.takeaway.react2024
    t: |
      **Vercel** 在排名中领先，鉴于其在 React 生态系统中的大量投资，这是可以理解的。

  - key: tools.other_services.takeaway.react2024
    t: |
      **Firebase** 仍然是一个流行的数据存储平台，而 **Sentry** 仍然是大多数人进行错误跟踪的首选。

  - key: tools.backend_language.takeaway.react2024
    t: |
      正如预期的那样，**TypeScript** 和 **JavaScript** 驱动了大多数 React 应用的后端，这表明开发者非常重视保持整个代码库使用相同的语言。


  - key: tools.back_end_infrastructure_pain_points.takeaway.react2024
    t: |
      通常，最常见的痛点是像“过度复杂”或“学习曲线陡峭”这样的通用问题——但这次不是。
      **端到端类型安全**（在服务器和客户端之间共享类型；并确保传输的任何数据都符合它们）显然是今年后端基础设施方面的首要问题，这解释了为什么我们现在看到像 **TanStack Start** 和 **tRPC** 这样的工具出现来解决它。

  - key: tools.testing.takeaway.react2024
    t: |
      **Jest** 和 **Testing Library** 今年保持了领先地位。**Bun** 也出现了一些提及，这取决于新运行时的整体成功，可能是一次性的异常，也可能是未来趋势的迹象。

  - key: tools.renderers.takeaway.react2024
    t: |
      正如预期的那样，绝大多数开发者在浏览器中渲染他们的应用程序，但这个问题突显了 React 生态系统实际上是多么多样化，拥有从 PDF 到命令行应用程序等各种渲染器！

  - key: tools.validation.takeaway.react2024
    t: |
      正如你可能猜到的那样，**Zod** 仍然是最常用的验证库。

  - key: tools.auth.takeaway.react2024
    t: |
      取决于你喜欢托管服务还是自托管解决方案，**Auth0** 和 **Auth.js** 都是不错的选择。

  - key: tools.mobile_development.takeaway.react2024
    t: |
      虽然 **React Native** 仍然稳居第一，但 **Expo** 正在迅速获得地盘，如果在一年内看到它夺取头把交椅也不足为奇。


  - key: tools.other_frontend_frameworks.takeaway.react2024
    t: |
      当 React 开发者不使用 React 时，他们会用什么？结果表明，就像其他人一样，他们使用 **Angular** 和 **Vue**！

  - key: usage.what_do_you_use_react_for.takeaway.react2024
    t: |
      有趣的是，尽管 React 传统上与复杂的客户端应用程序相关联，但**静态网站**仍然位居第二，这表明 JSX 作为一种简单的模板语言也能发挥很好的作用。

  - key: usage.react_version.takeaway.react2024
    t: |
      请注意，调查是在 React 19 稳定发布**之前**进行的。

  - key: usage.usage_type.takeaway.react2024
    t: |
      绝大多数受访者在职业上使用 React。

  - key: usage.industry_sector.takeaway.react2024
    t: |
      **编程与技术工具**作为一个行业部门可能略有过多代表，因为它通常吸引最有可能填写此类调查的开发者类型。

  - key: usage.js_app_patterns.takeaway.react2024
    t: |
      尽管最近关注静态网站生成、服务器端渲染和服务器组件，但值得注意的是，绝大多数 React 开发者仍然致力于单页应用程序。

  - key: usage.new_features.takeaway.react2024
    t: |
      鉴于 `memo` 是一个长期的痛点，受访者对 **React Compiler** 最为兴奋是有道理的。

  - key: usage.usage_pain_points.takeaway.react2024
    t: |
      **过度复杂**再次作为一个主要问题脱颖而出。新一代的工具最终能否缓解我们的痛苦，或者这种复杂性仅仅是 Web 工作方式的自然结果，还有待观察。


  - key: resources.learning_methods.takeaway.react2024
    t: |
      React 团队在新的 React 文档网站上做得很好，所以它成为人们学习框架的首选方式也就不足为奇了。

  - key: resources.blogs_news_magazines.takeaway.react2024
    t: |
      虽然这个名单上有很多熟悉的名字，但值得庆祝的是像 **This Week in React** 或 **React Status** 这样专注于 React 的媒体的存在。

  - key: resources.courses.takeaway.react2024
    t: |
      看到像 **Wes Bos** 或 **Epic React** 的 Kent C. Dodds 这样的教育者能够排在几乎与 **Udemy** 或 **freeCodeCamp** 这样的整个平台一样高的位置，总是令人印象深刻。

  - key: resources.podcasts.takeaway.react2024
    t: |
      **Syntax** 继续在开发者播客领域占据主导地位，虽然在专注于 Web 的 React 播客方面确实不多，但 **React Native Radio** 排在非常光荣的第 8 位。

  - key: resources.video_creators.takeaway.react2024
    t: |
      虽然 **Fireship** 去年在排名中出人意料地低，但这位受欢迎的 YouTuber 现在登上了视频创作者的领奖台，领先于 **Theo** 和 **The Primeagen**。

  - key: resources.people.takeaway.react2024
    t: |
      从 17 名大幅攀升至 5 名，**shadcn** 正在尽力匹配他们自己库的受欢迎程度！

  - key: resources.other_surveys.takeaway.react2024
    t: |
      虽然许多受访者也参加了 **State of JavaScript** 调查这并不奇怪，但值得注意的是，大多数人也填写了 **State of CSS**，这表明 JS/CSS 的鸿沟可能并不像我们通常认为的那么大。

  - key: user_metadata.source.takeaway.react2024
    t: |
      大多数受访者通过往年或其他调查了解本次调查，但像 **This Week in React** 这样的时事通讯也是主要的流量来源。


  - key: conclusion.react2024.sebastien_lorber
    t: |
      <span class="first-line">这正是成为 React 开发者的好时机！</span>

      今年伊始，我们迎来了 [React Labs 更新](https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024)和 Andrew Clark 的一条[推文](https://x.com/acdlite/status/1758229889595977824)，承诺我们将不再需要使用 forwardRef——这是[最令人讨厌的 React 特性](../features/#all_features)。快进到现在，这个承诺已经基本实现，[React 19](https://react.dev/blog/2024/12/05/react-19) 引入了令人兴奋的新特性供我们尝试。

      不过，这确实很悬：新版本原定于 [6 月](https://x.com/acdlite/status/1797668537349328923)发布，当时 [Suspense 戏剧](https://tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts)上演，将发布推迟到了 12 月。一项旨在更快渲染 Suspense 后备内容的优化无意中在许多客户端应用程序中引入了 Suspense 兄弟瀑布问题。幸运的是，React 团队付出了额外的努力来保留优化，同时通过引入新的 [Suspense 兄弟预热](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense)功能来防止瀑布问题。

      除了漫长的等待，从我的角度来看，这个版本的采用相对顺利。`18.3` 版本引入了额外的警告，帮助我们提前准备应用程序，React 团队在最小化破坏性更改并在[升级指南](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)中详细记录方面做得非常出色。当然，我们仍然在努力理解所有的新特性和 API，但我们所熟知和喜爱的客户端 React 现在比以往任何时候都更好。

      React 服务器组件和服务器操作的引入为我们带来了紧密集成到框架中的新的强大原语。Next.js 作为领先的实现，展示了它们的好处，但也突显了路由和缓存方面的新挑战，这导致了社区的抵制。就我个人而言，我认为继续在客户端使用 React 并在它们对你的项目有意义时最终采用服务器端特性是完全可以的，只要最佳实践变得更加清晰。

      但今年不仅仅是关于 React 19——这也是 React Native 的[新架构](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here)准备好投入生产的一年，标志着跨平台生态系统的重大飞跃。我们也迎来了 [React Compiler](https://react.dev/blog/2024/10/21/react-compiler-beta-release) 的测试版。最初作为自动记忆编译器呈现，它实际上是一个用于 React 的完全成熟的优化平台，未来将变得更加强大。

      这些新基础为 2025 年的光明未来奠定了基础。我们才刚刚开始挖掘它们的潜力，许多有影响力的特性和集成还在后面。类似于 Hooks 的引入，我们可能正处于 React 复兴的边缘。

  - key: conclusion.react2024.sebastien_lorber.bio
    t: '[This Week In React](https://thisweekinreact.com/) 创始人及 [Docusaurus](https://docusaurus.io/) 维护者'


  - key: picks.my_pick.react2024
    t: "我的 2024 年度之选："

  - key: picks.shaundai_person.name
    t: CodeTV (原 Learn with Jason)

  - key: picks.shaundai_person.bio
    t: 前端高级软件工程师 (Netflix) 和课程讲师

  - key: picks.shaundai_person.description
    t: |
      Jason 的使命是让编程对每个人来说都变得有趣且易于上手，他在这一点上做得非常出色。在一个系列中，Jason 和 3 位开发者面临着根据简短的编程提示（如“构建排行榜”或“构建电子商务网站”）创建一个应用程序的挑战。他的最新系列是一个 Web 开发游戏节目，有点像 Jeopardy 和 Hot Ones 的混合体！

  - key: picks.sacha_greif.name
    t: React Scan

  - key: picks.sacha_greif.bio
    t: Creator @ Devographics

  - key: picks.sacha_greif.description
    t: |
      十多年前，当我第一次看到 React 的演示时，它的一大卖点就是能够多快地渲染长而复杂的网页。然而今天，性能差和过度重新渲染经常被认为是该框架的弱点。因此，很高兴看到像 [Million](https://million.dev/) 的创建者 [Aiden Bai](https://aiden.mov/) 的 React Scan 这样的工具来应对这一挑战，并为你提供改进 React 性能的新方法。

  - key: sponsors.gitnation.description
    t: 在 GitNation.com 直接从早期采用者和技术作者那里学习最新趋势

  - key: sponsors.reactsummit.description
    t: 全球最大的 React 会议。通过 50 多位演讲者保持领先趋势，与 1,500 名开发者建立联系并聚会，享受阿姆斯特丹的夏天，以及更多！

  - key: sponsors.reactparis.description
    t: 2025 年你不容错过的首屈一指的为期两天的单轨 React 会议。

  - key: about.content.react2024
    t: |
      2024 年 State of React 调查于 2024 年 10 月 19 日至 11 月 19 日进行，共收集了 7,870 份回复。结果于 2025 年 2 月 10 日发布。该调查由 [Devographics](https://devographics.com/) 运营。

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

      ### 调查目标

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

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

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

      ### 调查设计

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

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

      ### 调查受众

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

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

      ### 项目资金

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

      - **T 恤销售**。

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

      - **直接资助**：今年，[Google](https://www.google.com/)、[GitNation](https://gitnation.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 和 Sébastien Lorber。