在 ReactJS 中 useEffect 是如何工作的？

当我们想在每次渲染组件后执行某些操作时，我们可以使用 useEffect() 钩子。通过使用这个 Hook，我们告诉 React 我们的组件需要在渲染后通过传递一个函数来做一些事情。 React 记住我们在 useEffect() 钩子中传递的函数，并在执行 DOM 更新后稍后调用它。

默认情况下，useEffect 挂钩在第一次渲染后和每次更新后运行。 React 在运行效果时会更新 DOM。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```

项目结构：它将如下所示。

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React, { useState, useEffect } from 'react';
  
function App() {
    
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    alert(`You clicked ${count} times`)
  });
  
  const handleUpdate = ()=> {
    setCount (count + 1)
  }
    
  return (
      
      You have clicked {count} times
      
    
  );
}
  
export default App;

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

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

说明：正如我们可以从上面的示例中看到的那样，每当我们更新状态时，React 都会重新渲染组件，然后就在我们传递的 useEffect() 钩子调用函数之后。