useMemo和useStateHook一样是异步的吗

Question

通常我们不能在设置后立即使用useSate的状态值。useMemo也一样吗？

Answer 1

useMemo是异步的，如果它依赖于asynchronous的值，如useState。

为了解释这一点，让我们检查一个演示组件：

import React, { useEffect, useMemo, useState } from 'react'
const App = () => {
const [value, setValue] = useState(1)
const memoValue = useMemo(() => value + 1, [value])
console.log('value is: ', value)
console.log('memoValue is: ', memoValue)
useEffect(() => {
setValue(10)
console.log('effect value is: ', value)
console.log('effect memoValue is: ', memoValue)
}, [])
return (
<div>test</div>
)
}
export default App

其控制台输出为：

value is:  1
memoValue is:  2
effect value is:  1
effect memoValue is:  2
value is:  10
memoValue is:  11

正如您所看到的，在useEffect中的setValue之后，value是旧的，memoValue也是旧的。

解释：

您可以将钩子视为一个函数，当state或props发生更改时，它会重新执行。CCD_ 10只是一个记忆函数。

setValue更改了App的状态，将App标记为脏组件(需要重新执行(，但在App重新执行之前，memoValue无法更新其值，因此在您的定义中它是asynchronous。