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 次浏览

开启你的 职业生涯

通过完成课程来获得认证

开始
广告