useEffect 和 useLayoutEffect

useEffect解决的问题：
1、class中生命周期函数经常包含不想关的逻辑，但又把相关的逻辑分离到了几个不同方法中的问题
useEffect为甚么每次执行前要清除上一个effect：
1、useEffect相当于componentDidMount、componentDidUpdate和componentWillUnmount这三个生命周期之和；
2、官网例子就很好，忘记正确处理componentDidUpdate是react应用中常见bug的来源；
所以useEffect会在调用一个新的effect之前对前一个effect进行清理

useEffect特点：
1、React 会等待浏览器完成画面渲染之后才会延迟调用 useEffec；
2、使用这个hook，可以告诉react组件在每次渲染后执行某些操作(具体执行的就是effect)。react会保存传递的effect函数，并在执行DOM更新后调用（如何控制不渲染）
3、hooks使用了JavaScript的闭包机制，
4、传递给 useEffect 的函数在每次渲染中都会有所不同：每次重新渲染，都会生成新的 effect，替换掉之前的。（原理）
5、effect返回一个函数，react会在执行清除操作的时候调用它，添加这样的机制可以将添加负作用的和移除负作用的逻辑放在一起，
6、React 何时清除 effect？ React 会在组件卸载的时候执行清除操作。正如之前学到的，effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除
7、使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让应用看起来响应更快

useEffect优化：
1、在某些情况下，每次渲染后都执行清理或者执行effect可能会导致性能问题，在 class 组件中，我们可以通过在 componentDidUpdate 中添加对 prevProps 或 prevState 的比较逻辑解决；
在useEffect中只要某些特定的值在两次重新渲染后没有变化，可以通过传递数组作为useEffect第二个参数来跳过对effect的调用。

---

useLayoutEffect:
与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新