@@ -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