时间戳

首页 > 解决方案 > 反应，让 UseMemo 与文本框一起正常工作

reactjs - 反应，让 UseMemo 与文本框一起正常工作

问题描述

以下 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>
  );
}

标签： reactjsreact-usememo

解决方案

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

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

useMemo不保留一组历史结果。

推荐阅读