From 40f6f91753b6cce63d05a0853a39578e3a605dd1 Mon Sep 17 00:00:00 2001 From: yixiaojiu <1918418506@qq.com> Date: Fri, 23 Jun 2023 11:29:45 +0800 Subject: [PATCH 01/13] docs(cn): translate reference/react/PureComponent into Chinese --- src/content/reference/react/PureComponent.md | 34 ++++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 3e2d074e10..05cf299df4 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -4,13 +4,13 @@ title: PureComponent -We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives) +我们建议将组件定义为函数而不是类。[查看如何迁移](#alternatives)。 -`PureComponent` is similar to [`Component`](/reference/react/Component) but it skips re-renders for same props and state. Class components are still supported by React, but we don't recommend using them in new code. +`PureComponent` 类似于 [`Component`](/reference/react/Component)，但是它会跳过 props 和 state 的重新渲染。React 仍然支持类组件，但我们不建议在新代码中使用它们。 ```js class Greeting extends PureComponent { @@ -26,11 +26,11 @@ class Greeting extends PureComponent { --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `PureComponent` {/*purecomponent*/} -To skip re-rendering a class component for same props and state, extend `PureComponent` instead of [`Component`:](/reference/react/Component) +为了在 props 和 state 相同时跳过重新渲染，类组件应该继承 `PureComponent` 而不是 [`Component`](/reference/react/Component)： ```js import { PureComponent } from 'react'; @@ -42,18 +42,18 @@ class Greeting extends PureComponent { } ``` -`PureComponent` is a subclass of `Component` and supports [all the `Component` APIs.](/reference/react/Component#reference) Extending `PureComponent` is equivalent to defining a custom [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) method that shallowly compares props and state. +`PureComponent` 是 `Component` 的子类，并且支持 [所有 `Component` 的 API](/reference/react/Component#reference)。继承 `PureComponent`，相对于定义了一个自定义的 [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) 方法，该方法将浅比较 props 和 state。 -[See more examples below.](#usage) +[请参阅以下更多示例](#usage)。 --- -## Usage {/*usage*/} +## 用法 {/*usage*/} -### Skipping unnecessary re-renders for class components {/*skipping-unnecessary-re-renders-for-class-components*/} +### 跳过类组件不必要的重新渲染 {/*skipping-unnecessary-re-renders-for-class-components*/} -React normally re-renders a component whenever its parent re-renders. As an optimization, you can create a component that React will not re-render when its parent re-renders so long as its new props and state are the same as the old props and state. [Class components](/reference/react/Component) can opt into this behavior by extending `PureComponent`: +当父组件重新渲染时，React 通常会重新渲染子组件。为了优化性能，你可以创建一个组件，在父组件重新渲染时不会重新渲染，前提是新的 props 和 state 与 旧的 props 和 state 相同。[类组件](/reference/react/Component) 可以通过继承 `PureComponent` 来选择此行为。 ```js {1} class Greeting extends PureComponent { @@ -63,9 +63,9 @@ class Greeting extends PureComponent { } ``` -A React component should always have [pure rendering logic.](/learn/keeping-components-pure) This means that it must return the same output if its props, state, and context haven't changed. By using `PureComponent`, you are telling React that your component complies with this requirement, so React doesn't need to re-render as long as its props and state haven't changed. However, your component will still re-render if a context that it's using changes. +React 组件应该始终具有 [纯粹的渲染逻辑](/learn/keeping-components-pure)。这意味着如果 props、state 和 context 没有发生变化，它必须返回相同的输出。通过使用 `PureComponent`，你就是在告诉 React 你的组件符合这个要求，因此只要 props 和 state 没有改变，React 就不需要重新渲染组件。然而，如果你的组件正在使用的 context 发生变化，它仍会重新渲染。 -In this example, notice that the `Greeting` component re-renders whenever `name` is changed (because that's one of its props), but not when `address` is changed (because it's not passed to `Greeting` as a prop): +在这个例子中，注意 `Greeting` 组件会在 `name` 改变时重新渲染（因为这是它的一个 prop），但在 `address` 改变时不会（因为它没有作为一个 prop 传递给 `Greeting`）： @@ -109,17 +109,17 @@ label { -We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives) +我们建议将组件定义为函数而不是类。[查看如何迁移](#alternatives)。 --- -## Alternatives {/*alternatives*/} +## 替代方案 {/*alternatives*/} -### Migrating from a `PureComponent` class component to a function {/*migrating-from-a-purecomponent-class-component-to-a-function*/} +### 从 `PureComponent` 类组件迁移到函数组件 {/*migrating-from-a-purecomponent-class-component-to-a-function*/} -We recommend using function components instead of [class components](/reference/react/Component) in new code. If you have some existing class components using `PureComponent`, here is how you can convert them. This is the original code: +我们建议在新代码中使用函数组件，而不是 [类组件](/reference/react/Component)。如果你有一些使用 `PureComponent` 的现有组件，以下是如何进行转换。这是原始代码： @@ -161,7 +161,7 @@ label { -When you [convert this component from a class to a function,](/reference/react/Component#alternatives) wrap it in [`memo`:](/reference/react/memo) +当你 [将这个组件从类组件转换为函数组件](/reference/react/Component#alternatives) 时，将其包装在 [`memo`](/reference/react/memo)： @@ -203,6 +203,6 @@ label { -Unlike `PureComponent`, [`memo`](/reference/react/memo) does not compare the new and the old state. In function components, calling the [`set` function](/reference/react/useState#setstate) with the same state [already prevents re-renders by default,](/reference/react/memo#updating-a-memoized-component-using-state) even without `memo`. +与 `PureComponent` 不同，[`memo`](/reference/react/memo) 不会比较新旧 state。在函数组件中，即使没有 `memo`，调用具有相同 state 的 [`set` 函数](/reference/react/useState#setstate)，[默认已经阻止了重新渲染](/reference/react/memo#updating-a-memoized-component-using-state)。 From 8d2baba22a9751e9f6403cbbf4b49b44001f63f6 Mon Sep 17 00:00:00 2001 From: yixiaojiu <1918418506@qq.com> Date: Fri, 23 Jun 2023 11:46:04 +0800 Subject: [PATCH 02/13] docs(cn): review and update --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 05cf299df4..809c66d2d2 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -53,7 +53,7 @@ class Greeting extends PureComponent { ### 跳过类组件不必要的重新渲染 {/*skipping-unnecessary-re-renders-for-class-components*/} -当父组件重新渲染时，React 通常会重新渲染子组件。为了优化性能，你可以创建一个组件，在父组件重新渲染时不会重新渲染，前提是新的 props 和 state 与 旧的 props 和 state 相同。[类组件](/reference/react/Component) 可以通过继承 `PureComponent` 来选择此行为。 +当父组件重新渲染时，React 通常会重新渲染子组件。为了优化性能，你可以创建一个组件，在父组件重新渲染时不会重新渲染，前提是新的 props 和 state 与旧的 props 和 state 相同。[类组件](/reference/react/Component) 可以通过继承 `PureComponent` 来选择此行为。 ```js {1} class Greeting extends PureComponent { From 9c258fff317859b733b00ca591f70bbac4c2cf2f Mon Sep 17 00:00:00 2001 From: yixiaojiu <1918418506@qq.com> Date: Sun, 25 Jun 2023 09:48:09 +0800 Subject: [PATCH 03/13] docs(cn): modify related complaints --- src/content/reference/react/PureComponent.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 809c66d2d2..6135d4b135 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -4,13 +4,13 @@ title: PureComponent -我们建议将组件定义为函数而不是类。[查看如何迁移](#alternatives)。 +我们建议使用函数式组件而非类式组件。[查看如何迁移](#alternatives)。 -`PureComponent` 类似于 [`Component`](/reference/react/Component)，但是它会跳过 props 和 state 的重新渲染。React 仍然支持类组件，但我们不建议在新代码中使用它们。 +`PureComponent` 类似于 [`Component`](/reference/react/Component)，但是当 props 和 state 与之前保持一致时会跳过重新渲染。React 仍然支持类式组件，但我们不建议在新代码中使用它们。 ```js class Greeting extends PureComponent { @@ -109,7 +109,7 @@ label { -我们建议将组件定义为函数而不是类。[查看如何迁移](#alternatives)。 +我们建议使用函数式组件而非类式组件。[查看如何迁移](#alternatives)。 From e3220f2d6b25af93090b74b4479b69737a211548 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:23:22 +0800 Subject: [PATCH 04/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 6135d4b135..a575472f11 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -30,7 +30,7 @@ class Greeting extends PureComponent { ### `PureComponent` {/*purecomponent*/} -为了在 props 和 state 相同时跳过重新渲染，类组件应该继承 `PureComponent` 而不是 [`Component`](/reference/react/Component)： +为了在 props 和 state 相同时跳过重新渲染，类式组件应该继承 `PureComponent` 而不是 [`Component`](/reference/react/Component)： ```js import { PureComponent } from 'react'; From 8e393f55d9816ff699f53b10ffde92ae9d4a37cf Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:23:32 +0800 Subject: [PATCH 05/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index a575472f11..c1756fb0d5 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -10,7 +10,7 @@ title: PureComponent -`PureComponent` 类似于 [`Component`](/reference/react/Component)，但是当 props 和 state 与之前保持一致时会跳过重新渲染。React 仍然支持类式组件，但我们不建议在新代码中使用它们。 +`PureComponent` 类似于 [`Component`](/reference/react/Component)，但是当 props 和 state 与之前保持一致时会跳过重新渲染。React 仍然支持类式组件，但我们不建议在新代码中使用。 ```js class Greeting extends PureComponent { From d3c630b50322a7bf311d1f0f946e7a642df7475e Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:23:38 +0800 Subject: [PATCH 06/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index c1756fb0d5..9c5ffb8dc1 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -42,7 +42,7 @@ class Greeting extends PureComponent { } ``` -`PureComponent` 是 `Component` 的子类，并且支持 [所有 `Component` 的 API](/reference/react/Component#reference)。继承 `PureComponent`，相对于定义了一个自定义的 [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) 方法，该方法将浅比较 props 和 state。 +`PureComponent` 是 `Component` 的子类，并且支持 [所有 `Component` 的 API](/reference/react/Component#reference)。继承 `PureComponent` 的子类相当与定义了一个自定义的 [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate) 方法，该方法将浅比较 props 和 state。 [请参阅以下更多示例](#usage)。 From d62ecc50e97685617efd117fe8e40cd7b0ebe87f Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:24:14 +0800 Subject: [PATCH 07/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 9c5ffb8dc1..cc1b4f9dd4 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -51,7 +51,7 @@ class Greeting extends PureComponent { ## 用法 {/*usage*/} -### 跳过类组件不必要的重新渲染 {/*skipping-unnecessary-re-renders-for-class-components*/} +### 跳过类式组件不必要的重新渲染 {/*skipping-unnecessary-re-renders-for-class-components*/} 当父组件重新渲染时，React 通常会重新渲染子组件。为了优化性能，你可以创建一个组件，在父组件重新渲染时不会重新渲染，前提是新的 props 和 state 与旧的 props 和 state 相同。[类组件](/reference/react/Component) 可以通过继承 `PureComponent` 来选择此行为。 From dd790a1be44cf9217eaf41be5634c4de9a414aa1 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:24:24 +0800 Subject: [PATCH 08/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index cc1b4f9dd4..068fbc4c20 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -53,7 +53,7 @@ class Greeting extends PureComponent { ### 跳过类式组件不必要的重新渲染 {/*skipping-unnecessary-re-renders-for-class-components*/} -当父组件重新渲染时，React 通常会重新渲染子组件。为了优化性能，你可以创建一个组件，在父组件重新渲染时不会重新渲染，前提是新的 props 和 state 与旧的 props 和 state 相同。[类组件](/reference/react/Component) 可以通过继承 `PureComponent` 来选择此行为。 +当父组件重新渲染时，React 通常会重新渲染子组件。为了优化性能，你可以创建一个组件，在父组件重新渲染时不会重新渲染，前提是新的 props 和 state 与旧的 props 和 state 相同。[类式组件](/reference/react/Component) 可以通过继承 `PureComponent` 来选择此行为。 ```js {1} class Greeting extends PureComponent { From 167a3a89e099d157c33b9fd7932d00403bdfef59 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:24:31 +0800 Subject: [PATCH 09/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 068fbc4c20..0a4a4b8a8f 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -63,7 +63,7 @@ class Greeting extends PureComponent { } ``` -React 组件应该始终具有 [纯粹的渲染逻辑](/learn/keeping-components-pure)。这意味着如果 props、state 和 context 没有发生变化，它必须返回相同的输出。通过使用 `PureComponent`，你就是在告诉 React 你的组件符合这个要求，因此只要 props 和 state 没有改变，React 就不需要重新渲染组件。然而，如果你的组件正在使用的 context 发生变化，它仍会重新渲染。 +React 组件应该始终具有 [纯粹的渲染逻辑](/learn/keeping-components-pure)。这意味着如果 props、state 和 context 没有发生变化，它必须返回相同的输出。使用 `PureComponent` 便是在告诉 React 你的组件符合这个要求，因此只要 props 和 state 没有改变，React 就不需要重新渲染组件。然而，如果你的组件正在使用的 context 发生变化，它仍会重新渲染。 在这个例子中，注意 `Greeting` 组件会在 `name` 改变时重新渲染（因为这是它的一个 prop），但在 `address` 改变时不会（因为它没有作为一个 prop 传递给 `Greeting`）： From 8c56a6b8ea5c587235a99c60be7f3eba19878a36 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:24:37 +0800 Subject: [PATCH 10/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 0a4a4b8a8f..6f1589398f 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -65,7 +65,7 @@ class Greeting extends PureComponent { React 组件应该始终具有 [纯粹的渲染逻辑](/learn/keeping-components-pure)。这意味着如果 props、state 和 context 没有发生变化，它必须返回相同的输出。使用 `PureComponent` 便是在告诉 React 你的组件符合这个要求，因此只要 props 和 state 没有改变，React 就不需要重新渲染组件。然而，如果你的组件正在使用的 context 发生变化，它仍会重新渲染。 -在这个例子中，注意 `Greeting` 组件会在 `name` 改变时重新渲染（因为这是它的一个 prop），但在 `address` 改变时不会（因为它没有作为一个 prop 传递给 `Greeting`）： +注意，在这个例子中，`Greeting` 组件会在 `name` 改变时重新渲染（因为这是它的 props），但在 `address` 改变时不会（因为它没有作为 props 传递给 `Greeting`）： From 2f863c3b8889c8d7f0d654dee9cda45b2e45683a Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:24:44 +0800 Subject: [PATCH 11/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 6f1589398f..2356581e87 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -117,7 +117,7 @@ label { ## 替代方案 {/*alternatives*/} -### 从 `PureComponent` 类组件迁移到函数组件 {/*migrating-from-a-purecomponent-class-component-to-a-function*/} +### 从 `PureComponent` 类式组件迁移到函数式组件 {/*migrating-from-a-purecomponent-class-component-to-a-function*/} 我们建议在新代码中使用函数组件，而不是 [类组件](/reference/react/Component)。如果你有一些使用 `PureComponent` 的现有组件，以下是如何进行转换。这是原始代码： From 40ef698c3f2b847262b443bed41cc487cf9f2c22 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:24:51 +0800 Subject: [PATCH 12/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 2356581e87..4f21074aa7 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -119,7 +119,7 @@ label { ### 从 `PureComponent` 类式组件迁移到函数式组件 {/*migrating-from-a-purecomponent-class-component-to-a-function*/} -我们建议在新代码中使用函数组件，而不是 [类组件](/reference/react/Component)。如果你有一些使用 `PureComponent` 的现有组件，以下是如何进行转换。这是原始代码： +我们建议在新代码中使用函数式组件，而不是 [类式组件](/reference/react/Component)。如果你有一些使用 `PureComponent` 的现有组件，以下是如何进行转换。这是原始代码： From bdc96c08d953fd084ef34a62b691df605aaaa355 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 19:24:58 +0800 Subject: [PATCH 13/13] Update src/content/reference/react/PureComponent.md --- src/content/reference/react/PureComponent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md index 4f21074aa7..ed6ff75b7d 100644 --- a/src/content/reference/react/PureComponent.md +++ b/src/content/reference/react/PureComponent.md @@ -161,7 +161,7 @@ label { -当你 [将这个组件从类组件转换为函数组件](/reference/react/Component#alternatives) 时，将其包装在 [`memo`](/reference/react/memo)： +当你 [将这个组件从类式组件转换为函数式组件](/reference/react/Component#alternatives) 时，将其包装在 [`memo`](/reference/react/memo)：