这一次，彻底搞懂useEffect

这是我参与8月更文挑战的第29天，活动详情查看： 8月更文挑战

什么是useEffect?

让函数型组件拥有处理副作用的能力，类似生命周期函数。

1. useEffect执行时机

可以把useEffect看做componentDidMount,componentDidUpdate,componentWillUnmount这三个函数的组合。

• 当做componentDidMount和componentDidUpdate的时候

function App() {
    const [count,setCount] = useState(0);
    // 组件挂载完成之后 或 组件数据更新完成之后 执行
    useEffect(() => {
        console.log('组件挂载完成之后 或 组件数据更新完成之后 执行');
    })
    return (
        <div>
            {count}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
    )
}
复制代码      

• 仅当做comonentDidMount的时候

useEffect(() => {
    console.log('仅当做componentDidMount');
},[])
复制代码      

• 当做componentWillunmount的时候(注意：这里不是仅当做componentWillunmount)

useEffect(() => () => {
    console.log('当做componentWillUnmount');
})
复制代码      

2. useEffect的使用方法示例

1. 为window对象添加滚动事件。（挂载完成后绑定事件，卸载组件后解除绑定）

function App() {
    function onScroll() {
        console.log('监听到页面发生滚动了');
    }
    useEffect(() => {
        window.addEventListener('scroll',onScroll);
        return () => {
            // 卸载组件时解除对事件的绑定
            window.removeEventListener('scroll',onScroll);
        }
    })
    return (
        <div>
            App 
        </div>
    )
}
复制代码      

1. 设置定时器让count数值每隔一秒增加1。

function App() {
    
    const [count,setCount] = useState(0);
    useEffect(() => {
        const timeId = setInterval(() => {
           setCount(count => count + 1); 
        },1000)
        return () => {
            clearInterval(timeId);
        }
    },[])
    return (
        <div>
            <h1>当前求和为：{count}</h1> 
        </div>
    )
}
复制代码      

3. useEffect解决的问题

1. 将一组相干的业务逻辑归置到了同一个副作用函数中.
2. 简化重复代码,使组件内部代码更加清晰.

4：useEffect的第二个参数

• 只有指定数据发生变化的时候才触发effect

useEffect(() => {
    document.title = count;
}, [count]) 
复制代码      

5：useEffect结合异步函数

在useEffect中直接使用async和await是会报错的，推荐使用立即执行函数来包裹异步函数。

function getData() {
    return new Promise(resolve => {
        resolve({msg: 'Hello'})
    })
}
function App() {
    useEffect(() => {
        (async function () {
            const result = await getData();
            console.log(result);
        })()
    },[])
    
    return (
        <div>
            App
        </div>
    )
}
复制代码      

参考文献

• 官方文档