这一次，彻底搞懂useEffect-阿里云开发者社区

这一次，彻底搞懂useEffect

2021-11-16 182

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这一次，彻底搞懂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的使用方法示例

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

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

设置定时器让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解决的问题

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

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>
    )
}
复制代码