0
点赞
收藏
分享

微信扫一扫

React-Hooks-useLayoutEffect

useLayoutEffect Hook 概述

  • 大部分情况下 useLayoutEffect 和 useEffect 没太大区别(用法格式都相同)
  • 但是如果需要修改 DOM 的布局样式, 那么推荐使用​​useLayoutEffect​


为什么推荐在 useLayoutEffect 中修改 DOM 的布局样式?


  • useEffect 函数会在组件渲染到屏幕之后才执行, 所以会可能会出现​​闪屏​​ 的情况
  • useLayoutEffect 函数是在组件渲染到屏幕之前执行, 所以不会出现闪屏情况

首先来看 useEffect 会出现闪屏的情况代码如下:

App.js:

import React, {useRef, useState, useEffect} from 'react';
import './app.css'

function Home() {
const pRef = useRef();
useEffect(() => {
console.log('组件被挂载或更新完成 - useEffect');
pRef.current.style.left = '0px';
pRef.current.style.left = '500px';

return () => {
console.log('组件即将被卸载 - useEffect');
}
});
return (
<div>
<p ref={pRef}></p>
</div>
)
}

export default function App() {
const [show, setShow] = useState(true);
return (
<div>
{show && <Home/>}
<button onClick={() => {
setShow(!show)
}}>切换
</button>
</div>
)
}

如上代码大致意思就是通过一个按钮来控制 Hmoe 组件的显示与隐藏。

app.css:

p {
width: 100px;
height: 100px;
position: relative;
left: 0;
top: 0;
background: red;
}

运行项目然后点击切换按钮,你会发现在切换的过程当中会有一闪而过的效果这就是所谓的闪屏。

在来看 useLayoutEffect 的效果代码如下:

import React, {useRef, useState, useLayoutEffect} from 'react';
import './app.css'

function Home() {
const pRef = useRef();
useLayoutEffect(() => {
console.log('组件被挂载或更新完成 - useLayoutEffect');
pRef.current.style.left = '0px';
pRef.current.style.left = '500px';

return () => {
console.log('组件即将被卸载 - useLayoutEffect');
}
});
return (
<div>
<p ref={pRef}></p>
</div>
)
}

export default function App() {
const [show, setShow] = useState(true);
return (
<div>
{show && <Home/>}
<button onClick={() => {
setShow(!show)
}}>切换
</button>
</div>
)
}

可以很清晰的发现,两者的效果是完全不同的。

useEffect 和 useLayoutEffect 的区别

执行时机不同:

  • 如果是挂载或者更新组件, 那么 useLayoutEffect 会比 useEffect 先执行
import React, {useRef, useState, useEffect, useLayoutEffect} from 'react';
import './app.css'

function Home() {
const pRef = useRef();
useEffect(() => {
console.log('组件被挂载或更新完成 - useEffect');

return () => {
console.log('组件即将被卸载 - useEffect');
}
});

useLayoutEffect(() => {
console.log('组件被挂载或更新完成 - useLayoutEffect');

return () => {
console.log('组件即将被卸载 - useLayoutEffect');
}
});
return (
<div>
<p ref={pRef}></p>
</div>
)
}

export default function App() {
const [show, setShow] = useState(true);
return (
<div>
{show && <Home/>}
<button onClick={() => {
setShow(!show)
}}>切换
</button>
</div>
)
}

React-Hooks-useLayoutEffect_一闪而过

  • 如果是卸载组件, 那么 useEffect 会比 useLayoutEffect 先执行

React-Hooks-useLayoutEffect_一闪而过_02

  • useEffect: 同步
  • useLayoutEffect: 异步

什么时候使用 useEffect

  • 在绝大多数的情况下能用 useEffect, 就用 useEffect

什么时候用 useLayoutEffect

  • 只有在需要组件挂载之后更新 DOM 的布局和样式的时候才使用 useLayoutEffect

为什么要使用 useLayoutEffect 来更新 DOM 布局和样式

useEffect 是组件已经渲染到屏幕上了才执行,useLayoutEffect 是组件还没有渲染到屏幕上就会执行,所以如果在组件已经渲染到屏幕上了, 才去更新 DOM 的布局和样式, 那么用户体验不好, 会看到闪屏的情况,而如果是在组件还没有渲染到屏幕上, 就去更新 DOM 的布局和样式, 那么用户体验更好, 看不到闪屏情况。


举报

相关推荐

0 条评论