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並不擅長定義數據計算關係。