React 基础 useEffect 发送请求

  • useEffect 是专门用来处理副作用的,所以可以在 useEffcet 内发送请求获取数据
  • 注意:Effect 只能是一个同步函数,不能使用async
  • 原因:如果 Effect 是 async 的 ,此时返回值是 Promise 对象 ,这样的话,就无法保证清理函数被立即调用
  • 为了使用 async/await 语法 , 可以在 Effect 内部再次创建 async 函数并调用
useEffect(() => {
    async function fetchMyAPI() {
        let url = 'http://something/' + productId
        const response = await myFetch(url)
    }

    fetchMyAPI()
}, [productId])

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React中,useEffect是一个用于处理副作用操作的Hook函数。副作用操作指的是在组件渲染过程中执行的与组件状态无关的操作,例如发送网络请求、订阅事件、操作DOM等。通过使用useEffect,我们可以在函数组件中模拟类组件的生命周期方法,如componentDidMount和componentWillUnmount。 基本用法是通过导入React模块中的useEffect函数,并在函数组件中调用它。useEffect接受两个参数,第一个参数是一个函数,用于指定副作用操作的逻辑。第二个参数是一个依赖数组,用于指定在哪些依赖项发生变化时重新运行副作用操作。 如果第二个参数为空数组[],则表示副作用操作只运行一次,相当于componentDidMount。这时,副作用操作将在组件挂载和卸载时执行。例如: ``` import { useEffect } from "react"; useEffect(() => { console.log('页面渲染完成'); }, []); ``` 如果返回函数,该函数将在组件卸载时执行,相当于componentWillUnmount。例如: ``` import { useEffect } from "react"; useEffect(() => { return () => { console.log('组件卸载'); } }, []); ``` 如果不传递第二个参数,每次组件渲染都会运行useEffect,这可能会导致无限循环。因此,在使用useEffect时,建议总是传递第二个参数来明确指定依赖项。例如: ``` import { useEffect } from "react"; useEffect(() => { console.log(props.number); setNumber(props.number); }, [props.number]); // 只有当props.number发生变化时才会执行 ``` 需要注意的是,useEffect中的副作用操作是异步执行的,不会阻塞组件的渲染过程。同时,useEffect返回的函数可以用于清除副作用操作产生的订阅或定时器等资源,以避免内存泄漏。 综上所述,useEffectReact中用于处理副作用操作的重要Hook函数,可以模拟类组件的生命周期方法,并通过传递第二个参数来控制副作用操作的执行时机。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [react中的useEffect](https://blog.csdn.net/weixin_45289656/article/details/129139932)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [react useEffect详解](https://blog.csdn.net/weixin_45760365/article/details/124386573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值