理解ReactJS的useLayoutEffect

先看一下官方的解释：

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

 

同步调用是指effect执行完成之前，浏览器是不会绘制的。举一个例子：

const [count, setCount] =useState(0)

  useLayoutEffect(() => {

    if(count === 1) {

      setCount(10)

    }

  }, [count])

 

  return (

    <div className="App">

      <span>{count}</span>

      <button onClick={() => setCount(1)}>click</button>

    </div>

  );

 

　　

点击按钮将count设置为1，这时会触发组件渲染，useLayoutEffect被执行，effect又将count设置为10，又将触发组件渲染。注意，在浏览器真正绘制之前, useLayoutEffect 内部的更新计划将被同步刷新。意思就是在一次绘制之中，这两次setState触发的更新将只生效最后一个setState, 即不会出现屏幕闪烁的现象（count先显示为1 再显示为10， 而是直接更新为10）。

 

useEffect和useLayoutEffect的执行时机对比如下：

 

useEffect (状态改变 > 组件渲染 > 浏览器绘制 > useEffect执行)

useLayoutEffect (状态改变 > 组件渲染 > useLayoutEffect 执行 > 浏览器绘制)

 

可以看出useLayoutEffect优先于useEffect执行。

 

何时使用它：

如果你的组件在状态更新时闪烁——例如，它首先呈现为部分就绪状态，然后立即重新呈现为其最终状态——是时候使用useLayoutEffect 了。

当您的更新是一个两步（或多步）过程时，就会出现这种情况。 您想在重绘屏幕之前一起“批量”更新几个更新。