如何使用 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 (
    

       updatebtnText("Hi")} >
        {btnText}
      
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

点击按钮后，文字发生变化