数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究ReactJS – useLayoutEffect 钩子
在本文中，我们将了解如何在函数组件中设置副作用或 HTTP 请求。
此钩子与 useEffect 钩子的功能类似，但不同于以异步方式调用，而是具有同步的效果。此钩子用于同步加载 DOM 中的数据，并且还与 useEffect 钩子 处于相同的阶段。
注意：仅当 useEffect 钩子未提供预期输出时才使用 useLayoutEffect 钩子。
语法
useLayoutEffect()
示例
在此示例中，我们将构建一个 React 应用程序，以同步方式显示和更新名称。
App.jsx
import React, { useLayoutEffect, useState } from 'react';
const App = () => {
const [name, setName] = useState('Rahul');
useLayoutEffect(() => {
if (name === 'Rahul') {
setName('Bansal');
}
}, [name]);
return <div>{name} has email id of rahul@tutorialspoint.com</div>;
};
export default App;在上述示例中， useLayoutEffect 钩子是同步调用的，因此在组件挂载之前更新了状态。
输出
这将产生以下结果。
更新于： 19-Mar-2021
318 次浏览
广告