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 不保留历史结果集。

React，让 UseMemo 与文本框一起正常工作

React, Have UseMemo work correctly with textbox

reactjs

react-usememo