数据获取订阅 手动修改react dom
didMount didUpdate willUnMount 生命周期的统一
useEffect(callback,array)
// 数组控制useEffect什么时候执行
import {useState,useEffect}from 'react'
const Example = (props)=>{
const [count,setCount]=useState(0);
useEffect(()=>{
document.title =`你点击了${count}次`
//手动修改react dom
},[])
return (
<div>
<button onClick={()=>setCount(count+1)}></button>
</div>
)
}
callback 中可以返回一个函数 清理工作 相当于unMount
卸载前的处理
1空数组 只会执行一次 第一次render执行 didMount
2数组有长度 会在数组改变的时候执行 。 didUpdate . [count] 数组中存我们的数据state 是上层组件流入的数据props
3数组不填写 会每一次都执行
可以同时使用多个useEffect
用来获取数据和更新数据的useEffect
useEffect 处理数据请求:
const fetchUser = async()=>{
const result = await fetch("./user.json").then(res=>res.json())
setUser(result.user)
}
useEffect(()=>{
fetchUser()
},[])
// 只执行一次
网络请求 dom修改 日志记录 是不需要清理的
订阅 取消订阅 事件舰艇 和取消事件监听需要清理
1.useEffect会在每次执行之前都会自动清理之前的effect
2.effect 中可以返回一个函数用于清理工作
手动清理
useEffect(()=>{
return ()=>{
// 组件卸载的时候执行
// 手动清理effect
}
},[])