useMemo与useEffect + useState

useMemo与useEffect + useState

在

useEffect

和

setState

每个变化都会导致额外的呈现：第一个将呈现“落后”与陈旧的数据，然后它会立即排队，用新的数据的附加渲染。

---

假设我们有：

function expensiveCalculation(x) { return x + 1; }; // Maybe I'm running this on a literal potato

假设

numberProp

最初为0：

• 该

  useMemo

  版本立即呈现

  1

  。
• 该

  useEffect

  版本呈现

  null

  ，组件呈现然后后的效果运行，改变了状态，和队列了一个新的与渲染

  1

  。

然后，如果我们更改

numberProp

为2：

• 该

  useMemo

  运行和

  3

  呈现。
• 该

  useEffect

  版本运行，并呈现

  1

  再次，那么效果触发，并与正确值的组件重播

  3

  。

就

expensiveCalculation

运行频率而言，两者具有相同的行为，但是

useEffect

版本导致的渲染量是原来的两倍，这由于其他原因而对性能不利。

另外

useMemo

，IMO 的版本更干净，更易读。它不会引入不必要的可变状态，并且运动部件更少。

因此，最好只

useMemo

在这里使用。