React useEffect

巴巴_羊2025-04-13 18:49

在发送请求后执行代码

useEffect(副作用函数，依赖项数组)

cpp 复制代码

import { useEffect, useState } from "react";

const URL =`http://geek.itheima.net/v1_0/channels`
function App() {
  // 创建状态数据
  const [list,setList] = useState([])
  const [count,setCount] = useState(0)

  useEffect(()=>{
    // 
    async function getList(){
      const res = await fetch(URL)
      const list = await res.json()
      console.log(list);
      setList(list.data.channels)
      console.log(`副作用函数执行`)
      

    }
    getList()
  })


 

  return (
    <div className="App">
      
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>

      <button onClick={() => {setCount(count+1)}}>+{count}</button>
   
    </div>
  );
}

export default App;

当依赖项为空时，每一次请求和更新组件都会使得useEffect执行

有特定的依赖项

只有count作为依赖项

cpp 复制代码

 useEffect(()=>{
    // 
    async function getList(){
      const res = await fetch(URL)
      const list = await res.json()
      console.log(list);
      setList(list.data.channels)
      console.log(`副作用函数执行`)
      

    }
    getList()
  },[count])