資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
服裝研究
法律研究ReactJS – useEffect hook
在本文中，我們將看到如何在函式元件中設定副作用或 HTTP 請求。
此 hook 用於設定訂閱、處理副作用或將分析資料傳送到伺服器。它是類元件的componentDidMount、componentDidUpdate和componentWillUnmount方法的組合。傳遞給此 hook 的函式僅在元件呈現後才會執行。
語法
useEffect(()=>{},[]);()=>{} − 傳遞給此 hook 的函式
[ ] − 它告訴 hook 何時重新呈現元件。例如 −
[props] − 如果道具值更改，則再次呼叫此 hook。
[ ] − 元件僅在呈現到螢幕上時才會呼叫此 hook。
示例
在此示例中，我們將構建一個 React 應用程式，它會在子元件掛載到 DOM 時顯示訊息。
App.jsx
import React, {useEffect, useState} from 'react';
function App() {
return (
<div className="App">
<Comp1 />
</div>
);
}
function Comp1() {
const [data, setData] = useState(null);
useEffect(() => {
setData('Component Mounted');
}, []);
return (
<div>
<h1>Tutorialspoint</h1>
<h3>{data ? data : null}</h3>
</div>
);
}
export default App;在上例中，useEffect hook 僅在 Comp1 元件呈現在螢幕上時呼叫一次。
輸出
這將產生以下結果。
更新於: 19-Mar-2021
705 次瀏覽
廣告