useLayoutEffect看起來和useEffect非常的相似；事實(shí)上，他們也僅有一點(diǎn)區(qū)別而已；

• useEffect：渲染內(nèi)容更新到DOM ->執(zhí)行操作；
• useLayoutEffect：執(zhí)行操作 -> 渲染內(nèi)容更新到DOM；

如果我們希望在某些操作發(fā)生之后再更新DOM，那么應(yīng)該將這個操作放到useLayoutEffect中。

useEffect & useLayoutEffect流程

先拿之前的useEffect舉例。

1. 點(diǎn)擊按鈕后觸發(fā)setCount(0)，重新渲染；
2. 重新渲染后，檢測到count改變，所以觸發(fā)useEffect回調(diào)函數(shù)，再次調(diào)用setCount(Math.random())，界面又會重新渲染，這次將隨機(jī)數(shù)渲染（第二次渲染）出來；
3. 上次渲染后，count改變，再次觸發(fā)useEffect，但count不再等于0，所以這次不再執(zhí)行setCount(Math.random())。

import React, { useState, useEffect } from 'react'
export default function EffectCounterDemo() {
  const [count, setCount] = useState(10);
  useEffect(() => {
    if (count === 0) {
      setCount(Math.random() + 200);
    }
  }, [count])
  return (
    <div>
      <h2>數(shù)字: {count}</h2>
      <button onClick={e => setCount(0)}>修改數(shù)字</button>
    </div>
  )
}

如果我們想將最終值一次性渲染出來，就需要用到useLayoutEffect hook了。

useLayoutEffect舉例

只需要將useEffect改成useLayoutEffect即可。

官網(wǎng)提到的一些應(yīng)該注意的點(diǎn)：

1. 應(yīng)先使用useEffect，若出問題再嘗試useLayoutEffect；
2. useLayoutEffect與componentDidMount，componentDidUpdate的調(diào)用階段是一樣的；
3. 針對服務(wù)端渲染：useEffect和useLayoutEffect都無法在JS代碼加載完成之前執(zhí)行。（筆者暫未接觸服務(wù)端渲染，日后補(bǔ)上具體細(xì)節(jié)）