如何使用 React useEffect 调用加载函数?


如何使用 React useEffect 调用加载函数?

useEffect默认在每次渲染组件后运行。在我们的组件中放置 useEffect 时,我们告诉 React 我们想要将回调作为效果运行。 React 将在渲染后和执行 DOM 更新后运行效果。

如果我们只传递一个回调,回调将在每次渲染后运行。如果我们只想在初始渲染后运行 useEffect函数,作为第二个参数,我们可以给它一个空数组。如果我们传递第二个参数(数组),React 将在第一次渲染后以及每次更改数组中的一个元素时运行回调。

例如,回调将在第一次渲染之后运行,并且在任何一个varOnevarTwo为以下代码更改的渲染之后运行:

useEffect(() => console.log('Hi '), [varOne, varTwo])

如果我们在每个渲染之后传递一个空数组,React 将比较该数组并且将看到没有任何更改,并且回调将仅在第一次渲染后调用。

句法:

const MyComponent = (props) {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);
  return <div> {/* jsx code */} </div>;
}

创建反应应用程序:

第 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 (
    <div style={{ margin: 200 }}>
      <button onClick={() => updatebtnText("Hi")} >
        {btnText}
      </button>
    </div>
  );
}
  
export default App;


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

npm start

输出:

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

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1