宣告：本教程不收取任何費用，歡迎轉載，尊重作者勞動成果，不得用於商業用途，侵權必究！！！！

對於前端來講，最浪費效能的就是DOM操作，虛擬DOM幫我們減少了操作的次數，從而使我們提高了效能。JSX是一個非常創造性的語法，它相當於允許在JS裡面直接寫html程式碼，而不像過去需要通過字串拼接出來。

元件化：他把所有功能模組、UI等抽象成一個個單獨的元件，在進行頁面製作只需要把n個組價進行排列組合，就能夠製作我們需要的頁面效果。資料流的流動方向是固定的，都是從父到子、從上到下的方向，這樣使我們的整個程式碼邏輯比較清晰，方便我們閱讀理解以及將來的維護。     

相當於JS程式碼和真實DOM之間加了一個虛擬DOM，那麼我們的JS想要操作DOM的時候，它並不是直接操作DOM，而是操作跟真實DOM一樣的JS變數，那麼這個JS變數它跟真實DOM樹的樹形結構是一模一樣的，但是它的本質是一個JS變數，那麼我們程式碼去操作虛擬DOM，虛擬DOM由於它是JS變數，所以操作效率是非常高的。

那麼我們的App可以n次操作虛擬DOM，然後由虛擬DOM一次性反應到我們的真實DOM裡面，那麼這樣我們就把過去n次真實DOM的操作，縮減為1次，從而盡大可能的提高了我們頁面的呈現效率，避免了效能的浪費。