資料結構
網路
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 次瀏覽
廣告