React學習筆記之頁面切換渲染__react

學習react剛剛起步，打算用nodejs+react+MySQL來搭建一個個人部落格，原本的計劃是需要左側實現一個導覽列點擊進行切換從後台取得內容進行渲染。

結果寫index入口檔案的時候突然意識到一個問題，nodejs路由先將http請求分發給不同的邏輯模組去處理然後把相應內容返回給瀏覽器，所以之前用ejs模板引擎的時候可以這樣寫

我們可以把ejs理解成一個js函數，後面跟著的就是這個函數的參數，自然ejs是可以隨意讀取自己的參數的。

這樣ejs就可以直接獲得從伺服器傳來的資料，然後拼接成html再交給瀏覽器渲染。

可是react不能這樣當成一個函數，react將多個組件組合後再注入到html裡去渲染（不是很理解react組件渲染原理，所以這點不細究）

react資料通過this.state或者this.props綁定在組件中

最終麻煩的是怎麼把後端處理過的資料像ejs一樣傳給react組件。

剛開始想到的是把資料json格式寫入到檔案裡去，但是react何時從檔案裡去取資料又是個問題

後來查閱資料看到react-router，這才恍然大悟

平常web應用頁面切換

1.點選連結通過Ajax發起請求，後端分發請求以後將需要的資料拼接成html發送給瀏覽器（後端渲染）。

2.瀏覽器擷取到新的html內容以後解析其內容，確定需要還載入的js和css等檔案最後渲染成頁面內容。

而react在第一次載入的時候就可以把要切換的頁面全部載入完成，切換通過react-router的Link組件攔截請求（不發送給伺服器）然後通過router組件決定誰來顯示。

那麼回到原來的問題，重點是react怎麼擷取後端傳來的資料。

其實有了react-router之後這個問題就很好解決了，之前這個問題主要是因為以為還是和ejs一樣要同時把html和資料一起發送給瀏覽器，思維還停留在用ejs模板引擎的時候了，react既然早就已經載入完成了所有dom，那麼我們只需要發送資料給瀏覽器就行了

我們可以把Ajax寫在componentDidMount裡，當react-router決定好哪個組件來渲染頁面，在這個組件第一次渲染的時候載入Ajax取得資料再通過this.state或者this.props渲染資料。

結論：react中Ajax不再需要接收html文本，而是只需要接收資料就能進行渲染，相當於後續的載入是前端渲染，這與用模板引擎有著本質區別（架構就是架構啊，思維都不一樣了），所以你在訪問react頁面的時候就是第一次載入比較慢（因為要載入所有頁面），但是頁面後續的瀏覽會很流暢。

對react的理解又深了一步，繼續學習^O^.