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 的渲染。

相关推荐
前端老鹰几秒前
JavaScript Array.prototype.at ():数组任意位置取值的新姿势
前端·javascript
autumnTop7 分钟前
为什么访问不了同事的服务器或者ping不通地址了?
前端·后端·程序员
weixin_4433533129 分钟前
小红书帖子评论的nodejs爬虫脚本
前端·爬虫
yzzzzzzzzzzzzzzzzz31 分钟前
HTML 常用标签介绍
前端·html
Wcy307651906633 分钟前
web前端第二次作业
前端·javascript·css
北京_宏哥34 分钟前
Python零基础从入门到精通详细教程11 - python数据类型之数字(Number)-浮点型(float)详解
前端·python·面试
waterHBO36 分钟前
css 模拟一个动画效果,消息堆叠。
前端·css
艾小码1 小时前
JavaScript 排序完全指南:从基础到高阶实战
前端·javascript·排序算法
前端加油站1 小时前
在 cursor 成为流行的开发方式后,作为普通开发我们能做什么
前端
Cache技术分享1 小时前
163. Java Lambda 表达式 - Function 的链式组合
前端·后端