usePrevious 和类似的面向时间的钩子的问题

Theo 本周制作了一个关于 React hooks 不直观行为的视频，特别探索了一个名为 usePrevious 的 hook 的想法，以在当前渲染之前保留上次重新渲染的值版本一。一种对新旧状态进行逻辑处理的方法。

如果您想了解如何实现它的想法，请查看视频，在这篇文章中，我们的想法是探索像 usePrevious 这样的钩子的概念方面。

反应式表达

如你所见，我们在 React 中没有这样的原始钩子。在 hooks 之前，在基于类的时代，我们有一个名为 componentDidUpdate 的生命周期方法，我们将之前的所有状态和 props 作为参数，为什么他们不使用 hooks 来保留这种行为？

如果您正在阅读本系列文章，可能会有点重复，但在这种情况下，我们需要讨论范式转变。

对于类，当某些状态更新时，您没有自动重新计算派生值的方法。如果你正在使用一些特定的 props 和 states 来计算一些新的值，你需要自己验证其中一些是否发生了变化。

这样，解决方案是在所有更新中调用回调，并将以前的值发送给用户。应用程序代码检查差异并使用新结果更新计算状态。这就是基于类的组件的直接性，你完全控制数据的流向，并且需要手动控制计算。

我们来看看反应表达式。

您不必检查并进行更改，而是编写一个表达式、计算公式之类的。此计算需要使用当前状态版本执行，而无需访问前一个状态。

想象一个公式：

a = b + c


b = 10
c = 20


a = 10 + 20
a = 30

如果我使用这个表达式 100 万次，将 b 作为 10 传递，将 c 作为 20 传递，我将得到相同的结果。这是纯粹的计算。 React 执行相同的原理。所有推导的计算都应该是纯粹的。

但是为什么它很重要？

在重新渲染中做出反应。每个周期都会生成 UI 的描述，并根据当前和下一周期之间的差异，将更改提交到 DOM。每个渲染都与上一个或下一个完全分离。

UI = fn(state)

因此，对于每个不同的状态版本，我们都有不同的 UI 版本。如果我们在这里添加以前的值，这会变得非常混乱。因为现在它不仅取决于状态，还取决于之前的状态。我可以拥有多个源，也许更复杂的表达式来处理这些源，并且结果是不一致且不可预测的 UI，而不是只有一个源、一个表达式和一个结果。

每个渲染都会根据之前的状态表现不同。由于 usePrevious 的一些可能实现依赖于 React 中的时间顺序，这变得更加危险。

借助并发功能，React 可以在不警告渲染的情况下停止，以优先考虑其他操作。根据 useEffect 和 ref 可以让您保留“上一个”渲染的过时版本，甚至是真正的上一个渲染。更多混乱需要推理。

记忆化

用这样的表达方式思考

a = b + c


b = 10
c = 20


a = 10 + 20
a = 30

其中一部分是优先级的，需要先计算一下，我们用javascript代码来思考一下：

UI = fn(state)

所以现在我们有两个独立的表达式，可以单独计算，并且是完全纯净的。但是如果b的值变化很大，cdResult的计算成本很高，我们该如何解决呢？牢牢记住！

a = b + (c - d)

现在如果 c 或 d 发生变化，cdResult 将被重新计算。

但是在上面的文本中我说没有先前的值，但是一个渲染的计算如何可以在下一个渲染中使用？这不会破坏计算的纯粹性吗？

事实上，没有。例如：

const cdResult = c - d;
const a = b + cdResult;

假设我们处于渲染编号 1 中。c 的值为 30，d 的值为 20，因此结果是 10。但是当我记住它时，React 将跟踪我添加的依赖项数组。如果其中一些发生变化，则会重新计算。

const cdResult = React.useMemo(() => c - d, [c, d]);
const a = b + cdResult;

但他们没有改变。如果我再次调用这个表达式，c 为 30，d 为 20，我将得到相同的 10 作为结果。即使我处于渲染编号 2 中且其他变量发生了变化，但我在本次计算中使用的依赖项并没有改变。

我可以在每次渲染中再次计算它，这是React的默认行为，但我可以选择跳过不必要的重新计算，这将返回相同的值，所以我保留了它。我们保持了纯度并保持了渲染之间的分离

之前的状态

但是有一个很好的地方可以对先前的状态、用户操作进行逻辑处理。当然，在调用回调的那一刻，这将是当前状态。但如果你有一些状态需要根据某种逻辑进行更改，那就是这个地方。

当然，它可能有非常特殊的情况，您可能需要一个钩子，例如 usePrevious，但要注意它可能导致的不一致，并尝试添加保证以避免应用程序上的错误。

更重要的是，如果可能的话，避免它。

以上是usePrevious 和类似的面向时间的钩子的问题的详细内容。更多信息请关注PHP中文网其他相关文章！