// useEffect的概念以及使用
import {useEffect, useState} from 'react'const Url="http://geek.itheima.net/v1_0/channels"function App() {// 创建状态变量const [lustGet,setLustGet]=useState([]);// 渲染完了之后执行这个useEffect(() => {// 额外的操作,获取接口数据// 获取接口数据async function getList(){const res= await fetch(Url);const jsonRes=await res.json();setLustGet(jsonRes.data.channels)}getList();}, []);return <div className="App">{lustGet.map(item=>(<span key={item.id}>{item.name}-----</span>))}</div>;
}
export default App;
不同依赖项说明
// useEffect的依赖项不同 执行时机不同
import { useEffect, useState } from "react";function App() {// 创建状态变量const [count, setCount] = useState(0);const countCLick = () => {setCount(count + 1);};//无依赖项的话 只要更新变量就会执行// useEffect(() => {// console.log("useEffect执行胃");// });//空依赖项的话 只会在界面渲染完之后执行一次// useEffect(() => {// console.log("useEffect执行胃");// }, []);// 有依赖项胡话 会在变量更新胡时候执行useEffect(() => {console.log("count改变了所以会执行");}, [count]);return (<div className="App"><button onClick={countCLick}>点击次数{count}</button></div>);}
export default App;
useEffect清理副作用
案例:在组件卸载的时候清除定时器,在渲染时开启定时器
// useEffect的依赖项不同 执行时机不同
import { useEffect, useState } from "react";function Son(){// 开启定时器渲染完毕useEffect(()=>{const timeer= setInterval(()=>{console.log("1秒钟了");},1000);// 清除副作用(返回这个函数很重要)return ()=>{console.log("组件卸载");// 这个地方是组件被卸载的时候执行的clearInterval(timeer);}},[])return <div>我是子组件</div>
}function App() {const [Show,setShow]=useState(true);return (<div className="App">{Show && <Son></Son>}<button onClick={()=>{setShow(false) }}>点它点它</button></div>);}
export default App;