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并不擅长定义数据计算关系。