diff --git a/postcss.config.js b/postcss.config.js
index 427294522a..d55c43c909 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -17,4 +17,4 @@ module.exports = {
},
},
},
-}
+};
diff --git a/public/js/jsfiddle-integration-babel.js b/public/js/jsfiddle-integration-babel.js
index 006c79c8a8..56059472ff 100644
--- a/public/js/jsfiddle-integration-babel.js
+++ b/public/js/jsfiddle-integration-babel.js
@@ -4,12 +4,14 @@
// Do not delete or move this file.
// Many fiddles reference it so we have to keep it here.
-(function() {
+(function () {
var tag = document.querySelector(
'script[type="application/javascript;version=1.7"]'
);
if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
- alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+ alert(
+ 'Bad JSFiddle configuration, please fork the original React JSFiddle'
+ );
}
tag.setAttribute('type', 'text/babel');
tag.textContent = tag.textContent.replace(/^\/\/
diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 5e9bf7eff7..f83eba3c2b 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -1273,7 +1273,7 @@ button { margin-left: 10px; }
要实现错误边界组件，你需要提供 [`static getDerivedStateFromError`](#static-getderivedstatefromerror)，它允许你更新状态以响应错误并向用户显示错误消息。你还可以选择实现 [`componentDidCatch`](#componentdidcatch) 来添加一些额外的逻辑，例如将错误添加到分析服务。
- With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development.
+With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development.
```js {9-12,14-27}
import * as React from 'react';
@@ -1298,7 +1298,6 @@ class ErrorBoundary extends React.Component {
// 在 div 中（由 APP 创建）
// 在 App 中
info.componentStack,
- // 仅在 react@canary 版本可用
// 警告：Owner Stack 在生产中不可用
React.captureOwnerStack(),
);
diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index c9a4217d4b..f0eb2284b2 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -124,7 +124,7 @@ function App() {
-When `StrictMode` is enabled for a part of the app, React will only enable behaviors that are possible in production. For example, if `` is not enabled at the root of the app, it will not [re-run Effects an extra time](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) on initial mount, since this would cause child effects to double fire without the parent effects, which cannot happen in production.
+When `StrictMode` is enabled for a part of the app, React will only enable behaviors that are possible in production. For example, if `` is not enabled at the root of the app, it will not [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) on initial mount, since this would cause child effects to double fire without the parent effects, which cannot happen in production.
diff --git a/src/content/reference/react/captureOwnerStack.md b/src/content/reference/react/captureOwnerStack.md
index a5821051c0..6d8cc502d5 100644
--- a/src/content/reference/react/captureOwnerStack.md
+++ b/src/content/reference/react/captureOwnerStack.md
@@ -120,22 +120,6 @@ createRoot(document.createElement('div'), {
);
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "latest"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```html public/index.html hidden
@@ -351,22 +335,6 @@ const container = document.getElementById("root");
createRoot(container).render();
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "latest"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
```js src/App.js
function Component() {
return ;
@@ -411,22 +379,6 @@ export default function App() {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "latest"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
- "eject": "react-scripts eject"
- }
-}
-```
-
### `captureOwnerStack` is not available {/*captureownerstack-is-not-available*/}
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index f7c964711b..2f3960f6f7 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -46,6 +46,8 @@ function PasswordField() {
* `useId` **不应该被用来生成列表中的 key**。[key 应该由你的数据生成](/learn/rendering-lists#where-to-get-your-key)。
+* `useId` currently cannot be used in [async Server Components](/reference/rsc/server-components#async-components-with-server-components).
+
---
## 用法 {/*usage*/}
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index 606a909d5c..da0696164b 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -405,14 +405,14 @@ function getSnapshot() {
这里的 `subscribe` 函数是在组件 **内部** 定义的，所以它每次渲染都不同：
-```js {4-7}
+```js {2-5}
function ChatIndicator() {
- const isOnline = useSyncExternalStore(subscribe, getSnapshot);
-
// 🚩 总是不同的函数，所以 React 每次重新渲染都会重新订阅
function subscribe() {
// ...
}
+
+ const isOnline = useSyncExternalStore(subscribe, getSnapshot);
// ...
}
@@ -420,28 +420,28 @@ function ChatIndicator() {
如果重新渲染时你传一个不同的 `subscribe` 函数，React 会重新订阅你的 store。如果这造成了性能问题，因而你想避免重新订阅，就把 `subscribe` 函数移到外面：
-```js {6-9}
-function ChatIndicator() {
- const isOnline = useSyncExternalStore(subscribe, getSnapshot);
+```js {1-4}
+// ✅ 总是相同的函数，所以 React 不需要重新订阅
+function subscribe() {
// ...
}
-// ✅ 总是相同的函数，所以 React 不需要重新订阅
-function subscribe() {
+function ChatIndicator() {
+ const isOnline = useSyncExternalStore(subscribe, getSnapshot);
// ...
}
```
或者，把 `subscribe` 包在 [`useCallback`](/reference/react/useCallback) 里面以便只在某些参数改变时重新订阅：
-```js {4-8}
+```js {2-5}
function ChatIndicator({ userId }) {
- const isOnline = useSyncExternalStore(subscribe, getSnapshot);
-
// ✅ 只要 userId 不变，都是同一个函数
const subscribe = useCallback(() => {
// ...
}, [userId]);
+
+ const isOnline = useSyncExternalStore(subscribe, getSnapshot);
// ...
}