react-hook useLayoutEffect

useLayoutEffect

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

示例，如果使用 useEffect，会明显有个闪屏问题
这个是用在处理 DOM 的时候,当你的 useEffect 里面的操作需要处理 DOM,并且会改变页面的样式,就需要用这个,否则可能会出现出现闪屏问题, useLayoutEffect 里面的 callback 函数会在 DOM 更新完成后立即执行,但是会在浏览器进行任何绘制之前运行完成,阻塞了浏览器的绘制.

import React, { useEffect, useLayoutEffect, useState } from "react";
function BoxDemo() {
  const [currStyle, setCurrStyle] = useState({
    width: "100px",
    height: "100px",
    backgroundColor: "red",
    position: "absolute",
    top: "0px",
    left: "0px",
  });
  //   useLayoutEffect(() => {
  //     setCurrStyle({
  //       ...currStyle,
  //       position: "absolute",
  //       top: "0px",
  //       left: "100px",
  //     });
  //   }, []);
  useEffect(() => {
    setCurrStyle({
      ...currStyle,
      position: "absolute",
      top: "0px",
      left: "100px",
    });
  }, []);
  const onButtonClick = () => {};
  return (
    <>
      <div style={currStyle}>我是box</div>
    </>
  );
}

export default BoxDemo;

参考地址：https://www.jianshu.com/p/412c874c5add