React中的"state"和AngularJS中的"scope"有什麼相同點？

01-21

初學React和Angular，state和scope在感覺上很相似，二者在原理和使用上有什麼相同點呢？

這種問題問得我一臉的尷尬。在React 的 state 和 Angular 的 scope 之間找共同點，我真的懵逼。

原理上，找不出半毛錢的共同點；React 的 state 只是組件內部狀態的一種表示，而 Angular 的 scope 是實現雙向綁定的核心，撐起了 Angular 的半邊天。

使用上，組件內部的狀態都可以保存在 state 或者 scope 上，不過 scope 不但可以保存組件內部的狀態，還可以放一些要綁定到模板上的 handler。

總結下就是，沒啥可以比較的，真要比較，state 只是 scope 的一部分，而 scope 可以約等於 state + component。

首先，如果我沒記錯的話，Angular好像是沒有scope的，AngularJs倒是肯定有。（順帶一提：我總覺得Angular命名和版本現在有點尷尬。）

至於state和scope之間的關係，雖然不是同一個框架里的概念，但也是有一定可對比性的。

在AngularJS中，你對Scope做了什麼其實並不影響AngularJS對數據變更的檢查。AngularJS是在ng-click等「可能導致數據變更」的情況下，自動根據watchers上面的表達式，對scope進行臟值檢查的。當它檢查到表達式根據scope求出的值與之前不同時，再去根據預設的操作，去更新DOM。

在React中，程序員手動調用setState會導致React組件的更新流程被觸發，最終調用render方法，根據state、props以及context生成新的虛擬DOM，和舊的虛擬DOM做變動檢查，然後根據預設的更新策略進行DOM操作。

總結：scope和state都用於存儲界面顯示相關的數據，都是界面更新所必須的對象。其中AngularJS是對scope直接進行檢查、直接操作dom的，而React是在setScope之後觸發一系列操作，生成虛擬DOM，並對虛擬DOM進行檢查，最後操作DOM的。原理上都是存數據的，只是數據變動的檢查方式和進行DOM操作的時機有些不同。使用上，前者通常情況下是自動的，後者通常情況下是手動的（React大法好好好好好！！！……好麻煩！）。

AngularJS：

自動監控可能帶來數據變更的事件
對scope上的數據進行數據變化檢查
不生成虛擬DOM
直接的DOM操作

React：

程序員用setState手工通知React數據將會變更
不對state進行數據變化檢查
根據當前state、props和context生成虛擬DOM
根據虛擬DOM的差異進行DOM操作

完全不一樣

state表示的是組件的狀態，裡面一般沒有函數，都是數據

scope就複雜了，首先scop會根據你在視圖中的使用產生繼承，實際上的原理就是用的原型鏈，最終所有的scope都繼承自rootScope，所以你在下層的scope中是可以使用上層scope中的數據和函數的

（不過你也可以說react里下層組件也可以使用上層組件的state，不過這種用法是需要你明確的把數據往子組件里傳的，原理完全不一樣）

然後就是函數了，scope中一般也會寫一些只在本視圖或scope中使用的函數。不過如果更多更通用的函數的話，一般是抽象成service啥的

如果非要比，那ng里與react的state對應的也應該是傳給指令（想成組件就好了）的那些數據，但坑爹的是ng里這些數據在指令內部也tm叫scope。。。

React 的 state 表示了組件內部的部分狀態，存在於組件的 state 屬性中。Angular（以 4.0 為例）的 scope 則表示了整個 Component 類中的成員，由 zone.js 實現之前 1.0 的臟檢查，使得任何由瀏覽器事件觸發的 scope 內的變化都可以綁定到模版中。React 由於運行機制的問題，需要顯式通知框架去做 diff-patch。本質上 state 跟 scope 就是兩個概念。畢竟 React 追求 FP，狀態即視圖，並且 state 作為一個 immutable 對象，結合 Redux 很好實現諸如 redo 這樣的功能；而 Angular 就沒有這個限制，我給你個 scope，你愛咋搞咋搞，也不用管每個操作 pure 不 pure。

完全不一樣。

AngularJS 的scope有兩個核心作用：

1.連接數據。

2.控制行為。

拋去表單的雙向綁定，界面所有的控制行動都反映在行為上，操縱數據，再通過臟檢查將數據反映到界面。

而React 中的state完全就是數據的體現，界面完全由數據組成。界面上的行為反映到Component上，Component在setState，經過diff更新界面。

如果硬要比較，scope可以認為是Component 的method + state 。

angular中的scope從源碼來看，是js的原型繼承實現的，其中還有父子作用域，還包含的臟檢測，事件系統等等很多很多....state的話，按照我的理解，它就是一個組件中變數，用於儲存當前組件的各種狀態，且會導致視圖刷新，沒有scope那麼複雜的機制。

不是很理解scope，state可以理解為就是模型，其他什麼都不幹。最近被scope折騰的死去活來，有時候數據就是賦不對。而且有意思的點，上層scope數據可以被下面用。為了避免它帶來的缺陷，我們一般綁this上，除非是要傳遞的數據才往scope上綁定。scope還可以綁定方法。所以感覺state非常單純好理解。scope我還沒很理解，淚奔

直接從字面上看就沒有聯繫

都是s開頭e結尾

雖然這倆我沒用過，但托福100+的水平可以告訴你，先查字典吧！