Angular 5.0變化檢測策略VS React的變化檢測策略

Question

我理解變量 檢測在Angular 5.0中是如何工作的。

有人可以幫助我理解React中的相同功能以及它與Angular的不同之處是什么？

Answer 1

React和Angular的變化檢測是不同的，但它們有一個非常重要的共同點 - 從內存（而不是從DOM）中獲取當前和先前狀態的差異，並僅渲染已更改的內容。

在Angular中，在高級別上它的工作方式如下：

1. 更改檢測由區域中每個調用堆棧末尾的zone.js觸發。 這意味着在執行回調每個異步操作（單擊，http請求，超時）后，將觸發更改檢測。 您也可以手動觸發更改檢測，甚至可以“關閉”zone.js，但讓我們堅持使用最常見的方案。
2. 更改檢測從根組件開始，然后通過組件樹向下（再次，您可以在任何組件上手動觸發它，但這不是最常見的情況）。
3. 遍歷組件樹，它檢查組件模板中的哪些值需要更新並更新DOM。

注意：請注意，如果使用ChangeDetectionStrategy.OnPush ，則在樹遍歷期間可能會省略某些組件及其后代。 它可以是很好的優化。

在React中它看起來像這樣：

1. 在回調異步操作后，不會觸發更改檢測。 它是通過在組件上調用方法setState來觸發的。
2. 更改檢測不是從根組件開始，而是從調用setState組件開始。
3. 調和階段開始 - 遍歷組件及其后代，以檢查哪些值需要在真實DOM中更新。 因此，從概念上講，這一點與Angular非常相似。 但是在React 16中，它有點復雜。 檢查一下 。
4. Dom更新了。

注意：類似於Angular的ChangeDetectionStrategy.OnPush，在React中我們有類React.PureComponent 。 我們可以使用這個類來避免不必要的變化檢測。

當然還有很多差異，但在高層次上，我認為這些是最重要的。

Answer 2

反應變化檢測與Angular大致相同，除了三件事：

1） 何時開始：每當調用組件的setState方法時，diffing就會開始（而每當觸發Dom事件時，無論何時運行setInterval / setTimeout回調，每當運行ajax回調時，Angular都會進行差異）

2）從哪里開始： diffing從調用了setState的組件開始，然后是子組件，從層次結構開始（而Angular從最頂層組件開始）

3） 要比較的內容： diffing將當前HTML的虛擬DOM與狀態更改后的虛擬DOM進行比較。 （而Angular使用模板中使用的數據綁定值，用於比較之前和之后）