数据结构
网络
关系型数据库管理系统
操作系统
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 次浏览
广告