React-useEffect

1.概念

说明：用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送
A列AX请求，更改DOM等。

2.案例

// useEffect用于组件不是由事件引起的而是由渲染本身引起的操作，如ajax,更改Dom等。
import { useEffect, useState } from "react";const URL=`https://st2msh.laf.run/react_get_list`
function App() {// 创建一个状态数据const [list, setList]=useState([])useEffect(()=>{// 额外操作，获取频道列表async function getList(){const res= await fetch(URL)const list=await res.json()console.log(list);setList(list)}getList()},[])return (<div><ul>{list.map(item=><li key={item.id}>{item.name}</li>)}</ul></div>);
}export default App;

3.useEffect依赖项参数说明

4.useEffect-清除副作用

说明： 在useEf什ect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用。

function Son() {useEffect(()=>{const timer=setInterval(()=>{console.log("定时器执行中");},1000)return ()=>{// 清除副作用(组件卸载时)clearInterval(timer)}},[])return <div>this is son</div>;
}

5.源代码

import { useEffect, useState } from "react";function Son() {useEffect(()=>{const timer=setInterval(()=>{console.log("定时器执行中");},1000)return ()=>{// 清除副作用(组件卸载时)clearInterval(timer)}},[])return <div>this is son</div>;
}
function App() {// 通过条件渲染模拟组件卸载const [show,setShow]=useState(true)return (<div>{show &&<Son></Son>}<button onClick={()=>setShow(false)}>卸载Son组件</button></div>);
}export default App;