useEffect依赖项使用，和useEffect清除副作用（如组件卸载时清除定时器）

用于在react组件中创建不是由事件引起的而是由渲染本身引起的，比如发送Ajax请求、更改dom等等

 

import { useEffect, useState } from 'react';
function App() {
  const [count,setcount] =useState(0)
  const [msg,setmsg] =useState('你好')
   // 1.没有依赖项，在组件渲染完成之后初始一次 + 组件更新
  useEffect(()=>{
   console.log('没有依赖项，在组件渲染完成之后初始一次 + 组件更新')
  })
   // 2.依赖项为空，在组件渲染完成之后初始一次 
   useEffect(()=>{
    console.log('依赖项为空，在组件渲染完成之后初始一次')
   },[])
  //  3.传入特定依赖项，初始 + 依赖项变化时执行
  useEffect(()=>{
    console.log('传入特定依赖项，初始 + 依赖项变化时执行')
   },[msg])
  return (
    <div className="App" >
     这是APP页面
     <div>{count}</div>
     <button onClick={()=>setcount(count+1)}>没有依赖项按钮</button>
      <div>{msg}</div>
     <button onClick={()=>setmsg('你叫什么名字')}>传入特定依赖项按钮</button>
    </div>
  );
}

 

2.useEffect清除副作用（如组件卸载时清除定时器）

import {  useEffect, useState } from 'react';
const Son=()=>{
  useEffect(()=>{
   const timer= setInterval(()=>{
      console.log('定时器在清除Son后停止执行')
    },1000)
  //在清除Son组件时清除定时器，避免内存泄漏
  return ()=>{
    clearInterval(timer)
  }
  },[])
return(
  <div>这是Son组件</div>
)
}
function App() {
  const [show,setShow]=useState(true)
  return (
    <div className="App" >
     这是APP页面
     {show && <Son></Son>}
    <button onClick={()=>setShow(false)}>卸载Son组件</button>
    </div>
  );
}

export default App;