React，让UseMemo正确使用文本框

Question

以下UseMemo不起作用。我正在努力记住数值的平方X^2。我输入3来计算数据，然后输入4，然后再次输入3。它每次都会重新计算。我该怎么解决这个问题？

function App() {
const [number, setNumber] = useState(1);
const onChange = event => {
setNumber(Number(event.target.value));
};
const squareResult = useMemo(() => calculateSquare(number), [number]);
function calculateSquare(n) {
console.log('numberSquare(n) called!');
return n * n;
}
return (
<div>
<label htmlFor="test">Enter Number: </label>
<input id="test" type="number" onChange={onChange}/>
<h1>Data Square {squareResult}</h1>
</div>
);
}

Answer 1

useMemo钩子防止每次重新渲染组件时调用相同(昂贵(的函数。

当依赖关系发生变化时，函数将使用新的参数重新运行。

useMemo不保留一组历史结果。