# Hooks 的特別之處 根據 React 的官方文檔，`useEffect()`和`useLayoutEffect()`都是等效于`componentDidUpdate()`/`componentDidMount()`的存在，但實際上兩者在一些細節上還是有所不同： ## 先來未必先走 `useLayoutEffect()`永遠比`useEffect()`先執行，即便在你的代碼中`useEffect()`是寫在前面的。所以`useLayoutEffect()`才是事實上和`componentDidUpdate()`/`componentDidMount()`平起平坐的存在。 `useEffect()`會在父子組件的`componentDidUpdate()`/`componentDidMount()`都觸發之后才被觸發。當父子組件都用到`useEffect()`時，子組件中的會比父組件中的先觸發。 ## 不團結的 Cleanup 同樣都擁有 Cleanup 函數，`useLayoutEffect()`和它的 Cleanup 未必是挨著的。 當父組件是 Hooks、子組件是 Class 時，能夠很明顯看出，`useLayoutEffect()`的 Cleanup 會在`getSnapshotBeforeUpdate()`和`componentDidUpdate()`之間被調用，而`useLayoutEffect()`則是和`componentDidUpdate()`同級，按照更新過程的順序被調用。 Hooks 作為子組件時也是這么個過程，只是沒有了子組件，看上去不那么明顯罷了。 而`useEffect()`就不一樣，它和它的 Cleanup 緊密團結在一起，每次執行都是前后腳一起的，從不分離。 ## Hooks 與 React Component * 您不必使用類實例及其 state 狀態。您僅僅需要使用在每個渲染上刷新的簡單函數。state 被明確聲明，沒有任何隱藏。這一切意味著你將在代碼中遇到更少的驚喜。 * 您可以將相關的有狀態邏輯分組，并將其分為獨立的可組合和可共享單元。這使得更容易將復雜組件分解為更小的部件。它還使測試組件更容易。 * 您可以以聲明方式使用任何有狀態邏輯，而無需在組件樹中使用任何分層“嵌套”。 ~~~js const Button =（{clickAction}）=> { return（ <button onClick = {clickAction}> +1 </ button> ）; }; const Display =（{content}）=>（ <pre> {content} </ pre> ）; const CountManager =（）=> { const [count，setCount] = useState（0）; const incrementCounter =（）=> { setCount（count + 1）; }; return（ <div> <Button clickAction = {incrementCounter} /> <Display content = {count} /> </ div> ）; }; ~~~