关于javascript:React-hooks之痛低效的变化传播

最近看到如何去正当应用 React hook？– Parabola 的答复 – 知乎。作者将 React hooks 的模型类比于 rxjs 的模型，比方 rxjs 的 merge 操作，在 React 的世界中能够这样实现：

它们的确能够了解成等价的。 它们都是对数据计算关系的定义 ，输出 2 个数据流，输入 1 个数据流。

乍一看很有情理，然而越想越不对劲。真的能够应用 hook 来模拟 rxjs 响应式编程吗？

不能。React hooks 有一个致命的缺点：数据变动每流传一步就须要期待 1 轮渲染。如果通过 hook 来定义计算关系，那么变动的流传会十分低效。

举个例子，原答复是这样实现 distinctUntilChanged 的：

它们也的确能够了解成等价的，让咱们用 hooks 写一个数据关系定义：

function useMyData(a) {  
  return useDistinctUntilChanged(
           useDistinctUntilChanged(useDistinctUntilChanged(a)));  
}

咱们会发现， a 变动当前，它的输入要经验 3 次从新渲染能力流传到 useMyData 的调用者 （useMyData 的调用者这个时候才会感知到数据变动）。这是十分低效的变动流传。

这个例子尽管比拟极其，然而如果通过 hook 来定义计算关系，那么这种状况其实会经常出现。在我看来，目前 React hooks 并不善于定义数据计算关系。