@@ -733,7 +733,7 @@ function ChatRoom() {
733733
734734** Effect 是一段響應式的程式碼。** 當你從中讀取的值改變時,Effect 就會重新同步。不像事件處理函式(event handler)只會在每次互動時執行一次,Effect 在每次需要同步時都會執行。
735735
736- ** 你不能「隨意選擇」依賴。** 依賴必須包含 Effect 中所讀取的所有[響應式數值](#all- variables- declared- in - the- component- body- are- reactive)。Linter 強迫必須這麼做。有時候這可能會導致一些問題,像是無窮迴圈,以及 Effect 太常重新同步。別用忽略 (suppress)linter 的方式解決這些問題!你可以這麽做:
736+ ** 你不能「隨意選擇」依賴。** 依賴必須包含 Effect 中所讀取的所有[響應式數值](#all- variables- declared- in - the- component- body- are- reactive)。Linter 強迫必須這麼做。有時候這可能會導致一些問題,像是無窮迴圈,以及 Effect 太常重新同步。別用抑制 (suppress)linter 的方式解決這些問題!你可以這麽做:
737737
738738* ** 確認你的 Effect 在獨立的同步程序中所代表的意義。** 如果你的 Effect 沒有同步任何東西,[它可能就是不必要的](/ learn/ y ou- might- not- need- an- effect)。如果你的 Effect 同步許多獨立的東西,[應該把它們拆分](#each- effect- represents- a- separate- synchronization- process )。
739739
@@ -743,14 +743,14 @@ function ChatRoom() {
743743
744744< Pitfall>
745745
746- Linter 是你的朋友,但它的能力有限。Linter 只知道依賴什麼時候是 * 錯的* ,它不知道解決每個狀況的 * 最佳* 解法。如果 Linter 建議增加一個值作為依賴,卻造成迴圈,這並不表示 linter 應該被忽略 。你應該改變 Effect 內部(或外部)的程式碼,讓這個值不為響應式,也 * 不需要* 是依賴。
746+ Linter 是你的朋友,但它的能力有限。Linter 只知道依賴什麼時候是 * 錯的* ,它不知道解決每個狀況的 * 最佳* 解法。如果 Linter 建議增加一個值作為依賴,卻造成迴圈,這並不表示 linter 應該被抑制 。你應該改變 Effect 內部(或外部)的程式碼,讓這個值不為響應式,也 * 不需要* 是依賴。
747747
748- 如果你有一些現成的程式碼,你可能會有一些 Effect 在忽略 linter 的規則 ,像這樣:
748+ 如果你有一些現成的程式碼,你可能會有一些 Effect 在抑制 linter 的警告 ,像這樣:
749749
750750` ` ` js {3-4}
751751useEffect(() => {
752752 // ...
753- // 🔴 避免像這樣忽略 linter 的規則 :
753+ // 🔴 避免像這樣抑制 linter 的警告 :
754754 // eslint-ignore-next-line react-hooks/exhaustive-deps
755755}, []);
756756` ` `
@@ -1124,7 +1124,7 @@ body {
11241124
11251125< Hint>
11261126
1127- 如果你看到一個 linter 規則被忽略 ,移除它!那通常就是發生錯誤的地方。
1127+ 如果你看到一個 linter 規則被抑制 ,移除它!那通常就是發生錯誤的地方。
11281128
11291129< / Hint>
11301130
@@ -1186,11 +1186,11 @@ body {
11861186
11871187< Solution>
11881188
1189- 原本程式碼的問題是忽略了 linter 的檢查。移除忽略之後 ,就會看到 Effect 依賴 ` handleMove` 函式。這是合理的:` handleMove` 是在元件主體中宣告,所以它是響應式數值。所有的響應式數值都應該被指定為依賴,否則就有可能一直保持舊的值。
1189+ 原本程式碼的問題是抑制了 linter 的警告。移除抑制之後 ,就會看到 Effect 依賴 ` handleMove` 函式。這是合理的:` handleMove` 是在元件主體中宣告,所以它是響應式數值。所有的響應式數值都應該被指定為依賴,否則就有可能一直保持舊的值。
11901190
11911191這段程式碼的作者「欺騙」React 說這個 Effect 沒有依賴(` []` )任何響應式數值。這也就是為什麼 React 沒有在 ` canMove` (還有跟它一起的 ` handleMove` )改變時重新同步 Effect。因為 React 沒有重新同步 Effect,作為監聽函式(listener)的 ` handleMove` 是初次渲染時創建的 ` handleMove` 。在初次渲染期間,` canMove` 是 ` true` ,所以初次渲染時的 ` handleMove` 也只會看到 ` true` 。
11921192
1193- ** 如果你從未忽略 linter,就不會遇到舊值的問題。** 有一些不同的方式可以解決這個 bug,但你應該總是先移除 linter 的忽略 。接著修改程式碼來解決 linter 的錯誤。
1193+ ** 如果你從未抑制 linter,就不會遇到舊值的問題。** 有一些不同的方式可以解決這個 bug,但你應該總是先移除 linter 的抑制 。接著修改程式碼來解決 linter 的錯誤。
11941194
11951195你可以將 Effect 的依賴改成 ` [handleMove]` ,但因為它會在每次渲染時變成新定義的函式,可能還是把依賴陣列整個刪掉比較好。那 Effect * 就會* 在每次重渲染時重新同步:
11961196
@@ -1322,7 +1322,7 @@ body {
13221322
13231323< Hint>
13241324
1325- 忽略 linter 的做法始終很可疑。這會不會是 bug 呢?
1325+ 抑制 linter 的做法始終很可疑。這會不會是 bug 呢?
13261326
13271327< / Hint>
13281328
@@ -1422,7 +1422,7 @@ label { display: block; margin-bottom: 10px; }
14221422
14231423< Solution>
14241424
1425- 如果移除掉 linter 的忽略 ,就會看到一個 lint 錯誤。問題出在 ` createConnection` 是屬性,因此它是響應式數值。它會隨著時間改變!(確實,它應該改變——像是使用者點選核取方塊時,父元件傳入不同的值給 ` createConnection` 屬性。)這就是為什麼它應該是依賴。將它納入依賴清單來修正這個 bug:
1425+ 如果移除掉 linter 的抑制 ,就會看到一個 lint 錯誤。問題出在 ` createConnection` 是屬性,因此它是響應式數值。它會隨著時間改變!(確實,它應該改變——像是使用者點選核取方塊時,父元件傳入不同的值給 ` createConnection` 屬性。)這就是為什麼它應該是依賴。將它納入依賴清單來修正這個 bug:
14261426
14271427< Sandpack>
14281428
0 commit comments