useEffect用法总结

1. 模拟生命周期

1.1 仅初始化执行，模拟 componentDidMount

依赖空数组，由于依赖为空，不会变化，只执行一次

 

useEffect(() => {
    console.log('hello world')
}, [])

1.2 仅更新执行，模拟 componentDidUpdate

依赖为具体变量，每次变量变化，都执行一次

useEffect(() => {
    console.log('info: ', name, age)
}, [name, age])

1.3 初始化和更新都执行，模拟 componentDidMount 和 componentDidUpdate

没有依赖，与依赖为空不同，这个每次都会执行

useEffect(() => {
    console.log('every time')
})

1.4 卸载执行，模拟 componentWillUnmount

在useEffect中返回一个函数，则在组件卸载时，会执行改函数

 useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
}, []);

2. 执行async函数

useEffect的回调函数，不能是async，可以将async写在回调里面，单独调用

//不可以
useEffect(async()=>{
    const res = await fetchData(id)
    setData(res.data)
},[id])


//推荐
useEffect(()=>{
    const getData = async() => {
        const res = await fetchData(id)
        setData(res.data)
    }
    getData()
},[id])

3. useEffect执行顺序

useEffect的执行时机，是在react的commit阶段之后。

当父子组件都有useEffect，则先执行子组件的useEffect，再执行父组件的useEffect