Skip to content

Commit d9ed015

Browse files
authored
Merge branch 'main' into main
2 parents 32f2438 + a1c885c commit d9ed015

17 files changed

+228
-104
lines changed

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11469,7 +11469,7 @@ root.render(
1146911469

1147011470
**`<Activity />` 现在可以在 React Canary 版本使用。**
1147111471

11472-
[了解更多关于 React 版本发布的内容](/community/versioning-policy#all-release-channels)
11472+
[了解更多关于 React 版本发布的内容](/community/versioning-policy#all-release-channels)
1147311473

1147411474
</Note>
1147511475

@@ -14303,7 +14303,7 @@ useEffect(() => {
1430314303
}); // 编译器插入的依赖项。
1430414304
```
1430514305

14306-
使用这段代码,React 编译器可以为你推断依赖项并自动插入它们,这样你就不需要看到或编写它们。通过像[IDE 扩展](#compiler-ide-extension)[`useEffectEvent`](/reference/react/experimental_useEffectEvent)这样的功能,我们可以提供一个 CodeLens 来显示编译器在你需要调试时插入的内容,或通过移除依赖项来优化。这有助于强化编写 Effects 的正确心智模型,即 Effects 可以在任何时候运行,以将你的组件或 hook 的状态与其他内容同步。
14306+
使用这段代码,React 编译器可以为你推断依赖项并自动插入它们,这样你就不需要看到或编写它们。通过像[IDE 扩展](#compiler-ide-extension)[`useEffectEvent`](/reference/react/useEffectEvent)这样的功能,我们可以提供一个 CodeLens 来显示编译器在你需要调试时插入的内容,或通过移除依赖项来优化。这有助于强化编写 Effects 的正确心智模型,即 Effects 可以在任何时候运行,以将你的组件或 hook 的状态与其他内容同步。
1430714307

1430814308
我们希望自动插入依赖项不仅更容易编写,而且通过迫使你从 Effect 的作用角度思考,而不是从组件生命周期角度思考,使它们更容易理解。
1430914309

src/content/learn/escape-hatches.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -455,8 +455,8 @@ label { display: block; margin-top: 10px; }
455455
```json package.json hidden
456456
{
457457
"dependencies": {
458-
"react": "experimental",
459-
"react-dom": "experimental",
458+
"react": "canary",
459+
"react-dom": "canary",
460460
"react-scripts": "latest",
461461
"toastify-js": "1.12.0"
462462
},
@@ -471,7 +471,7 @@ label { display: block; margin-top: 10px; }
471471

472472
```js
473473
import { useState, useEffect } from 'react';
474-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
474+
import { useEffectEvent } from 'react';
475475
import { createConnection, sendMessage } from './chat.js';
476476
import { showNotification } from './notifications.js';
477477

src/content/learn/removing-effect-dependencies.md

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -610,11 +610,13 @@ function ChatRoom({ roomId }) {
610610
611611
### 你想读取一个值而不对其变化做出“反应”吗? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/}
612612
613-
<Wip>
613+
<Canary>
614614
615-
本节描述了一个在稳定版本的 React 中 **尚未发布的实验性** API。
615+
**`useEffectEvent` API 当前仅在 React Canary 和 实验发行版中可用**。
616616
617-
</Wip>
617+
[了解更多关于 React 版本发布的内容](/community/versioning-policy#all-release-channels)。
618+
619+
</Canary>
618620
619621
假设你希望在用户收到新消息时播放声音,`isMuted``true` 除外:
620622
@@ -1261,8 +1263,8 @@ Effect 中是否有一行代码不应该是响应式的?如何将非响应式
12611263
```json package.json hidden
12621264
{
12631265
"dependencies": {
1264-
"react": "experimental",
1265-
"react-dom": "experimental",
1266+
"react": "canary",
1267+
"react-dom": "canary",
12661268
"react-scripts": "latest"
12671269
},
12681270
"scripts": {
@@ -1276,7 +1278,7 @@ Effect 中是否有一行代码不应该是响应式的?如何将非响应式
12761278
12771279
```js
12781280
import { useState, useEffect, useRef } from 'react';
1279-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
1281+
import { useEffectEvent } from 'react';
12801282
import { FadeInAnimation } from './animation.js';
12811283

12821284
function Welcome({ duration }) {
@@ -1388,8 +1390,8 @@ Effect 需要读取 `duration` 的最新值,但你不希望它对 `duration`
13881390
```json package.json hidden
13891391
{
13901392
"dependencies": {
1391-
"react": "experimental",
1392-
"react-dom": "experimental",
1393+
"react": "canary",
1394+
"react-dom": "canary",
13931395
"react-scripts": "latest"
13941396
},
13951397
"scripts": {
@@ -1404,7 +1406,7 @@ Effect 需要读取 `duration` 的最新值,但你不希望它对 `duration`
14041406
```js
14051407
import { useState, useEffect, useRef } from 'react';
14061408
import { FadeInAnimation } from './animation.js';
1407-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
1409+
import { useEffectEvent } from 'react';
14081410

14091411
function Welcome({ duration }) {
14101412
const ref = useRef(null);
@@ -1824,8 +1826,8 @@ label, button { display: block; margin-bottom: 5px; }
18241826
```json package.json hidden
18251827
{
18261828
"dependencies": {
1827-
"react": "experimental",
1828-
"react-dom": "experimental",
1829+
"react": "canary",
1830+
"react-dom": "canary",
18291831
"react-scripts": "latest",
18301832
"toastify-js": "1.12.0"
18311833
},
@@ -1906,7 +1908,7 @@ export default function App() {
19061908
19071909
```js src/ChatRoom.js active
19081910
import { useState, useEffect } from 'react';
1909-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
1911+
import { useEffectEvent } from 'react';
19101912

19111913
export default function ChatRoom({ roomId, createConnection, onMessage }) {
19121914
useEffect(() => {
@@ -2119,8 +2121,8 @@ export default function ChatRoom({ roomId, isEncrypted, onMessage }) { // Reacti
21192121
```json package.json hidden
21202122
{
21212123
"dependencies": {
2122-
"react": "experimental",
2123-
"react-dom": "experimental",
2124+
"react": "canary",
2125+
"react-dom": "canary",
21242126
"react-scripts": "latest",
21252127
"toastify-js": "1.12.0"
21262128
},
@@ -2188,7 +2190,7 @@ export default function App() {
21882190
21892191
```js src/ChatRoom.js active
21902192
import { useState, useEffect } from 'react';
2191-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
2193+
import { useEffectEvent } from 'react';
21922194
import {
21932195
createEncryptedConnection,
21942196
createUnencryptedConnection,

src/content/learn/reusing-logic-with-custom-hooks.md

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -837,11 +837,13 @@ export default function ChatRoom({ roomId }) {
837837
838838
### 把事件处理函数传到自定义 Hook 中 {/*passing-event-handlers-to-custom-hooks*/}
839839
840-
<Wip>
840+
<Canary>
841841
842-
这个章节描述了 React 稳定版 **还未发布的一个实验性 API**。
842+
**`useEffectEvent` API 当前仅在 React Canary 和 实验发行版中可用**。
843843
844-
</Wip>
844+
[了解更多关于 React 版本发布的内容](/community/versioning-policy#all-release-channels)。
845+
846+
</Canary>
845847
846848
当你在更多组件中使用 `useChatRoom` 时,你可能希望组件能定制它的行为。例如现在 Hook 内部收到消息的处理逻辑是硬编码:
847849
@@ -985,7 +987,7 @@ export default function ChatRoom({ roomId }) {
985987
986988
```js src/useChatRoom.js
987989
import { useEffect } from 'react';
988-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
990+
import { useEffectEvent } from 'react';
989991
import { createConnection } from './chat.js';
990992

991993
export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
@@ -1070,8 +1072,8 @@ export function showNotification(message, theme = 'dark') {
10701072
```json package.json hidden
10711073
{
10721074
"dependencies": {
1073-
"react": "experimental",
1074-
"react-dom": "experimental",
1075+
"react": "canary",
1076+
"react-dom": "canary",
10751077
"react-scripts": "latest",
10761078
"toastify-js": "1.12.0"
10771079
},
@@ -1666,7 +1668,7 @@ export default function App() {
16661668
16671669
```js src/useFadeIn.js active
16681670
import { useState, useEffect } from 'react';
1669-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
1671+
import { useEffectEvent } from 'react';
16701672

16711673
export function useFadeIn(ref, duration) {
16721674
const [isRunning, setIsRunning] = useState(true);
@@ -1719,8 +1721,8 @@ html, body { min-height: 300px; }
17191721
```json package.json hidden
17201722
{
17211723
"dependencies": {
1722-
"react": "experimental",
1723-
"react-dom": "experimental",
1724+
"react": "canary",
1725+
"react-dom": "canary",
17241726
"react-scripts": "latest"
17251727
},
17261728
"scripts": {
@@ -2208,8 +2210,8 @@ export function useInterval(onTick, delay) {
22082210
```json package.json hidden
22092211
{
22102212
"dependencies": {
2211-
"react": "experimental",
2212-
"react-dom": "experimental",
2213+
"react": "canary",
2214+
"react-dom": "canary",
22132215
"react-scripts": "latest"
22142216
},
22152217
"scripts": {
@@ -2252,7 +2254,7 @@ export function useCounter(delay) {
22522254
22532255
```js src/useInterval.js
22542256
import { useEffect } from 'react';
2255-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
2257+
import { useEffectEvent } from 'react';
22562258

22572259
export function useInterval(onTick, delay) {
22582260
useEffect(() => {
@@ -2279,8 +2281,8 @@ export function useInterval(onTick, delay) {
22792281
```json package.json hidden
22802282
{
22812283
"dependencies": {
2282-
"react": "experimental",
2283-
"react-dom": "experimental",
2284+
"react": "canary",
2285+
"react-dom": "canary",
22842286
"react-scripts": "latest"
22852287
},
22862288
"scripts": {
@@ -2324,7 +2326,7 @@ export function useCounter(delay) {
23242326
23252327
```js src/useInterval.js active
23262328
import { useEffect } from 'react';
2327-
import { experimental_useEffectEvent as useEffectEvent } from 'react';
2329+
import { useEffectEvent } from 'react';
23282330

23292331
export function useInterval(callback, delay) {
23302332
const onTick = useEffectEvent(callback);

0 commit comments

Comments
 (0)