![](/img/trans.png)
[英]Can we use useMemo when memoized object is used in useEffect?
[英]Can a useMemo memoized value be updated with useEffect from within the component?
我正在尝试呈现必须通过useMemo
传递的数据。 我从 api 调用中获取数据,所以我调用useEffect
。 初始渲染工作返回一个空数组,但是一旦我调用 api,数据就不会更新。
import React from 'react'
import {fetchAccounts} from '../utils/api'
export default function Accounts() {
const [accounts, setAccounts] = React.useState([])
React.useEffect(() => {
setLoading(true)
fetchAccounts().then((data) => {
setAccounts(data)
})
}, [])
const data = React.useMemo(() => accounts, [])
return <p>{JSON.stringify(data)}</p>}
那么这可以在单个组件中工作吗? 还是必须创建自定义挂钩?
数据未更新,因为您缺少依赖数组中的值。
const data = React.useMemo(() => accounts, [accounts]);
因此在这种情况下,使用useMemo
是没有意义的,因为 state 无论如何都是稳定的,直到您更改 state。
您使用useMemo和useEffect与 [] 的依赖关系意味着它在安装期间运行意味着它运行一次
让我们看看 useMemo() 是如何工作的
useMemo(()=>{
})
如果发生任何变化,它将每次运行
useMemo(()=>{
},[])
它将在组件安装期间运行一次
useMemo(()=>{
},[arr])
如果arr发生任何更改,它将每次运行
如果您感到困惑,那么 useEffect() 和 useMemo() 之间有什么区别
useMemo() 仅在发现任何更改时运行,它将最新更改与以前的更改进行比较,如果发现任何更改,然后useMemo运行
如果更新的 state 与之前的 state useEffect don't care it start re render the component,则每次更改都会运行 useEffect()。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.