跳到内容

State of React 2024

特性

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

所有特性

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

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

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

筛选方式：

通过...分组：

根据此项排序:

1

98.9%
6,927
2

97.8%
6,949
3

96.7%
7,711
4

93.2%
5.1%
6,927
5

92.3%
6%
6,944
6

88.4%
9.4%
6,936
7

87.8%
8.8%
6,959
8

85.4%
9.4%
7,774
9

75.8%
18.4%
4.7%
7,682
10

73%
17.4%
8.4%
7,710

经验

  • <span aria-hidden="true">🤓</span> 用过: 使用过此项目的受访者。
  • <span aria-hidden="true">👀</span> 有听说过: 听说过此项目，但没有使用过此项目的受访者。
  • <span aria-hidden="true">🤷</span> 没听说过: 从未听说过此项目的受访者。

情绪（态度）

  • 积极: 有兴趣了解此技术，或者愿意再次使用它的受访者
  • 中立: 未对此技术发表看法的受访者
  • 消极: 对此技术不感兴趣，或者使用此技术有糟糕体验的受访者
“Used” average:NaN%
“Positive” average:NaN%
“Negative” average:NaN%

Main APIs Over Time

createContext
createPortal
forwardRef
Fragment
lazy
memo
Profiler
StrictMode
act

模式:

视图:

使用度:

使用过某个项目的受访者比例
0%
20%
40%
60%
80%
100%
2023
2024
0%
20%
40%
60%
80%
100%

Hooks Over Time

useCallback
useContext
useDeferredValue
useEffect
useId
useMemo
useReducer
useRef
useState
useSyncExternalStore
useLayoutEffect

模式:

视图:

使用度:

使用过某个项目的受访者比例
0%
20%
40%
60%
80%
100%
2023
2024
0%
20%
40%
60%
80%
100%

New APIs Over Time

React cache
React Server Components
Server Actions
startTransition
Suspense
Taint API
use()
useFormStatus
useTransition
useActionState (formerly useFormState)
useOptimistic

模式:

视图:

使用度:

使用过某个项目的受访者比例
0%
20%
40%
60%
80%
100%
2023
2024
0%
20%
40%
60%
80%
100%
我们邀请 React 社区成员分享他们的"年度之选"

我的 2024 年度之选： Tanstack Start

简单、优雅、可扩展的状态管理工具，完全符合"直接可用"的标准。如今，你可能不需要状态管理，但如果需要，Zustand 是一个很好的起点。
我们邀请 React 社区成员分享他们的"年度之选"

Jack Herrington

首席工程师和 YouTuber

Main APIs Pain Points

What pain points have you encountered related to the APIs mentioned above?
(自由提问)
Multiple
0%
20%
40%
60%
80%
100%
1

2

3

4

Context API

5

Excessive complexity

6

7

Excessive context re-renderings

8

9

测试

10

Error handling

11

其他答案

匹配“其他答案”的答案 684
0%
20%
40%
60%
80%
100%
受访者百分比
1,081
14%

Hooks Pain Points

What pain points have you encountered with hooks?
(自由提问)
Multiple
0%
20%
40%
60%
80%
100%
1

2

Dependency arrays

3

4

5

Excessive complexity

6

Excessive rerendering

7

状态管理 （useState, Redux, Context, 等等。）

8

useLayoutEffect

9

10

11

其他答案

匹配“其他答案”的答案 528
0%
20%
40%
60%
80%
100%
受访者百分比
722
9%

New APIs Pain Points

What pain points have you encountered related to new APIs?
(自由提问)
Multiple
0%
20%
40%
60%
80%
100%
1

2

Excessive complexity

3

Form issues

4

Next.js issues

5

Frontend and backend integration

6

7

8

9

SSR

10

11

其他答案

匹配“其他答案”的答案 284
0%
20%
40%
60%
80%
100%
受访者百分比
322
4%

阅读列表

25% 的受访者在接受调查时在阅读清单中添加了一些项目，以便日后了解更多相关信息。以下是他们选择的细目。

0%
20%
40%
60%
80%
100%
1

777
2

674
3

621
4

619
5

612
6

584
7

551
8

524
9

504
10

502
0%
20%
40%
60%
80%
100%
受访者百分比
每个项目被添加到受访者阅读列表的次数，该功能可让受访者在参与调查时了解更多有关特定主题的信息。
1,946
25%

资源推荐

Be Productive with React.js, Today's Most Popular Framework
Brian Holt
SQLite Cloud

Be Productive with React.js, Today's Most Popular Framework

Gain experience building, testing, and maintaining high-performance client and server-side React applications.
A Tour of JavaScript & React Patterns
Lydia Hallie

A Tour of JavaScript & React Patterns

You’ll get an overview of more traditional design patterns with JavaScript, such as the Singleton and Proxy patterns. Then see React patterns such as the Hooks and Higher Order Component patterns.
感谢合作伙伴对我们的支持! 了解更多。