使用useEffect和useCallback处理API调用

时间:2020-08-10 01:36:49

标签: reactjs react-hooks use-effect side-effects usecallback

这很可能是一个愚蠢的问题-我的理解是,任何引发副作用的事情都应使用useEffect处理。我想知道这种理解是否正确。尤其是在进行API调用的情况下–在useCallback钩子中进行API调用会很好吗?

1 个答案:

答案 0 :(得分:1)

如果要基于某种属性或状态更改来执行此操作,请使用useEffect钩子,例如

useEffect(async ()=> {
    const user = await userApi.get(props.id)
    
    setUser(user)
}, [props.id]}

如果要在按钮上单击(或任何事件),

const handleClick = () => {
    const user = await userApi.get(props.id)
        
    setUser(user)
}

useCallback并不是真正依赖于api调用或副作用。 useCallback基本上是根据依赖关系存储函数的“版本”。当依赖项发生变化时,您会得到一个新函数,因为它返回的内容将有所不同,例如

// props.id = 1
const doSomethingCallback = useCallback(() => { 
    /* do something with props.id */
}, [props.id])

尽管props.id === 1doSomethingCallback将始终引用在第一个渲染器上声明的函数。如果props.id更改为2,则useCallback将引用一个新函数。因此,如果doSomethingCallbackuseEffect的依赖项,则当props.id更改为2时,useCallback会指向一个新函数,然后{{{ 1}},然后运行其中的任何内容,例如

useEffect