Skip to content

Commit c0c705e

Browse files
committed
docs: translate useTransition
1 parent d528911 commit c0c705e

File tree

1 file changed

+8
-9
lines changed

1 file changed

+8
-9
lines changed

src/content/reference/react/useTransition.md

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ function SubmitButton({ submitAction }) {
9595

9696
#### 参数 {/*starttransition-parameters*/}
9797

98-
* `action`:通过调用一个或多个 [`set` 函数](/reference/react/useState#setstate) 来更新某些状态的函数。React 会立即调用 `action`(无需参数),并将 `action` 函数调用期间同步调度的所有状态更新标记为 Transition。在 `action` 中通过 `await` 等待的异步调用会被包含在 Transition 中,但目前需要在 `await` 之后将任何 `set` 函数再次包裹在 `startTransition` 中(参见[问题排查](#react-doesnt-treat-my-state-update-after-await-as-a-transition))。标记为 Transition 的状态更新将具备[非阻塞特性](#marking-a-state-update-as-a-non-blocking-transition),并且[不会显示不必要的加载指示](#preventing-unwanted-loading-indicators)
98+
* `action`:通过调用一个或多个 [`set` 函数](/reference/react/useState#setstate) 来更新某些状态的函数。React 会立即调用 `action`(无需参数),并将 `action` 函数调用期间同步调度的所有状态更新标记为 Transition。在 `action` 中通过 `await` 等待的异步调用会被包含在 Transition 中,但目前需要在 `await` 之后将任何 `set` 函数再次包裹在 `startTransition` 中(参见[疑难解答](#react-doesnt-treat-my-state-update-after-await-as-a-transition))。标记为 Transition 的状态更新将具备[非阻塞特性](#marking-a-state-update-as-a-non-blocking-transition),并且[不会显示不必要的加载指示](#preventing-unwanted-loading-indicators)
9999

100100
#### 返回值 {/*starttransition-returns*/}
101101

@@ -109,7 +109,7 @@ function SubmitButton({ submitAction }) {
109109

110110
* 传递给 `startTransition` 的函数会被立即执行,并将在其执行期间发生的所有状态更新标记为 transition。如果你尝试在 `setTimeout` 中执行状态更新,它们将不会被标记为 transition。
111111

112-
* You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
112+
* 您必须将任意异步请求之后的状态更新用 `startTransition` 包裹,以将其标记为 Transition 更新。这是一个已知限制,我们将在未来版本中修复(参见[疑难解答](#react-doesnt-treat-my-state-update-after-await-as-a-transition))。
113113

114114
* `startTransition` 函数具有稳定的标识,所以你经常会看到 Effect 的依赖数组中会省略它,即使包含它也不会导致 Effect 重新触发。如果 linter 允许你省略依赖项并且没有报错,那么你就可以安全地省略它。[了解移除 Effect 依赖项的更多信息。](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
115115

@@ -171,7 +171,7 @@ function CheckoutForm() {
171171

172172
在这个示例中,`updateQuantity` 函数模拟向服务端发送请求来更新购物车中的商品数量。该函数*被人为地减慢*,使得完成请求至少需要一秒钟。
173173

174-
快速多次更新数量。请注意,当任何请求在进行中时,都会显示挂起的“Total”状态,并且“Total”只会在最后一个请求完成后更新。由于更新操作在 Action 中进行,在请求处理期间仍可继续更新“quantity"”。
174+
快速多次更新数量。请注意,当任何请求在进行中时,都会显示挂起的 “Total” 状态,并且 “Total” 只会在最后一个请求完成后更新。由于更新操作在 Action 中进行,在请求处理期间仍可继续更新“quantity"”。
175175

176176
<Sandpack>
177177

@@ -305,7 +305,7 @@ export async function updateQuantity(newQuantity) {
305305

306306
</Sandpack>
307307

308-
这是一个演示 Actions 工作原理的基础示例,但此示例未处理请求完成顺序错乱的问题。当多次更新数量时,较早的请求可能会在较晚的请求之后完成,导致数量更新顺序混乱。这是一个已知限制,我们将在未来版本中修复(参见下方的[问题排查](#my-state-updates-in-transitions-are-out-of-order))。
308+
这是一个演示 Actions 工作原理的基础示例,但此示例未处理请求完成顺序错乱的问题。当多次更新数量时,较早的请求可能会在较晚的请求之后完成,导致数量更新顺序混乱。这是一个已知限制,我们将在未来版本中修复(参见下方的[疑难解答](#my-state-updates-in-transitions-are-out-of-order))。
309309

310310
对于常见用例,React 提供了以下内置抽象方案:
311311
- [`useActionState`](/reference/react/useActionState)
@@ -320,7 +320,7 @@ export async function updateQuantity(newQuantity) {
320320

321321
在这个示例中,`updateQuantity` 函数同样模拟向服务端发送请求来更新购物车中的商品数量。该函数*被人为地减慢*,使得完成请求至少需要一秒钟。
322322

323-
快速多次更新数量。请注意,当任何请求在进行中时都会显示「总计」的挂起状态,但「总计」会根据每次点击「数量」进行多次更新:
323+
快速多次更新数量。请注意,当任何请求在进行中时都会显示 “Total” 的挂起状态,但 “Total” 会根据每次点击 “quantity” 进行多次更新:
324324

325325
<Sandpack>
326326

@@ -583,10 +583,9 @@ export async function updateQuantity(newQuantity) {
583583

584584
### 在组件中公开 `action` 属性 {/*exposing-action-props-from-components*/}
585585

586-
You can expose an `action` prop from a component to allow a parent to call an Action.
586+
您可以通过组件暴露一个 `action` 属性,允许父组件调用一个 Action
587587

588-
589-
For example, this `TabButton` component wraps its `onClick` logic in an `action` prop:
588+
例如,这个 `TabButton` 组件将其点击事件逻辑封装到 `action` 属性中:
590589

591590
```js {8-10}
592591
export default function TabButton({ action, children, isActive }) {
@@ -1624,7 +1623,7 @@ root.render(
16241623
16251624
---
16261625
1627-
## Troubleshooting {/*troubleshooting*/}
1626+
## 疑难解答 {/*troubleshooting*/}
16281627
16291628
### 在 Transition 中无法更新输入框内容 {/*updating-an-input-in-a-transition-doesnt-work*/}
16301629

0 commit comments

Comments
 (0)