react hooks useEffect

数据获取订阅 手动修改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

}

},[])