React18中使用useEffect实现计数器小案例

在 React 函数组件里，useEffect 是个十分重要的 Hook，其主要功能是处理那些会产生副作用的操作。这里所说的副作用操作，涵盖了数据获取、订阅设置、DOM 手动操作以及定时器的使用等。该 Hook 的工作机制是在组件完成渲染之后执行你所提供的回调函数。下面为你详细介绍它的关键特性和常见的应用场景：

核心特性

1. 默认执行机制：当组件初次被渲染以及后续每次进行重新渲染时，useEffect 里的回调函数都会被触发执行。
2. 依赖项数组的作用：要是你给 useEffect 传递了一个依赖项数组，那么只

   import React, {useEffect, useState} from "react";
   
   import { root} from './main'
   
   const App = () => {
     const [counte, setCounte] = useState(0);
     const [name, setName] = useState("小弟课堂");
   
     //增加 
     const add = () =>{
       setCounte((count) => counte + 1)
     }
   
     const change = () =>{
       setName("xsssss")
     }
     //卸载组件
     const handelDelte = () =>{
       root.unmount()
     }
   
      useEffect(()=>{
       let  timer = setInterval(()=>{
         console.log("定时器")
         setCounte((counte) => counte + 1  )
       },1000)
      return ()=>{
       clearInterval(timer)
       console.log("卸载组件")
     }
     },[])
   
   
     return (
       <>
          <h1> 当前计数:{counte}</h1>
          <button onClick={add}> 增加</button>
          <h1> {name}</h1>
          <button onClick={change}>改变</button>
       <button onClick={handelDelte}>卸载组件</button>
   
       </>
     );
   };
   
   export default App;  

   有当这个数组中的值发生变化时，回调函数才会被执行。
3. 清理副作用的操作：你可以在回调函数中返回一个函数，这个返回的函数会在组件卸载之前或者下一次执行副作用操作之前被调用，从而实现对副作用的清理。

常见应用场景

1. 数据获取操作：当组件加载完成后，你可以使用 useEffect 从 API 接口获取数据。
2. 事件监听器的设置：在组件渲染完成后添加事件监听器，并且在组件卸载时将其移除。
3. 订阅功能的实现：在组件挂载之后建立订阅关系，而在组件卸载时取消订阅。
4. DOM 操作：在组件渲染完成之后对 DOM 元素进行操作，比如调整尺寸、设置样式等。