>[danger]介紹下useEffect * 在 React 中，`useEffect` 是一個用于處理副作用的 Hook。 * ’副作用是指在組件生命周期中的某些特定時刻需要執行的操作，例如數據獲取、訂閱事件、手動操作 DOM 等。 * `useEffect` 的作用就是在組件渲染完成后執行這些副作用操作。 **`useEffect` 接收兩個參數：一個副作用函數和一個依賴數組。** 副作用函數是一個函數，它會在組件渲染之后執行。它可以包含任何副作用操作，如訂閱、網絡請求、DOM 操作等。示例代碼如下： ```javascript import { useEffect } from 'react'; function MyComponent() { useEffect(() => { // 執行副作用操作 console.log('Component rendered'); // 清理副作用 return () => { console.log('Component unmounted'); }; }, []); return <div>My Component</div>; } ``` 在上述示例中，我們定義了一個 `MyComponent` 組件，并在其中使用了 `useEffect`。在副作用函數中，我們打印了一條消息來表示組件已經渲染完成。此外，我們還提供了一個返回函數，用于清理副作用。該函數將在組件卸載之前執行，以便做一些清理工作，如取消訂閱或清除定時器。 第二個參數是一個依賴數組，用于指定副作用函數的依賴項。當依賴項發生變化時，副作用函數將重新執行。如果依賴數組為空，副作用函數只會在組件首次渲染時執行，并在組件卸載時執行清理操作。示例代碼如下： ```javascript import { useEffect, useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log(`Count changed: ${count}`); }, [count]); return ( <div> <button onClick={() => setCount(count + 1)}>Increment</button> <p>Count: {count}</p> </div> ); } ``` 在上述示例中，我們定義了一個 `MyComponent` 組件，并使用 `useState` 來保存一個計數器 `count`。在 `useEffect` 中，我們傳入了 `count` 作為依賴項，這意味著只有當 `count` 發生變化時，副作用函數才會被觸發。每次點擊增加按鈕時，`count` 都會發生變化，`useEffect` 會記錄這個變化并打印相應的消息。 通過使用 `useEffect`，我們可以在 React 組件中處理各種副作用操作，并且可以在需要時進行清理。這使得我們能夠更好地管理組件的生命周期和狀態。