[TOC] ### 1. 引入 ~~~ import { useState, useEffect } from 'react'; ~~~ ### 2. 在函數中使用 ~~~ function Example() { const [count, setCount] = useState(0); // 類似于componentDidMount 和 componentDidUpdate: useEffect(() => { // 更新文檔的標題 document.title = `You clicked ${count} times`; },[count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ~~~ ### 3. 說明： ~~~ 1. useEffect就是生命周期函數，傳入一個匿名函數和一個參數。 2. 匿名函數：是每次都會執行該函數類似于componentDidMount 和 componentDidUpdate 3. 參數：決定函數什么時候被調用，當傳入一個參數時表示當參數改變時調用該函數 4. 在useEffect中可以return一個函數，該函數表示與componentWillUnmount相似實現當組件銷毀時的函數內容，不同的是componentWillUnmount，只在摧毀前執行，而這個return的函數是每次都會執行 5. 在useEffect中的執行順序是：有return函數的先執行return函數，然后再執行useEffect中的其他函數 ~~~