You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`StrictMode`is a tool for highlighting potential problems in an application. Like `Fragment`, `StrictMode`does not render any visible UI. It activates additional checks and warnings for its descendants.
> Strict mode checks are run in development mode only; _they do not impact the production build_.
11
+
> 严格模式检查仅在开发模式下运行；_它们不会影响生产构建_。
12
12
13
-
You can enable strict mode for any part of your application. For example:
13
+
你可以为应用程序的任何部分启用严格模式。例如：
14
14
`embed:strict-mode/enabling-strict-mode.js`
15
15
16
-
In the above example, strict mode checks will *not* be run against the `Header`and`Footer`components. However, `ComponentOne`and`ComponentTwo`, as well as all of their descendants, will have the checks.
As explained [in this blog post](/blog/2018/03/27/update-on-async-rendering.html), certain legacy lifecycle methods are unsafe for use in async React applications. However, if your application uses third party libraries, it can be difficult to ensure that these lifecycles aren't being used. Fortunately, strict mode can help with this!
When strict mode is enabled, React compiles a list of all class components using the unsafe lifecycles, and logs a warning message with information about these components, like so:
31
+
当启用严格模式时，React 会列出使用了不安全生命周期方法的所有 class 组件，并打印一条包含这些组件信息的警告消息，如下所示：
### Warning about legacy string ref API usage {#warning-about-legacy-string-ref-api-usage}
37
+
### 关于使用过时字符串 ref API 的警告 {#warning-about-legacy-string-ref-api-usage}
38
38
39
-
Previously, React provided two ways for managing refs: the legacy string ref API and the callback API. Although the string ref API was the more convenient of the two, it had [several downsides](https://github.com/facebook/react/issues/1373) and so our official recommendation was to [use the callback form instead](/docs/refs-and-the-dom.html#legacy-api-string-refs).
39
+
以前，React 提供了两种方法管理 refs 的方式：已过时的字符串 ref API 的形式及回调函数 API 的形式。尽管字符串 ref API 在两者中使用更方便，但是它有[一些缺点](https://github.com/facebook/react/issues/1373)，因此官方推荐采用[回调的方式](/docs/refs-and-the-dom.html#legacy-api-string-refs)。
40
40
41
-
React 16.3 added a third option that offers the convenience of a string ref without any of the downsides:
React used to support `findDOMNode`to search the tree for a DOM node given a class instance. Normally you don't need this because you can [attach a ref directly to a DOM node](/docs/refs-and-the-dom.html#creating-refs).
56
+
React 支持用 `findDOMNode`来在给定 class 实例的情况下在树中搜索 DOM 节点。通常你不需要这样做，因为你可以[将 ref 直接绑定到 DOM 节点](/docs/refs-and-the-dom.html#creating-refs)。
57
57
58
-
`findDOMNode`can also be used on class components but this was breaking abstraction levels by allowing a parent to demand that certain children was rendered. It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its DOM node. `findDOMNode`only returns the first child, but with the use of Fragments, it is possible for a component to render multiple DOM nodes. `findDOMNode`is a one time read API. It only gave you an answer when you asked for it. If a child component renders a different node, there is no way to handle this change. Therefore `findDOMNode`only worked if components always return a single DOM node that never changes.
58
+
`findDOMNode`也可用于 class 组件，但它违反了抽象原则，它使得父组件需要单独渲染子组件。它会产生重构危险，你不能更改组件的实现细节，因为父组件可能正在访问它的 DOM 节点。`findDOMNode`只返回第一个子节点，但是使用 Fragments，组件可以渲染多个 DOM 节点。`findDOMNode`是一个只读一次的 API。调用该方法只会返回第一次查询的结果。如果子组件渲染了不同的节点，则无法跟踪此更改。因此，`findDOMNode`仅在组件返回单个且不可变的 DOM 节点时才有效。
59
59
60
-
You can instead make this explicit by passing a ref to your custom component and pass that along to the DOM using [ref forwarding](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
60
+
你可以通过将 ref 传递给自定义组件并使用 [ref 转发](/docs/forwarding-refs.html#forwarding-refs-to-dom-components)来将其传递给 DOM 节点。
61
61
62
-
You can also add a wrapper DOM node in your component and attach a ref directly to it.
62
+
你也可以在组件中创建一个 DOM 节点的 wrapper，并将 ref 直接绑定到它。
63
63
64
64
```javascript{4,7}
65
65
class MyComponent extends React.Component {
@@ -73,52 +73,52 @@ class MyComponent extends React.Component {
73
73
}
74
74
```
75
75
76
-
> Note:
76
+
> 注意：
77
77
>
78
-
> In CSS, the[`display: contents`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#display_contents)attribute can be used if you don't want the node to be part of the layout.
### Detecting unexpected side effects {#detecting-unexpected-side-effects}
80
+
### 检测意外的副作用 {#detecting-unexpected-side-effects}
81
81
82
-
Conceptually, React does work in two phases:
83
-
*The **render**phase determines what changes need to be made to e.g. the DOM. During this phase, React calls`render` and then compares the result to the previous render.
84
-
*The **commit**phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like `componentDidMount`and`componentDidUpdate`during this phase.
***提交**阶段发生在当 React 应用变化时。（对于 React DOM 来说，会发生在 React 插入，更新及删除 DOM 节点的时候。）在此阶段，React 还会调用 `componentDidMount`和`componentDidUpdate`之类的生命周期方法。
85
85
86
-
The commit phase is usually very fast, but rendering can be slow. For this reason, the upcoming async mode (which is not enabled by default yet) breaks the rendering work into pieces, pausing and resuming the work to avoid blocking the browser. This means that React may invoke render phase lifecycles more than once before committing, or it may invoke them without committing at all (because of an error or a higher priority interruption).
Render phase lifecycles include the following class component methods:
88
+
渲染阶段的生命周期包括以下 class 组件方法：
89
89
*`constructor`
90
90
*`componentWillMount`
91
91
*`componentWillReceiveProps`
92
92
*`componentWillUpdate`
93
93
*`getDerivedStateFromProps`
94
94
*`shouldComponentUpdate`
95
95
*`render`
96
-
*`setState`updater functions (the first argument)
96
+
*`setState`更新函数（第一个参数）
97
97
98
-
Because the above methods might be called more than once, it's important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state. Unfortunately, it can be difficult to detect these problems as they can often be [non-deterministic](https://en.wikipedia.org/wiki/Deterministic_algorithm).
Strict mode can't automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following methods:
At first glance, this code might not seem problematic. But if `SharedApplicationState.recordEvent`is not [idempotent](https://en.wikipedia.org/wiki/Idempotence#Computer_science_meaning), then instantiating this component multiple times could lead to invalid application state. This sort of subtle bug might not manifest during development, or it might do so inconsistently and so be overlooked.
By intentionally double-invoking methods like the component constructor, strict mode makes patterns like this easier to spot.
116
+
严格模式采用故意重复调用方法（如组件的构造函数）的方式，使得这种 bug 更容易被发现。
117
117
118
-
### Detecting legacy context API {#detecting-legacy-context-api}
118
+
### 检测过时的 context API {#detecting-legacy-context-api}
119
119
120
-
The legacy context API is error-prone, and will be removed in a future major version. It still works for all 16.x releases but will show this warning message in strict mode:
120
+
过时的 context API 容易出错，将在未来的主要版本中删除。在所有 16.x 版本中它仍然有效，但在严格模式下，将显示以下警告：
0 commit comments