React useEffect

在发送请求后执行代码

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

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作为依赖项

 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])