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 次瀏覽

開啟你的 職業生涯

透過完成課程來獲得認證

開始
廣告