@@ -43,8 +43,8 @@ root.render(
43
43
严格模式启用了以下仅在开发环境下有效的行为:
44
44
45
45
- 组件将 [ 重新渲染一次] ( #fixing-bugs-found-by-double-rendering-in-development ) ,以查找由于非纯渲染而引起的错误。
46
- - 组件将 [ 重新运行 Effects 一次] ( #fixing-bugs-found-by-re-running-effects-in-development ) ,以查找由于缺少 Effect 清理而引起的错误。
47
- - 组件将被[ 检查是否使用了已弃用的 API] ( #fixing-deprecation-warnings-enabled-by-strict-mode ) 。
46
+ - 组件将 [ 重新运行 Effect 一次] ( #fixing-bugs-found-by-re-running-effects-in-development ) ,以查找由于缺少 Effect 清理而引起的错误。
47
+ - 组件将被 [ 检查是否使用了已弃用的 API] ( #fixing-deprecation-warnings-enabled-by-strict-mode ) 。
48
48
49
49
#### 参数 {/* props* /}
50
50
@@ -79,15 +79,15 @@ root.render(
79
79
80
80
我们建议将整个应用程序包裹在严格模式中,特别是对于新创建的应用程序。如果你使用的是一个调用 [ ` createRoot ` ] ( /reference/react-dom/client/createRoot ) 的框架,请查阅其文档以了解如何启用严格模式。
81
81
82
- 尽管严格模式的检查** 仅在开发环境** 下运行,但它们有助于找出已经存在于代码中但在生产环境中可能难以复现的错误。严格模式让你在用户反馈之前就可以修复这些错误。
82
+ 尽管严格模式的检查 ** 仅在开发环境** 下运行,但它们有助于找出已经存在于代码中但在生产环境中可能难以复现的错误。严格模式让你在用户反馈之前就可以修复这些错误。
83
83
84
84
<Note >
85
85
86
86
严格模式启用了以下仅在开发环境下有效的行为:
87
87
88
88
- 组件将 [ 重新渲染一次] ( #fixing-bugs-found-by-double-rendering-in-development ) ,以查找由于非纯渲染而引起的错误。
89
- - 组件将 [ 重新运行 Effects 一次] ( #fixing-bugs-found-by-re-running-effects-in-development ) ,以查找由于缺少 Effect 清理而引起的错误。
90
- - 组件将被[ 检查是否使用了已弃用的 API] ( #fixing-deprecation-warnings-enabled-by-strict-mode ) 。
89
+ - 组件将 [ 重新运行 Effect 一次] ( #fixing-bugs-found-by-re-running-effects-in-development ) ,以查找由于缺少 Effect 清理而引起的错误。
90
+ - 组件将被 [ 检查是否使用了已弃用的 API] ( #fixing-deprecation-warnings-enabled-by-strict-mode ) 。
91
91
92
92
** 所有这些检查仅在开发环境中进行,不会影响生产构建。**
93
93
@@ -124,19 +124,19 @@ function App() {
124
124
125
125
### 修复在开发过程中通过双重渲染发现的错误 {/* fixing-bugs-found-by-double-rendering-in-development* /}
126
126
127
- [ React假设您编写的每个组件都是纯函数 ] ( /learn/keeping-components-pure ) 。这意味着您编写的 React 组件在给定相同的输入(props、state 和 context)时必须始终返回相同的 JSX。
127
+ [ React 假设编写的每个组件都是纯函数 ] ( /learn/keeping-components-pure ) 。这意味着编写的 React 组件在给定相同的输入(props、state 和 context)时必须始终返回相同的 JSX。
128
128
129
- 违反此规则的组件会表现得不可预测,并引发错误。为了帮助你找到意外的非纯代码 ,严格模式** 在开发环境中会调用一些函数两次** (仅限应为纯函数的函数)。这些函数包括:
129
+ 违反此规则的组件会表现得不可预测,并引发错误。为了帮助你找到意外的非纯函数代码 ,严格模式 ** 在开发环境中会调用一些函数两次** (仅限应为纯函数的函数)。这些函数包括:
130
130
131
131
- 组件函数体(仅限顶层逻辑,不包括事件处理程序内的代码)
132
132
- 传递给 [ ` useState ` ] ( /reference/react/useState ) 、[ ` set ` 函数] ( /reference/react/useState#setstate ) 、[ ` useMemo ` ] ( /reference/react/useMemo ) 或 [ ` useReducer ` ] ( /reference/react/useReducer ) 的函数。
133
- - 部分类组件的方法,例如 [ ` constructor ` ] ( /reference/react/Component#constructor ) 、[ ` render ` ] ( /reference/react/Component#render ) 、[ ` shouldComponentUpdate ` ] ( /reference/react/Component#shouldcomponentupdate ) 等([ 请参阅完整列表] ( https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects ) )。
133
+ - 部分类组件的方法,例如 [ ` constructor ` ] ( /reference/react/Component#constructor ) 、[ ` render ` ] ( /reference/react/Component#render ) 、[ ` shouldComponentUpdate ` ] ( /reference/react/Component#shouldcomponentupdate ) 等([ 请参阅完整列表] ( https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects ) )。
134
134
135
- 如果一个函数是纯函数,运行两次不会改变其行为,因为纯函数每次都会产生相同的结果。然而,如果一个函数是非纯函数(例如,它会修改接收到的数据),运行两次通常会产生明显的差异(这就是它是非纯函数的原因!)。这有助于您及早发现并修复错误 。
135
+ 如果一个函数是纯函数,运行两次不会改变其行为,因为纯函数每次都会产生相同的结果。然而,如果一个函数是非纯函数(例如,它会修改接收到的数据),运行两次通常会产生明显的差异(这就是它是非纯函数的原因!)。这有助于及早发现并修复错误 。
136
136
137
137
** 下面是一个示例,用来说明严格模式中的双重渲染如何帮助你早期发现错误** 。
138
138
139
- 这个 ` StoryTray ` 组件接收一个 ` stories ` 数组,并在末尾添加一个额外的“创建故事”节点:
139
+ 下面的 ` StoryTray ` 组件接收一个 ` stories ` 数组,并在末尾添加一个额外的“创建故事”节点:
140
140
141
141
<Sandpack >
142
142
214
214
215
215
上面的代码中有一个错误,但很容易忽视,因为初始输出看起来是正确的。
216
216
217
- 如果 ` StoryTray ` 组件重新渲染多次,这个错误将变得更加明显。例如,让我们在鼠标悬停在 ` StoryTray ` 组件上时,以不同的背景颜色重新渲染它:
217
+ 如果 ` StoryTray ` 组件重新渲染多次,这个错误将变得更加明显。例如,当鼠标悬停在 ` StoryTray ` 组件上时,以不同的背景颜色重新渲染它:
218
218
219
219
<Sandpack >
220
220
@@ -310,9 +310,9 @@ export default function StoryTray({ stories }) {
310
310
items .push ({ id: ' create' , label: ' Create Story' });
311
311
` ` `
312
312
313
- 这样做会[使 ` StoryTray` 函数成为纯函数](/learn/keeping-components-pure)。每次调用函数时,它只会修改一个新的数组副本,不会影响任何外部对象或变量。这解决了错误,但在发现其行为有问题之前,你可能需要更频繁地使组件重新渲染。
313
+ 这样做会 [使 ` StoryTray` 函数成为纯函数](/learn/keeping-components-pure)。每次调用函数时,它只会修改一个新的数组副本,不会影响任何外部对象或变量。这解决了错误,但在发现其行为有问题之前,你可能需要更频繁地使组件重新渲染。
314
314
315
- **在原始的例子中,这个错误并不明显。现在让我们将原始有错误的代码包裹在 ` < StrictMode> ` 中:**
315
+ **在原始的例子中,这个错误并不明显。现在让我们将原始有错误的代码包裹在 ` < StrictMode> ` 中**:
316
316
317
317
<Sandpack>
318
318
393
393
394
394
</Sandpack>
395
395
396
- **严格模式*始终*会调用您的渲染函数两次**,这样您就可以立即发现错误 (“创建故事”出现两次)。这让您能够在早期阶段注意到此类错误。当您修复组件以在严格模式下进行渲染时,您也会修复许多可能的未来生产错误 ,例如之前的悬停功能:
396
+ **严格模式始终会调用渲染函数两次**,这样可以帮助立即发现错误 (“创建故事”出现两次)。这让开发者能够在早期阶段注意到此类错误。当修复组件以在严格模式下进行渲染时,也会修复许多可能的未来生产错误 ,例如之前的悬停功能:
397
397
398
398
<Sandpack>
399
399
@@ -485,25 +485,25 @@ li {
485
485
486
486
在没有严格模式的情况下,在你添加了更多的重新渲染前很容易忽视这个错误。而严格模式立即显示了相同的错误。严格模式可以帮助你在将错误推送给团队和用户之前发现它们。
487
487
488
- [更多请阅读保持组件纯粹 ](/learn/keeping-components-pure)。
488
+ [更多请阅读《保持组件纯粹》 ](/learn/keeping-components-pure)。
489
489
490
490
<Note>
491
491
492
- 如果您已经安装了 [React DevTools](/learn/react-developer-tools),在第二次渲染期间进行的任何 ` console .log ` 调用将会显示为稍微变暗的颜色。React DevTools 还提供了一个设置(默认情况下关闭),可以完全禁止显示这些日志。
492
+ 如果你已经安装了 [React DevTools](/learn/react-developer-tools),在第二次渲染期间进行的任何 ` console .log ` 调用将会显示为稍微变暗的颜色。React DevTools 还提供了一个设置(默认情况下关闭),可以完全禁止显示这些日志。
493
493
494
494
</Note>
495
495
496
496
---
497
497
498
- ### 修复在开发中通过重新运行 Effects 发现的错误 {/*fixing-bugs-found-by-re-running-effects-in-development*/}
498
+ ### 修复在开发中通过重新运行 Effect 发现的错误 {/*fixing-bugs-found-by-re-running-effects-in-development*/}
499
499
500
- 严格模式也可以帮助发现 [Effects ](/learn/synchronizing-with-effects) 中的错误。
500
+ 严格模式也可以帮助发现 [Effect ](/learn/synchronizing-with-effects) 中的错误。
501
501
502
- 每个 Effect 都有一些 setup 和可能的 cleanup 。通常情况下,当组件*挂载*(添加到屏幕)时 ,React 会调用设置代码,当组件*卸载*(从屏幕移除)时, React 会调用清理代码 。如果依赖关系在上一次渲染之后发生了变化,React 将再次调用清理代码和设置代码 。
502
+ 每个 Effect 都有一些 setup 和可能的 cleanup 函数 。通常情况下,当组件挂载时 ,React 会调用 setup 代码;当组件卸载时, React 会调用 cleanup 代码 。如果依赖关系在上一次渲染之后发生了变化,React 将再次调用 setup 代码和 cleanup 代码 。
503
503
504
- 当开启严格模式时,React 还会在开发模式下为每个 Effect **额外运行一次setup 和 cleanup**。这可能会让人感到惊讶,但它有助于发现手动难以捕捉到的细微错误。
504
+ 当开启严格模式时,React 还会在开发模式下为每个 Effect **额外运行一次 setup 和 cleanup 函数 **。这可能会让人感到惊讶,但它有助于发现手动难以捕捉到的细微错误。
505
505
506
- **下面是一个例子,用来说明在严格模式下重新运行 Effects 如何帮助您早期发现错误。**
506
+ **下面是一个例子,用来说明在严格模式下重新运行 Effects 如何帮助您早期发现错误**。
507
507
508
508
参考以下将组件连接到聊天功能的示例:
509
509
@@ -646,7 +646,7 @@ button { margin-left: 10px; }
646
646
647
647
</Sandpack>
648
648
649
- 你会注意到打开的连接数量一直在增加。在真实的应用程序中,这会导致性能和网络问题。问题出在[你的 Effect 缺少清理函数 ](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed):
649
+ 你会注意到打开的连接数量一直在增加。在真实的应用程序中,这会导致性能和网络问题。问题出在 [你的 Effect 缺少 cleanup 函数 ](/learn/synchronizing-with-effects#step-3-add-cleanup-if-needed):
650
650
651
651
` ` ` js {4 }
652
652
useEffect (() => {
@@ -658,7 +658,7 @@ button { margin-left: 10px; }
658
658
659
659
现在你的 Effect 在自身执行清理并销毁过时的连接后,问题被解决了。但是请注意,在添加了更多功能(下拉框)之前,这个问题很难被发现。
660
660
661
- **在原始的例子中,这个错误并不明显。现在让我们将原始有错误的代码包裹在 ` < StrictMode> ` 中:**
661
+ **在原始的例子中,这个错误并不明显。现在让我们将原始有错误的代码包裹在 ` < StrictMode> ` 中**:
662
662
663
663
<Sandpack>
664
664
@@ -827,4 +827,4 @@ React 会在任何一个位于 `<StrictMode>` 树中的组件使用以下弃用
827
827
* 旧版上下文([` childContextTypes` ](/reference/react/Component#static-childcontexttypes)、[` contextTypes` ](/reference/react/Component#static-contexttypes) 和 [` getChildContext` ](/reference/react/Component#getchildcontext)),[请参考替代方案](/reference/react/createContext)。
828
828
* 旧版字符串引用([` this .refs ` ](/reference/react/Component#refs)),[请参考替代方案](https://reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage)。
829
829
830
- 这些 API 主要用于旧版的[类组件 ](/reference/react/Component),因此在新版程序中很少出现。
830
+ 这些 API 主要用于旧版的 [类式组件 ](/reference/react/Component),因此在新版程序中很少出现。
0 commit comments