useEffect解決的問題：
1、class中生命周期函數(shù)經(jīng)常包含不想關(guān)的邏輯，但又把相關(guān)的邏輯分離到了幾個不同方法中的問題
useEffect為甚么每次執(zhí)行前要清除上一個effect：
1、useEffect相當于componentDidMount、componentDidUpdate和componentWillUnmount這三個生命周期之和；
2、官網(wǎng)例子就很好，忘記正確處理componentDidUpdate是react應(yīng)用中常見bug的來源；
所以useEffect會在調(diào)用一個新的effect之前對前一個effect進行清理

useEffect特點：
1、React 會等待瀏覽器完成畫面渲染之后才會延遲調(diào)用 useEffec；
2、使用這個hook，可以告訴react組件在每次渲染后執(zhí)行某些操作(具體執(zhí)行的就是effect)。react會保存?zhèn)鬟f的effect函數(shù)，并在執(zhí)行DOM更新后調(diào)用（如何控制不渲染）
3、hooks使用了JavaScript的閉包機制，
4、傳遞給 useEffect 的函數(shù)在每次渲染中都會有所不同：每次重新渲染，都會生成新的 effect，替換掉之前的。（原理）
5、effect返回一個函數(shù)，react會在執(zhí)行清除操作的時候調(diào)用它，添加這樣的機制可以將添加負作用的和移除負作用的邏輯放在一起，
6、React 何時清除 effect？ React 會在組件卸載的時候執(zhí)行清除操作。正如之前學到的，effect 在每次渲染的時候都會執(zhí)行。這就是為什么 React 會在執(zhí)行當前 effect 之前對上一個 effect 進行清除
7、使用 useEffect 調(diào)度的 effect 不會阻塞瀏覽器更新屏幕，這讓應(yīng)用看起來響應(yīng)更快

useEffect優(yōu)化：
1、在某些情況下，每次渲染后都執(zhí)行清理或者執(zhí)行effect可能會導致性能問題，在 class 組件中，我們可以通過在 componentDidUpdate 中添加對 prevProps 或 prevState 的比較邏輯解決；
在useEffect中只要某些特定的值在兩次重新渲染后沒有變化，可以通過傳遞數(shù)組作為useEffect第二個參數(shù)來跳過對effect的調(diào)用。

useLayoutEffect:
與 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 調(diào)度的 effect 不會阻塞瀏覽器更新屏幕，這讓你的應(yīng)用看起來響應(yīng)更快。大多數(shù)情況下，effect 不需要同步地執(zhí)行。在個別情況下（例如測量布局），有單獨的 useLayoutEffect Hook 供你使用，其 API 與 useEffect 相同

其函數(shù)簽名與 useEffect 相同，但它會在所有的 DOM 變更之后同步調(diào)用 effect?？梢允褂盟鼇碜x取 DOM 布局并同步觸發(fā)重渲染。在瀏覽器執(zhí)行繪制之前，useLayoutEffect 內(nèi)部的更新計劃將被同步刷新