如何使用 React useEffect 调用加载函数?
useEffect默认在每次渲染组件后运行。在我们的组件中放置 useEffect 时,我们告诉 React 我们想要将回调作为效果运行。 React 将在渲染后和执行 DOM 更新后运行效果。
如果我们只传递一个回调,回调将在每次渲染后运行。如果我们只想在初始渲染后运行 useEffect函数,作为第二个参数,我们可以给它一个空数组。如果我们传递第二个参数(数组),React 将在第一次渲染后以及每次更改数组中的一个元素时运行回调。
例如,回调将在第一次渲染之后运行,并且在任何一个varOne或varTwo为以下代码更改的渲染之后运行:
useEffect(() => console.log('Hi '), [varOne, varTwo])
如果我们在每个渲染之后传递一个空数组,React 将比较该数组并且将看到没有任何更改,并且回调将仅在第一次渲染后调用。
句法:
const MyComponent = (props) {
useEffect(() => {
loadDataOnlyOnce();
}, []);
return {/* jsx code */} ;
}
创建反应应用程序:
第 1 步:使用以下命令创建一个 React 应用程序:
npx create-react-app foldername
第 2 步:创建项目文件夹(即文件夹名称)后,使用以下命令移动到该文件夹:
cd foldername
项目结构:它将如下所示。
文件名:App.js
Javascript
import React, { useEffect, useState } from "react";
const App = (props) => {
const [btnText, updatebtnText] = useState("")
const loadDataOnlyOnce = () => {
updatebtnText("Hello kapil")
}
// This function will called only once
useEffect(() => {
loadDataOnlyOnce();
}, [])
return (
);
}
export default App;
运行应用程序的步骤:从项目的根目录使用以下命令运行应用程序:
npm start
输出: