圍繞react衍生出來的思考

優點1、聲明式開發

首先react是聲明式的開發方式，這個與之對應的是命令式開發方式，以前在用jquery寫代碼的時候，都是直接來操做dom，直接操做dom的這種編程方式，咱們把他叫作命令式的編程，也就是我要建立一個頁面，我要一點點的告訴dom,你要怎麼去掛在，你要怎麼去作，這種編程方式咱們叫作命令式的編程。回頭想一想，咱們代碼裏面有60%到70%的代碼都在對dom進行操做。

那什麼是聲明式的代碼，其實react就是一個聲明式的開發。能夠這麼理解，假設我要去蓋一棟樓，把這棟樓理解成一個網頁，用jquery寫的時候須要去告訴他這棟樓須要一步一步怎麼去蓋，先蓋什麼，再蓋什麼，每一步都要去關心。react不是這樣的，react是面向數據來編程的，他只要把數據構建好就能夠了。react會根據這個數據自動去構建這個網站，也能夠理解成這個數據是個圖紙，當圖紙好了的時候，react會自動根據圖紙去構建這個大廈。幫助構建整個頁面的dom。這種聲明式的開發能夠節約掉大量的操做dom的代碼。這是react編程帶來的第一個優點

優點2、能夠與其它框架共存

react編程的過程當中，能夠使用jquery,vue這樣的框架，與這些框架能夠完美的並存，那怎麼才能作到公共使用，react才能不去影響到其它框架的代碼呢。咱們在app.js裏面，dom掛載到了root的節點上。也就是react他只去管理index.html下面，id爲root的div下面的代碼。下面的dom跟react一點關係也沒有。因此能夠引用jquery操做下面的dom，只要不用jquery去操做id爲root下面的內容就能夠。這個時候jquery和react是能夠共存的

優點3、組件化

有個概念叫單向數據流

父組件能夠給子組件傳值，可是子組件只能夠使用這個值，絕對不能夠去改變這個值。一旦改變了，react會報一個錯誤出來。Cannot assign to read only property 'list'。什麼意思呢。list是隻讀的，這就是單向數據流。

之因此設計這個單向數據流，是爲了咱們開發，測試方便，不容易遇到坑。舉個例子，假設父組件有5個子組件，list能夠傳遞給這5個組件，假設沒有單向數據流，某個子組件刪除了list,那麼其它4個組件都會受到影響。那一旦出現bug，就須要去找哪裏改了list。每一個組件一個個去看。這樣調試很是不方便。若是必定要修改，copy一份。

react是一個視圖層的框架

都知道，父子組件能夠進行一個傳值，假設個人一個項目極其的複雜。父組件有兒子1，兒子2，兒子1有孫子1，孫子2。兒子2有孫子a，孫子b。這個時候孫子1要給孫子a傳值，若是還根據父子組件屬性，而後子組件調用方法的傳值的方式，就會瘋掉了。原本兩個組件的通訊，結果中間兒子1，父組件，兒子2都要參與到這個組件裏面來。很麻煩。因此在開發大型項目的時候，光用react的時候是不行的。還要配合一些數據層的框架。幫咱們解決react之間複雜傳值的問題。這個時候react就把自身定義爲視圖層的框架。我並非什麼問題都解決，我就幫助解決數據和頁面渲染之間的問題。至於組件之間這麼傳值，我並不複雜，我交給其它組件來作。在小的項目中，光用react就能夠，好比todolist，就兩層組件，光用react內部機制就能夠解決。在大型項目裏，單單來使用是不夠的。就須要好比flux,redux這樣的數據層框架來輔助咱們的開發。到這就能理解爲何react定義爲視圖層框架，而不是大型的完整的框架。

react之中的函數式編程

咱們在編寫react的時候，其實寫的都是一個個函數，constructor,render,handleClick,都是一個函數一個函數的寫法。react的函數式編程帶來了幾個好處。首先維護起來比較容易，當一個函數比較大的時候，能夠進行拆分，每一個函數各司其職，這是最基礎的一個優點。第二個是什麼呢？咱們如今前端屆有個面向測試的一個流程，什麼意思呢，不少前端的項目，如今已經引用了自動化測試的這樣一個概念，在作前端自動化測試的時候，若是你的一個項目之中，代碼的組成都是一個個函數組成的話，那麼作自動化測試的時候就很是容易進行測試，只要給一個函數一個輸入值，看一下輸出是否符合個人預期，我就能知道這個函數是否運行的正確，他給前端自動化測試帶來很大的便捷性，這也是react函數式編程的一個優點。