為什麼 React 會讓你感到驚訝（以及如何馴服它）

如果您曾經使用過 React，您可能有過自我懷疑的時刻。我也遇到過這種情況——想知道我是否遺漏了一些基本的東西，結果發現問題不在於我，而在於 React 的特性。

在這裡，我將分享一些意想不到的行為、背後的原因以及我自己的經驗。希望這能讓你免於我所經歷的一些令人頭痛的事情！

---

1. 狀態更新：延遲反應

你呼叫了setState，但是UI並沒有立即改變。為什麼？ React 批次狀態更新以提高效能。這常常讓新開發者措手不及，因為它與即時回饋的期望相矛盾。

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Still logs the old count
};

為什麼會發生：
React 的狀態更新是異步的。這允許 React 優化重新渲染，但這意味著 setState 不會立即更新計數。新的狀態只有在元件重新渲染後才會反映出來。

專業提示：使用 setState 的函數形式來避免依賴過時狀態：

setCount(prevCount => prevCount + 1);

---

2. Hooks 中的依賴數組：為什麼沒有重新運行？

另一個常見的陷阱：您添加了 useEffect 掛鉤，但它似乎沒有按您期望的方式運行。

useEffect(() => {
  console.log("Effect ran");
}, [someVar]);

然後，你意識到更新 someVar 並不會引發效果。調試後發現someVar是一個物件或數組。

為什麼會發生：
React 的依賴數組使用參考相等。即使兩個物件或陣列看起來相同，如果它們的引用不同，它們也會被視為不同。如果您不小心，這可能會導致意外行為。

專業提示： 使用 useDeepCompareEffect 等實用程式或記住您的依賴項。

---

3. 重新渲染困境：為什麼要重新渲染？

您優化了元件，卻發現它仍然不必要地重新渲染。

const MyComponent = ({ count }) => {
  console.log("Rendered");
  return <div>{count}</div>;
};

即使 count 沒有改變，元件也會重新渲染，因為父元件會重新渲染並傳遞新的 prop 引用。

為什麼會發生：
React 的預設行為是重新渲染子元件，除非你使用像 React.memo 這樣的最佳化。

專業提示：使用 React.memo 來記憶你的元件或 useCallback 來防止 prop 引用發生不必要的改變。

---

4. 關鍵道具：有什麼大不了的？

您忘記在清單項目上新增按鍵，突然間您的 UI 行為變得不穩定。

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Still logs the old count
};

為什麼會發生：
React 使用 key 來追蹤哪些項目已更改、新增或刪除。如果沒有唯一鍵，React 可能會錯誤地重複使用 DOM 節點。

專業提示：使用唯一識別碼作為鍵（例如，資料中的 id）。

---

5. 事件處理：神秘的雙重觸發器

是否曾經有過兩次按鈕點擊事件觸發並想知道您的瀏覽器是否被鬧鬼的情況？

setCount(prevCount => prevCount + 1);

您按一下按鈕，然後「按一下！」在開發模式下在控制台中顯示兩次。

為什麼會發生：
React 的嚴格模式在開發過程中有意安裝和卸載元件兩次，以突出潛在的副作用。這可能會導致事件處理程序多次觸發。

專業提示：不要驚慌——它只是在開發中。

---

6. 不受控制的組件：誰在控制這裡？

您建立了一個輸入元素並為其分配了一個值，期望 React 能夠無縫管理它，但您收到了警告。

useEffect(() => {
  console.log("Effect ran");
}, [someVar]);

為什麼會發生：
React 區分受控元件（由 React 狀態管理）和非受控元件（由 DOM 管理）。混合這兩種會導致問題。

專業提示：如果您想要受控組件，請始終將 value 與 onChange 配對：

const MyComponent = ({ count }) => {
  console.log("Rendered");
  return <div>{count}</div>;
};

---

7. 參考：為什麼我不能只使用常規變數？

您嘗試使用變數在渲染之間儲存值，但它每次都會重置。

<ul>
  {items.map(item => (
    <li>{item}</li>
  ))}
</ul>

為什麼會發生：
React 在每次渲染時重新初始化變數。對於持久值，請使用 useRef:

<button onClick={() => console.log("Clicked!")}>Click Me</button>

---

結束語

當您知道「為什麼」時，您不僅僅是做出反應，而是掌控一切。 React 很棒，但有時會有點令人困惑。了解事情為何如此運作可以讓事情變得不那麼令人沮喪。如果你明白為什麼會出現這種情況，你會節省大量時間並減少挫折感。這都是其獨特（有時令人困惑）魅力的一部分。

以上是為什麼 React 會讓你感到驚訝（以及如何馴服它）的詳細內容。更多資訊請關注PHP中文網其他相關文章！