Reactjs 为什么useMemo会'；t记忆价值

我有一个简单的例子：

import { useMemo, useState } from "react";
import "./styles.css";

const calc = (n) => (
  Math.random()
)

export default function App() {
  const [n, setN] = useState(1);
  const r = useMemo(() => 
    calc(n)
  , [n])
  return (
    <div className="App">
      <input onChange={e => setN(e.target.value)}/><br/>
      <strong>useMemo: {r}</strong><br/>
    </div>
  );
}

从“react”导入{usemo，useState}；
导入“/styles.css”；
常量计算=（n）=>(
数学随机
)
导出默认函数App（）{
const[n，setN]=useState（1）；
常数r=useMemo（（）=>
计算（n）
，[n]）
返回(
setN（e.target.value）}/>

使用备忘录：{r}

);
}

为什么对于相同的依赖项

n

它在

r

中显示不同的结果？

---

好的，它应该被记忆…

，因为当依赖项发生变化时，

usemo

将再次调用。当您更改输入时，

setN

将调用，因此状态

n

将更改。然后，

usemo

中的函数将调用并返回

r

的新值，该值来自：

传递一个“create”函数和一组依赖项useMemo仅在其中一个依赖项发生更改时才重新计算记忆值。此优化有助于避免在每次渲染时进行昂贵的计算

示例：

当

n=1

时，

r

变为

0.1234

现在当

n=2

时，

r

变为

0.2345

。（相关性已更改，因此将重新计算）

当

n=1

时，

r

变为

0.1930

。（相关性已更改，因此将重新计算）

---

因此，

useMemo

按预期工作。但是你可能需要一个不同的工具来完成你想做的事情（可能是类似于一个游戏）。请记住，

usemo

是一种性能优化工具（它不是关键值的映射）

到

setN（Number（e.target.value））}/>

现在尝试插入与1相同的值，您将看到它不会触发组件更新。但现在您应该小心，就像您在键盘上键入非数字值一样，您将得到

Null

作为

Number（e.target.value）

的返回值。这将导致不更新状态

使用null调用setState不再触发更新。这允许 您需要在更新程序函数中决定是否要重新渲染

---

如果以下答案有用，请单击向上投票按钮(▲) 如果有人回答了您的问题，请单击复选标记(✓) 接受它（一旦系统允许）。这样其他人就会知道你已经（充分）得到了帮助。另请参阅

<input onChange={e => setN(e.target.value)}/><br/>

<input onChange={e => setN(e.target.value)}/><br/>

<input onChange={e => setN(Number(e.target.value))}/><br/>