-
Notifications
You must be signed in to change notification settings - Fork 4
/
state_of_react.yml
571 lines (477 loc) · 19.6 KB
/
state_of_react.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
locale: zh-Hans
translations:
###########################################################################
# General
###########################################################################
- key: general.state_of_react.intro
t: |
React 已经存在一段时间了,很明显它已成为主导的前端框架之一。
然而,即使如此,React 仍在快速发展,社区也在尽力跟进。
通过 React 开发者调查,我们希望能够理清这种演变,并帮助开发者在广阔的 React 生态系统中找到自己的方向。
- key: general.state_of_react.description
t: 关于 React 生态系统的年度开发者调查
- key: features.features_intro_react
t: |
欢迎参与调查!第一部分旨在了解您了解并使用了哪些官方的 React API。
顺便提一下,如果您想对您的选择进行更详细的说明,请点击那个小的“评论”图标!
- key: tools.tools_intro_react
t: |
接下来的几个部分关注于组成 React 生态系统的**工具库**和**框架**。请告诉我们您对哪些内容感到兴奋!
# sections
- key: sections.components.title
t: 组件
- key: sections.components.description
t: 由 React 提供的特殊组件
- key: sections.hooks.title
t: Hooks
- key: sections.hooks.description
t: React 内置的 hooks
- key: sections.other_apis.title
t: 其他 API
- key: sections.other_apis.description
t: 其他 API 和功能
- key: sections.component_apis.title
t: 组件 API
- key: sections.component_apis.description
t: 操作组件的 API
- key: sections.legacy_apis.title
t: 遗留的 API
- key: sections.legacy_apis.description
t: 已弃用的和遗留的 API
- key: sections.state_management.title
t: 状态管理
- key: sections.state_management.description
t: 用于管理应用程序状态的工具库。
- key: sections.data_loading.title
t: 数据加载
- key: sections.data_loading.description
t: 用于加载和管理数据的实用工具。
- key: sections.ui_libraries.title
t: UI 库
- key: sections.ui_libraries.description
t: 组件库和其他 UI 工具包。
- key: sections.meta_frameworks.title
t: 元框架
- key: sections.meta_frameworks.description
t: 帮助渲染和托管 React 应用程序的框架
- key: sections.testing.title
t: 测试
- key: sections.testing.description
t: 测试工具和库
- key: sections.mobile_development.title
t: 移动开发
- key: sections.mobile_development.description
t: 移动开发的库和实用工具
- key: sections.other_tools.title
t: 其他工具
- key: sections.other_tools.description
t: 其他 React 实用工具和库
- key: sections.usage_react.title
t: 使用情况
- key: sections.usage_react.description
t: 您日常如何使用 React
# features
- key: features.main_apis_pain_points
t: 主要 API 的痛点
- key: features.main_apis_pain_points.question
t: 您在使用上述 API 时遇到过哪些痛点?
- key: features.hooks_pain_points
t: Hooks 痛点
- key: features.hooks_pain_points.question
t: 您在使用 hooks 时遇到过哪些痛点?
- key: features.new_apis_pain_points
t: 新 API 的痛点
- key: features.new_apis_pain_points.question
t: 您在使用新 API 时遇到过哪些痛点?
# main features
- key: features.fragment.description
t: >
`<Fragment>`, 通常使用 `<>...</>` 语法表示,可让您在没有包装节点的情况下对元素进行分组。
- key: features.profiler.description
t: >
`<Profiler>` 可让您以编程方式测量 React 树的渲染性能。
- key: features.strictmode.description
t: >
`<StrictMode>` 让你在开发过程中尽早发现组件中的常见错误。
- key: features.createportal.description
t: >
`createPortal` 可让您将某些子元素呈现到 DOM 的不同部分。
- key: features.createcontext.description
t: >
`createContext` 让你创建一个组件可以提供或读取的上下文。
- key: features.forwardref.description
t: >
`forwardRef` 可让您的组件通过 ref 向父组件暴露 DOM 节点。
- key: features.lazy.description
t: >
`lazy` 可以让你延迟加载组件的代码,直到首次渲染时才加载。
- key: features.memo.description
t: >
`memo` 可以让你在组件的 props 不变时跳过重新渲染组件。
- key: features.createroot.description
t: >
`createRoot` 可让您创建一个根节点,以便在浏览器 DOM 节点内显示 React 组件。
- key: features.hydrateroot.description
t: >
`hydrateRoot` 可让您在浏览器 DOM 节点内显示 React 组件,而该 DOM 节点的 HTML 内容之前是由 `react-dom/server` 生成的。
# hooks
- key: features.usecallback.description
t: >
`useCallback` 是一个让您在重新渲染之间缓存函数定义的 React Hook。
- key: features.usecontext.description
t: >
`useContext` 是一个让您从组件中读取和订阅上下文的 React Hook。
- key: features.usedebugvalue.description
t: >
`useDebugValue` 是一个可让您为 React DevTools 中的自定义 Hook 添加标签的 React Hook。
- key: features.usedeferredvalue.description
t: >
`useDeferredValue` 是一个可让您延迟更新用户界面的一部分的 React Hook。
- key: features.useeffect.description
t: >
`useEffect` 是一个可让您将组件与外部系统同步的 React Hook。
- key: features.useid.description
t: >
`useId` 是一个用于生成可传递给可访问性属性的唯一 ID 的 React Hook。
- key: features.usememo.description
t: >
`useMemo` 是一个可让您在两次重新渲染之间缓存计算结果的 React Hook。
- key: features.usereducer.description
t: >
`useReducer` 是一个可让您为组件添加一个 reducer 的 React Hook。
- key: features.useref.description
t: >
`useRef` 是一个可让您引用一个在渲染时不需要的值的 React Hook。
- key: features.usestate.description
t: >
`useState` 是一个可让您为组件添加状态变量的 React Hook。
- key: features.usesyncexternalstore.description
t: >
`useSyncExternalStore` 是一个可让您订阅外部存储的 React Hook。
- key: features.usetransition.description
t: >
`useTransition` 是一个可让您在不阻塞用户界面的情况下更新状态的 React Hook。
# new features
- key: features.suspense.description
t: >
`<Suspense>` 可让你在其子元素加载完成前显示回退元素。
- key: features.use_hook.description
t: >
`use` 是一个可让您读取 Promise 或上下文等资源的值的 React Hook。
- key: features.starttransition.description
t: >
`startTransition` 可以让你在不阻塞用户界面的情况下更新状态。
- key: features.react_server_components.description
t: >
只在服务器上运行的组件。
- key: features.use_client.description
t: >
`'use client'` 标记该组件是在客户端执行的组件。
- key: features.use_server.description
t: >
`'use server'` 标记可从客户端代码调用的服务器端函数。
- key: features.server_actions.description
t: >
React 内置的服务器修改解决方案。
- key: features.taint_api.description
t: >
防止特定对象或值传递给客户端组件。
- key: features.cache.description
t: >
`cache` 可以让你缓存数据获取或计算的结果。
- key: features.useformstatus.description
t: >
`useFormStatus` 是一个可提供上次提交表单的状态信息的 React Hook。
- key: features.useformstate.description
t: >
`useFormState` 是一个可让您根据表单操作的结果更新状态的 React Hook。
# tools
- key: tools.state_management_others
t: 其他状态管理工具库
- key: tools.state_management_happiness
t: 满意度
- key: tools.state_management_happiness.description
t: 你对当前可用的状态管理库有多满意?
- key: tools.data_loading_others
t: 其他数据加载工具库
- key: tools.data_loading_happiness
t: 满意度
- key: tools.data_loading_happiness.description
t: 你对数据加载库的现状有多满意?
- key: tools.ui_libraries_others
t: 其他 UI 库
- key: tools.ui_libraries_happiness
t: 满意度
- key: tools.ui_libraries_happiness.description
t: 你对 UI 库的现状有多满意?
- key: tools.meta_frameworks_others
t: 其他元框架
- key: tools.meta_frameworks_happiness
t: 满意度
- key: tools.meta_frameworks_happiness.description
t: 你对当前元框架的现状有多满意?
- key: tools.testing_others
t: 其他测试库
- key: tools.testing_happiness
t: 满意度
- key: tools.testing_happiness.description
t: 你对当前的测试库现状有多满意?
- key: tools.mobile_development_others
t: 其他移动开发工具
- key: tools.mobile_development_happiness
t: 满意度
- key: tools.mobile_development_happiness.description
t: 你对当前移动开发的现状有多满意?
# other tools
- key: other_tools.forms.description
t: 生成和验证表单的库。
- key: options.forms.na
t: 无
- key: other_tools.build_tools
t: 构建工具
- key: other_tools.build_tools.description
t: 构建工具和打包工具。
- key: other_tools.animation
t: 动画
- key: other_tools.animation.description
t: 用于管理动画和过渡效果的库。
- key: other_tools.auth
t: 身份验证
- key: other_tools.auth.description
t: 用于管理身份验证和账户的库和服务。
- key: other_tools.data_visualization
t: 数据可视化
- key: other_tools.data_visualization.description
t: 数据可视化和图形库。
- key: other_tools.css_tools
t: CSS 工具库
- key: other_tools.css_tools.description
t: 用于为 React 应用程序添加样式的 CSS 库、框架和工具。
- key: other_tools.other_frontend_frameworks
t: 其他前端框架
- key: other_tools.other_frontend_frameworks.description
t: >
您对其他前端框架是否有积极的体验,或者是否有兴趣学习其他前端框架?
- key: other_tools.hosting
t: 托管服务
- key: other_tools.hosting.description
t: 用于托管 React 应用程序的服务。
- key: other_tools.backend_language
t: 后端语言
- key: other_tools.backend_language.description
t: 您的后端应用程序使用哪些语言进行编写?
- key: other_tools.other_services
t: 其他服务
- key: other_tools.other_services.description
t: 您在 React 应用中使用的其他服务。
- key: other_tools.validation
t: 模式和验证库
- key: other_tools.validation.description
t: 用于根据模式验证数据的库。
- key: other_tools.ai_tools
t: AI 工具
- key: other_tools.ai_tools.description
t: 您用来帮助编写 React 代码的人工智能工具和服务。
- key: other_tools.renderers
t: React 渲染器
- key: other_tools.renderers.description
t: 可让您将 React 渲染至不同平台或环境的库。
- key: other_tools.other_tools
t: 其他工具
- key: other_tools.other_tools.description
t: 用于开发 React 应用程序的其他工具。
# CSS
- key: options.css_tools.plain_css
t: CSS (纯 CSS, “香草” CSS)
# react pain points
- key: options.react_pain_points.rerenders
t: 管理组件重复渲染
- key: options.react_pain_points.testing
t: 测试
- key: options.react_pain_points.data_loading
t: 数据加载和异步操作
- key: options.react_pain_points.state_management
t: 状态管理 (`useState`, Redux, Context, 等等。)
- key: options.react_pain_points.bundle_sizes
t: 减少客户端打包大小
- key: options.react_pain_points.server_rendering
t: 服务端渲染和服务器组件
- key: options.react_pain_points.css_styling
t: CSS 和样式
- key: options.react_pain_points.attribute_names
t: “错误的” 属性名比如 `className`, `htmlFor` 等等。
- key: options.react_pain_points.synthetic_events
t: 合成事件 (Synthetic events)
- key: options.react_pain_points.ref_management
t: Ref 管理
- key: options.react_pain_points.memoization
t: 记忆化 (Memoization)
- key: options.react_pain_points.animations
t: 动画和过渡效果
- key: options.react_pain_points.forms
t: 表单
- key: options.react_pain_points.typescript
t: 缺乏官方的 TypeScript 支持
# usage type
- key: usage.react_usage_type
t: React 使用情况
- key: usage.react_usage_type.description
t: 您主要在什么情况下使用 React?
# react version
- key: usage.react_version
t: React 版本
- key: usage.react_version.description
t: 您每天用得最多的是哪个版本的 React?
- key: options.react_version.react_v16x
t: 16.x
- key: options.react_version.react_v17x
t: 17.x
- key: options.react_version.react_v18x
t: 18.x
- key: options.react_version.not_sure
t: 不确定
# JS App Patterns
- key: usage.js_app_patterns
t: 应用模式
- key: usage.js_app_patterns.question
t: >
**过去一年里**您使用过以下哪些架构和渲染模式?
- key: options.js_app_patterns.single_page_app
t: 单页面应用 (SPA)
- key: options.js_app_patterns.single_page_app.description
t: 完全在浏览器中运行的应用
- key: options.js_app_patterns.multiple_page_app
t: 多页面应用 (MPA)
- key: options.js_app_patterns.multiple_page_app.description
t: 完全在服务器上运行的应用程序,客户端动态行为极少
- key: options.js_app_patterns.static_site_generation
t: 静态站点生成 (SSG)
- key: options.js_app_patterns.static_site_generation.description
t: 预渲染静态内容,可能会携带客户端动态元素
- key: options.js_app_patterns.server_side_rendering
t: 服务端渲染 (SSR)
- key: options.js_app_patterns.server_side_rendering.description
t: 在服务器上动态渲染 HTML 内容,然后再在客户端上重新“注水”
- key: options.js_app_patterns.partial_hydration
t: 局部注水
- key: options.js_app_patterns.partial_hydration.description
t: 只在客户端上对某些组件进行注水 (比如 React Server Components)
- key: options.js_app_patterns.progressive_rehydration
t: 渐进式注水
- key: options.js_app_patterns.progressive_rehydration.description
t: 控制在客户端上的对组件注水的顺序
- key: options.js_app_patterns.islands_architecture
t: 岛屿架构
- key: options.js_app_patterns.islands_architecture.description
t: 在一个静态网站中,通过多个入口点实现动态行为的孤岛 (Astro, Eleventy)
- key: options.js_app_patterns.progressive_enhancement
t: 渐进增强
- key: options.js_app_patterns.progressive_enhancement.description
t: 确保应用程序在没有 JavaScript 的情况下也能正常运行
- key: options.js_app_patterns.incremental_static_generation
t: 增量静态生成
- key: options.js_app_patterns.incremental_static_generation.description
t: 即使在初始构建之后,也能动态增强或修改静态网站 (Next.js ISR, Gatsby DSG)
- key: options.js_app_patterns.streaming_ssr
t: 流式服务端渲染
- key: options.js_app_patterns.streaming_ssr.description
t: 将服务器渲染的内容分解为较小的流式块
- key: options.js_app_patterns.resumability
t: 可恢复性
- key: options.js_app_patterns.resumability.description
t: 在服务器上序列化框架状态,使客户端能够在没有重复代码执行的情况下恢复执行。
- key: options.js_app_patterns.edge_rendering
t: 边缘渲染
- key: options.js_app_patterns.edge_rendering.description
t: 在发送给客户端之前在边缘服务器 (Edge) 修改渲染的 HTML。
- key: options.js_app_patterns.micro_frontend
t: 微前端
- key: options.js_app_patterns.domain_driven_design
t: 领域驱动设计 (DDD)
- key: options.js_app_patterns.serverless
t: 无服务
- key: options.js_app_patterns.pespa
t: PESPA
- key: usage.what_do_you_use_react_for
t: 您用 React 来做什么?
- key: usage.react_pain_points
t: React 的痛点
- key: usage.state_of_react
t: 开心程度
- key: usage.state_of_react.question
t: 您对 React 的现状满意吗?
- key: usage.usage_pain_points
t: 其他痛点
- key: usage.usage_pain_points.question
t: 还有其他 React 痛点需要提及吗?
# new features
- key: usage.new_features
t: 新特性
- key: usage.new_features.description
t: 您最期待最近和即将推出的哪些新功能?
- key: options.new_features.asset_loading
t: 静态资源加载
- key: options.new_features.asset_loading.description
t: 将 Suspense 与样式表、字体和图像的加载生命周期完全整合在一起
- key: options.new_features.cache.description
t: 协助缓存数据的 API。
- key: options.new_features_react_forget.description
t: React 的自动响应式编译器
- key: options.new_features.new_docs
t: 新文档
- key: options.new_features.new_docs.description
t: React 的最新文档网站。
- key: options.new_features.offscreen_rendering
t: 离屏渲染
- key: options.new_features_offscreen_rendering.description
t: 在后台渲染屏幕,不增加性能开销。
- key: options.new_features.use_hook
t: >
`use` Hook
- key: options.new_features.use_hook.description
t: >
`use` 可以解除对 Promise 的封装,但也可以在普通组件和 Hooks(包括客户端)中使用。
- key: options.new_features.transition_tracing
t: 过渡追踪
- key: options.new_features.transition_tracing.description
t: 检测 React 过渡何时变慢,并调查变慢的原因。
# what do you use React for?
- key: options.what_do_you_use_react_for.static_sites
t: 静态网站
- key: options.what_do_you_use_react_for.design_systems
t: 设计系统
- key: options.what_do_you_use_react_for.web_apps
t: Web 应用
- key: options.what_do_you_use_react_for.mobile_apps
t: 移动应用
- key: options.what_do_you_use_react_for.desktop_apps
t: 桌面应用
# resources
- key: resources.first_steps_react
t: 第一步
- key: resources.first_steps_react.description
t: 您最初学习 React 时使用了哪些资源?
- key: resources.learning_methods_react
t: 学习方法
- key: resources.learning_methods_react.question
t: 您在学习 React 时使用了哪些资源?
- key: resources.blogs_news_magazines_react
t: 博客 和 订阅
- key: resources.blogs_news_magazines_react.question
t: 您会查阅哪些博客、杂志或订阅来了解 React 新闻?
- key: resources.sites_courses_react
t: 站点 和 课程
- key: resources.sites_courses_react.question
t: 您使用过哪些网站或课程来学习 React?
- key: resources.podcasts_react
t: 播客
- key: resources.podcasts_react.question
t: 您收听过哪些 React 或 Web 开发播客?
- key: resources.video_creators_react
t: 视频创作者
- key: resources.video_creators_react.question
t: 您在 YouTube、Twitch 等网站上观看过哪些 React 或 Web 开发视频创作者的视频?
- key: resources.people_react
t: 人
- key: resources.people_react.question
t: 您阅读、关注或只是想强调 React 社区中的哪些人?