使用 useMemo() 优化应该在没有 useMemo 的情况下工作的代码的示例是什么？答案

【问题标题】：What would be an example to optimize code that was supposed to work without useMemo, using useMemo()?使用 useMemo() 优化应该在没有 useMemo 的情况下工作的代码的示例是什么？
【发布时间】：2019-12-10 22:59:52
【问题描述】：

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

我的问题是，如果代码在没有 useMemo() 的情况下工作，使用 useMemo 时表现更好，并且在 useMemo 忘记记忆值时继续工作，那将是一个很好的例子吗？

您可以访问原页面here，并附上截图，以备日后更新。

【问题讨论】：

标签： reactjs react-hooks

【解决方案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>
  );
}

如果您运行此代码并按下“添加”按钮，您会注意到每次“计算”日志，即使 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

【讨论】：