Skip to content

Commit d1913b7

Browse files
committed
fix: internal 翻译问题
1 parent 1951564 commit d1913b7

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

src/content/learn/removing-effect-dependencies.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,7 @@ button { margin: 10px; }
353353
354354
上面的计数器例子,本应该每秒递增,递增量可以通过两个按钮来控制。然而,由于你对 React “撒谎”,说这个 Effect 不依赖于任何东西,React 便一直使用初次渲染时的 `onTick` 函数。[在后续渲染中](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), `count` 总是 `0``increment` 总是 `1`。为什么?因为定时器每秒调用 `onTick` 函数,实际运行的是 `setCount(0 + 1)`<sup><a href="#note1">[1]</a></sup>,所以你总是看到 `1`。像这样的错误,当它们分散在多个组件中时,就更难解决了。
355355
356-
这里有一个比忽略 linter 更好的解决方案! 那便是将 `onTick` 添加到依赖中。(为了确保间隔只设置一次,[使 `onTick` 成为 Effect Event](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)。)
356+
这里有一个比忽略 linter 更好的解决方案! 那便是将 `onTick` 添加到依赖中。(为了确保 interval 只设置一次,[使 `onTick` 成为 Effect Event](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)。)
357357
358358
**我们建议将依赖性 lint 错误作为一个编译错误来处理。如果你不抑制它,你将永远不会遇到像上面这样的错误**。本页面的剩下部分将介绍这个和其他情况的替代方案。
359359
@@ -1173,9 +1173,9 @@ function ChatRoom({ getOptions }) {
11731173
11741174
<Challenges>
11751175
1176-
#### 修复重置间隔 {/*fix-a-resetting-interval*/}
1176+
#### 修复重置 interval {/*fix-a-resetting-interval*/}
11771177
1178-
这个 Effect 设置了一个每秒运行的间隔。你已经注意到一些奇怪的事情:似乎每次时间间隔都会被销毁并重新创建。修复代码,使间隔不会被不断重新创建
1178+
这个 Effect 设置了一个每秒运行的 interval。你已经注意到一些奇怪的事情:似乎每次 interval 都会被销毁并重新创建。修复代码,使 interval 不会被不断重新创建
11791179
<Hint>
11801180
11811181
看起来这个 Effect 的代码依赖于 `count`。有什么方法不需要这依赖吗?有,那就是根据其之前的值更新 `count` 状态,从而避免添加对该值的依赖。
@@ -1191,13 +1191,13 @@ export default function Timer() {
11911191
const [count, setCount] = useState(0);
11921192

11931193
useEffect(() => {
1194-
console.log('创建一个间隔定时器');
1194+
console.log('创建定时器');
11951195
const id = setInterval(() => {
1196-
console.log('间隔刻度');
1196+
console.log('Interval');
11971197
setCount(count + 1);
11981198
}, 1000);
11991199
return () => {
1200-
console.log('清除一个间隔定时器');
1200+
console.log('清除定时器');
12011201
clearInterval(id);
12021202
};
12031203
}, [count]);
@@ -1210,7 +1210,7 @@ export default function Timer() {
12101210
12111211
<Solution>
12121212
1213-
你想要从 Effect 内部将 `count` 状态更新为 `count + 1`。但是,这会使 Effect 依赖于 `count`,它会随着每次滴答而变化,这就是为什么间隔会在每次滴答时重新创建
1213+
你想要从 Effect 内部将 `count` 状态更新为 `count + 1`。但是,这会使 Effect 依赖于 `count`,它会随着每次滴答而变化,这就是为什么 interval 会在每次滴答时重新创建
12141214
12151215
要解决这个问题,请使用 [更新函数](/reference/react/useState#updating-state-based-on-the-previous-state) 并编写 `setCount(c => c + 1)` 而不是 `setCount(count + 1)`:
12161216
@@ -1223,13 +1223,13 @@ export default function Timer() {
12231223
const [count, setCount] = useState(0);
12241224

12251225
useEffect(() => {
1226-
console.log('创建一个间隔定时器');
1226+
console.log('创建定时器');
12271227
const id = setInterval(() => {
1228-
console.log('间隔刻度');
1228+
console.log('Interval');
12291229
setCount(c => c + 1);
12301230
}, 1000);
12311231
return () => {
1232-
console.log('清除一个间隔定时器');
1232+
console.log('清除定时器');
12331233
clearInterval(id);
12341234
};
12351235
}, []);
@@ -1240,7 +1240,7 @@ export default function Timer() {
12401240
12411241
</Sandpack>
12421242
1243-
你不应在 Effect 中读取 `count`,而是将 `c => c + 1` 指令(“增加此数字!”)传递给 React。React 将在下一次渲染时执行它。由于你不再需要读取 Effect 中 `count` 的值,因此你可以将 Effect 的依赖保持为空(`[]`)。这可以防止 Effect 在每次执行时重新创建定时器间隔
1243+
你不应在 Effect 中读取 `count`,而是将 `c => c + 1` 指令(“增加此数字!”)传递给 React。React 将在下一次渲染时执行它。由于你不再需要读取 Effect 中 `count` 的值,因此你可以将 Effect 的依赖保持为空(`[]`)。这可以防止 Effect 在每次执行时重新创建定时器 interval
12441244
12451245
</Solution>
12461246
@@ -1322,7 +1322,7 @@ export default function App() {
13221322
onChange={e => setDuration(Number(e.target.value))}
13231323
/>
13241324
<br />
1325-
淡入间隔: {duration} ms
1325+
淡入 interval: {duration} ms
13261326
</label>
13271327
<button onClick={() => setShow(!show)}>
13281328
{show ? '移除' : '显示'}
@@ -1453,7 +1453,7 @@ export default function App() {
14531453
onChange={e => setDuration(Number(e.target.value))}
14541454
/>
14551455
<br />
1456-
淡入间隔: {duration} ms
1456+
淡入 interval: {duration} ms
14571457
</label>
14581458
<button onClick={() => setShow(!show)}>
14591459
{show ? '移除' : '显示'}

0 commit comments

Comments
 (0)