使用useMemo()来优化本应不使用useMemo ()的代码的示例是什么？

Question

在react的Hooks中，有人建议未来的API实现可能会选择忘记已记忆的值，并且在使用useMemo()进行优化之前，代码应该工作。

我的问题是，在没有useMemo()的情况下，代码工作的好例子是什么?如果useMemo忘记了记忆的值，那么useMemo在useMemo中的性能会更好，并继续工作吗？

您可以访问原始页面这里，一个屏幕截图也张贴，以防该页面在未来更新。

​

Answer 1

请记住，这是人为的例子。

function App() {
  let [first, setFirst] = React.useState(1);
  let [second, setSecond] = React.useState(1);
  let [sum, setSum] = React.useState(undefined);

  let total = function expensive(x, y) {
    console.log("computing");
    return parseInt(first) + parseInt(second);
  };

  let add = () => {
    setSum(total);
  };

  return (
    <div className="App">
      <input
        onChange={e => setFirst(e.target.value)}
        type="number"
        value={first}
      />
      <input
        onChange={e => setSecond(e.target.value)}
        type="number"
        value={second}
      />
      <button onClick={add}>ADD</button>
      <h2>{sum}</h2>
    </div>
  );
}

如果您运行这段代码并粉碎"ADD“按钮，您会注意到每次都会记录”计算“日志，即使first和second没有更改。这段代码不需要使用useMemo，但并不是最优的。我们可以做一个优化。

考虑一下这一变化：

 let total = React.useMemo(function expensive(x, y) {
   console.log("computing");
   return parseInt(first) + parseInt(second);
 }, [first, second]);

注意，“计算”只记录一次，因为返回值正在回传。只有当first或second更改时，它才会重新计算。在没有useMemo的情况下，这将继续工作。

像这样的例子正是useMemo的目的--一个简单的优化。不管有没有这种情况，您的代码仍然可以很好地运行。

“您可以依赖useMemo作为性能优化”- https://reactjs.org/docs/hooks-reference.html#usememo

希望这会有帮助！)

https://codesandbox.io/s/elegant-chandrasekhar-nzqfx?fontsize=14&hidenavigation=1&theme=dark