react universal app
1.0.0
react-universal-app是一個庫，它可以通過通用React組件構建單頁應用程序並進行React Router。
react-universal-app的目標非常簡單：
簡單
react-universal-app提供2個反應組件：
它還提供了單個數據提取API。此提取數據的API在您的路線旁邊定義。
靈活性
react-universal-app並沒有多大作用。
它為您提供了幾個用於渲染路線的React組件，並且不會迫使您以任何特定的方式渲染或補充應用程序。您可以根據需要渲染！
它為您提供了單個數據提取API，該API在您的路線上定義。這意味著您無論如何都可以構建應用程序組件，而您的React組件只是React組件。
要快速開始，請查看示例應用程序。這些應用程序舉例說明瞭如何使用react-universal-app創建應用程序。
另外，請按照以下步驟開始。
npm install react-universal-app react以下提供了有關如何在主要React應用程序中設置路由和數據獲取的信息。設置路線後，您可以將它們傳遞給反應組件，這些react-universal-app可為服務器端渲染和客戶端水合提供反應。
react-universal-app使用React Router 4，這是將頁面作為組件並提供路線配置的絕佳基礎。要定義路線，請創建一些路由配置並導出它們。
注意： react-universal-app當前僅支持單個頂級路由。
// ./app/routes.js
import Home from './components/Home' ;
const routes = [
{
path : '/' ,
exact : true ,
component : Home ,
} ,
] ;
export default routes ; // ./app/components/Home.js
const Home = ( ) => (
< div >
< h1 > Home! </ h1 >
</ div >
)
export default Home ; react-universal-app為數據獲取提供了一個非常熟悉的getInitialData ，該數據是在路由配置中定義的。
這提供了對路線配置/數據獲取和組件之間的關注和不可知論的明顯分離。您的React組件只是React組件，您可以盡可能多地在路線上交換組件。
由於應用程序中的數據流清晰且定義，這具有減少新React開發人員開發的進入障礙的隱含好處。
await getInitialData(ctx): { data } getInitialData是一種可選的異步函數，在路由的配置上定義。此API用於從外部API獲取數據，或者僅根據一些其他變量將一些初始數據返回到路由的組件中。
ctx對像傳遞給getInitialData ，其中包括：
match - React路由器的匹配對象在服務器上，您通過loadInitialData （見下文）明確調用getInitialData ，並將響應傳遞給服務器組件。
在客戶端上，它被稱為內部，返回的數據將傳遞給路由的定義組件。在客戶端， react-universal-app在getInitialData的生命週期中有3個州，這些州傳遞給了該路線的組件：
loading （ boolean ） - 如果getInitialData尚未響應，則loading將是true ，這可能是因為它正忙於從API中獲取。否則，這是falsedata （ object ） - 一旦react-universal-app具有您的數據，它將通過data道具傳遞。否則，它是nullerror （ Error ） - 如果獲取初始數據的過程會引發錯誤，則將其傳遞給您的組件以處理。否則，它是null // app/routes.js
import Home from './components/Home' ;
const routes = [
{
path : '/' ,
exact : true ,
component : Home ,
getInitialData : await ( ctx ) => {
return { title : 'Home!' } ; ;
} ,
} ,
] ;
export default routes ; // app/components/Home.js
const Home = ( { loading , error , data } ) => {
if ( loading ) return 'Loading...'
if ( error ) return 'Oh no, something went wrong!'
if ( data ) {
return (
< div >
< h1 > { data . title } </ h1 >
</ div >
)
}
} ;
export default Home ; react-universal-app支持react-router的參數化路由。由於數據獲取在路線上定義，因此參數化路由是微風的，並且可以非常乾淨地處理。
// ./app/routes.js
import Home from './components/Home' ;
const routes = [
{
path : '/:id' ,
exact : true ,
component : Home ,
getInitialProps : await ( { match } ) => {
const { id } = match . params ;
const response = await fetch ( `/someApi/ ${ id } ` ) ;
const apiResponse = await response . json ( ) ;
return { title : 'Home!' , apiResponse } ; ;
} ,
} ,
] ;
export default routes ; // ./app/components/Home.js
const Home = ( { loading , error , data } ) => {
if ( loading ) return 'Loading...'
if ( error ) return 'Oh no, something went wrong!'
if ( data ) {
const { title , apiResponse } = data ;
return (
< div >
< h1 > { title } </ h1 >
{
apiResponse . map ( ( { title , description } ) => (
< div >
< h2 > { title } </ h2 >
< p > { description } </ p >
</ div >
) )
}
</ div >
)
}
} ;
export default Home ;為了在服務器上渲染應用程序， react-universal-app為您提供了React組件（ ServerApp ）和Data-Fetching API（ loadInitialData ）。如果react-universal-app更加有用，則可以在內部為您獲取初始數據。但是， react-universal-app對您在服務器上如何或何處渲染React應用程序沒有任何假設，因此不能！閱讀客戶端以獲取一個明確的示例，說明為什麼不這樣做。
然後，查看ReactDOMServers在服務器上渲染React應用程序的方法！
loadInitialData是一種可選的異步函數，它基於傳遞的URL匹配該路由，調用getInitialData並返迴響應。如果路線沒有getInitialData ，將返回空對象。採用以下論點：
url （ string ） - node.js http url like對象routes （ array ） - React路由器路由具有一些初始數據的路線的React組件。它可以採取以下道具：
routes （ array ） - React路由器路由data （ object ） - 從loadInitialData的可選初始數據傳遞給路由的組件location是一個關鍵，您可以通過node.js http http url like對象為了在客戶端上進行補充您的React應用程序， react-universal-app提供了一個稱為ClientApp React組件。然後，您必須調用react-dom的hydrate方法。
客戶端應用程序需要訪問用於在服務器上渲染應用程序的數據，因此應將服務器包裹在HTML文檔中，並將其註入HTML文檔中，並將渲染的React應用程序包裹在並發送給客戶端。這些數據可能位於script標籤內，將數據注入全局window對象，就像：
< script >
window.__APP_DATA__ = data;
</ script >然後，查看ReactDOM在客戶端的React應用程序的水合方法！
一個反應組件，可在客戶端上呈現您的路由和應用程序。採取以下道具：
routes （ array ） - React路由器路由data （ object ） - 從loadInitialData的可選初始數據傳遞給路由的組件
