React 中 useEffect 是副作用函數，副作用函數通常是處理外圍系統交互的邏輯。那么 useEffect 是怎處理的呢？React 組件都是純函數，需要將副作用的邏輯通過副作用函數抽離出去，也就是副作用函數是不影響函數組件的返回值的。例如，我們要獲取用戶列表，副作用函數去服務器獲取數據，數據獲取成功之后，更新 State 并發起渲染，他對函數式組件沒有影響。根據以上邏輯，對應 React Render/Commit 兩階段，副作用函數函數要在 commit 式在去執行。

我們看一個簡單的 useEffect 例子，在 React 中是如何處理的。

function App() {const [name, setName] = useState("123")const input = useRef()useEffect(()=>{console.log(name)}, [name])const handleClick = ()=>{setName(input.current.value)}return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><input ref={input}></input><button onClick={handleClick}>abcd</button><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}

跟蹤 React 代碼，我們可以到 React 在 commit 階段執行 effect。

進入 scheduleCallback 并創建調度任務


commit 結束后，workloop 執行 effect。

總結

useEffect 將函數式組件副作用于組件邏輯進行分離，commit 階段結束后進行執行。