[Bonus 系列] - 和 useEffect 很像的 useLayoutEffect

这篇要补充一个比较少使用到的 useLayoutEffect hook，和 useEffect 语法相同，但它们的执行时机不太一样。

和 useEffect 差异

先假设画面上有一个 toggle 按钮，已经绑定对应的事件和 state，那当它被点击的瞬间，DOM 经过了以下四个步骤做改变:

1. state 状态更新，引起画面变化
2. 建构新的 virtual dom tree
3. 和旧的 virtual dom tree 比较，透过 diff 演算法找出需要更新的部分
4. 将更新的部分更新到 real dom

在第四步骤结束时 useEffect 才开始执行放在它里面的函式，但 useLayoutEffect 不同，它在第三步骤就会开始执行，而由於 useLayoutEffect 是同步的，所以它会有拖延到画面呈现的问题。

使用时机

它主要在操作 DOM 时，有发现到有闪烁情况时使用。

在以下范例中，点击按钮後会跳出一段文字，从图片可以看出 useEffect 弹出文字有残影，若从图片不易看出读者也可以点范例去做尝试。
范例程序

useEffect:

useLayoutEffect:

注: 也许跳出文字在实际开发中有别的写法，但这里主要想表示它们的差别