react是不是Spa

react是Spa模式，即元件嵌套，其主要的傳參方式有：1、在掛載的地方給組件傳參；2、父子傳參，即用props或ref方式傳參；3、子父傳參，即子組件透過觸發父組件的方法來改變父組件的狀態；4、兄弟傳參，即透過改變公有組件的狀態進而改變子組件的狀態；5、遠親間的傳參，即透過redux協助傳參。

本教學操作環境：windows7系統、react18.0.0版、Dell G3電腦。

react是不是Spa？

react是SPA模式，也就是元件巢狀，在單一頁面的應用程式中元件間的數值傳遞是不可或缺的，主要的傳參方式大致有一下幾種：

1、在掛載的地方給組件傳參

　　ReactDOM.rander(<a name="a" age="{16}/">,app)</a> 在渲染的時候，直接傳參給掛載的元件。

2、父子傳參

　　父子傳參可以用props和ref兩種方式，①，props方式傳參，父組件透過改變自己的參數並且透過props將狀態傳遞給子組件，並在子組件中顯示。 ②，透過ref傳參，這種方式是透過子組件自己的方法改變自己的狀態後，父組件會透過觸發子組件的方法來改變參數。

3、子父傳參 

　　子元件透過觸發父元件的方法來改變父元件的狀態，

4、兄弟傳參 

#兄弟傳參有兩種，一種是透過狀態提升，透過改變公有組件的狀態進而改變子組件的狀態，另一種是透過ref傳參的方式，改變原有的狀態。

5、遠親間的傳參

　　透過redux協助傳參，一般會適用與專案間的互動較多時使用，並沒有什麼互動時若使用redux反而會增加專案的複雜度，不知道要不要使用redux的時候就不要使用。

相關介紹：

單頁Web應用程式（single page web application，SPA），就是只有一張Web頁面的應用，是載入單一HTML 頁面並且在使用者與應用程式互動時動態更新該頁面的網頁應用程式。

—— 《百度百科》

SPA 的概念早已有之，簡單說來就是：不管你這個網站有多少頁面，我都給你整到一個頁面裡去。

SPA不做頁面刷新，只做局部更新，也就是除了你第一次打開網站的時候需要加載整個頁面之外，之後的一切站內跳轉都是不重載頁面的，而是在目前頁面進行局部刷新，達到頁面切換的效果。

想像一下，假設網站原本需要兩個頁面a和b，但現在我只做一個index，然後把a和b兩個頁面的所有html片段都寫到index裡去，顯示的時候，透過js來判斷目前的url，如果是/a，我只顯示原本屬於a的html片段；同理，如果是/b，我就顯示b的html片段。

推薦學習：《react影片教學》

以上是react是不是Spa的詳細內容。更多資訊請關注PHP中文網其他相關文章！