seo网站营销公司,网站动态好还是静态好,建站免费空间,专业网站建设的公司useLayoutEffect钩子函数的作用跟useEffect钩子函数的作用一样#xff0c;它们的不同主要是在于#xff1a;
1、useEffect钩子函数是异步的#xff0c;因为此函数在执行的时候是先计算出所有的 Dom 节点的改变后再将对应的 Dom 节点渲染到屏幕上#xff0c;然而在 useEffe…useLayoutEffect钩子函数的作用跟useEffect钩子函数的作用一样它们的不同主要是在于
1、useEffect钩子函数是异步的因为此函数在执行的时候是先计算出所有的 Dom 节点的改变后再将对应的 Dom 节点渲染到屏幕上然而在 useEffect 函数中可能还存在某些还在后台运行的代码这些后台代码的运行和 Dom 的渲染是互不影响的所以这样就有可能在页面渲染效果上会有元素抖动的情况发生。
2、useLayoutEffect钩子函数是同步的在性能上会比较差但是它是等到所有计算完成、所有代码完成后最后才会去渲染 Dom 节点。
具体实例如下
const UseLayoutEffectDemo: React.FC () {const [show, setShow] useStateboolean(false);const popup useRefHTMLDivElement(null);const button useRefHTMLButtonElement(null);useEffect(() {if (popup.current null || button.current null) {return;} else {const { bottom } button.current.getBoundingClientRect();popup.current.style.top ${bottom 25}px;}});return (divbutton 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 的渲染。
