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的可选初始数据传递给路由的组件
