526互联

useEffect依赖项使用

发布时间 2023-11-10 17:30:39作者: 小闫的姑娘

用于在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>
  );
}