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

开发者社区> 云计算> 正文
登录阅读全文

这一次,彻底搞懂useEffect

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

什么是useEffect?

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

1. useEffect执行时机

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

image.png

  • 当做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>
    )
}

参考文献

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

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章
最新文章