React 中的 useLayoutEffect 钩子函数

useLayoutEffect钩子函数的作用跟useEffect钩子函数的作用一样,它们的不同主要是在于:

1、useEffect钩子函数是异步的,因为此函数在执行的时候是先计算出所有的 Dom 节点的改变后再将对应的 Dom 节点渲染到屏幕上,然而在 useEffect 函数中可能还存在某些还在后台运行的代码,这些后台代码的运行和 Dom 的渲染是互不影响的,所以这样就有可能在页面渲染效果上会有元素抖动的情况发生。

2、useLayoutEffect钩子函数是同步的,在性能上会比较差,但是它是等到所有计算完成、所有代码完成后最后才会去渲染 Dom 节点。

具体实例如下:

typescript 复制代码
const UseLayoutEffectDemo: React.FC = () => {
  const [show, setShow] = useState<boolean>(false);

  const popup = useRef<HTMLDivElement>(null);
  const button = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (popup.current === null || button.current === null) {
      return;
    } else {
      const { bottom } = button.current.getBoundingClientRect();
      popup.current.style.top = `${bottom + 25}px`;
    }
  });

  return (
    <div>
      <button ref={button} onClick={() => setShow((prev) => !prev)}>
        切换状态
      </button>
      {show && (
        <div style={{ position: "absolute" }} ref={popup}>
          这是显示内容
        </div>
      )}
    </div>
  );
};

运行上述代码后,当你点击切换状态状态按钮后,这是显示内容的 div 元素会首先在按钮后显示,但是很快就会向下偏移 25px 的距离。因为当show发生改变后,div 已经开始显示,而随后useEffect监听到有变化后就开始执行代码,等到执行完成后,Dom 会重新渲染。这样 div 元素就会有抖动,只是这个抖动发生的很快。

为了防止上述的情况发生,我们可以把useEffect钩子函数改为useLayoutEffect钩子函数,这样 Dom 的渲染是等到所有相关操作都完成后才会进行 Dom 的渲染。

相关推荐
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴4 小时前
Mix
前端·webgl
代码续发4 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码5 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记5 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante6 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam7 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript