使用useMemo（）优化在没有useMemo的情况下可以工作的代码的示例是什么？

Question

在React的Hooks API中，建议将来的React实现可能会选择忘记存储的值，并且在使用useMemo（）优化之前，该代码应该可以工作。

我的问题是，在没有useMemo（）的情况下代码可以工作，在useMemo中表现更好，并且如果useMemo忘记了存储的值则可以继续工作，这将是一个很好的示例吗？

您可以访问原始页面here，并且还会发布屏幕截图，以防将来更新页面。  

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