// This is straight from the overview.md in the react-router docs
var Router = ReactRouter;
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var App = React.createClass({
render: function () {
return (
<div>
<header>
<ul>
<li><Link to="inbox">Inbox</Link></li>
<li><Link to="calendar">Calendar</Link></li>
</ul>
</header>
{/* this is the important part */}
<RouteHandler/>
</div>
);
}
});
var Inbox = React.createClass({
render: function () {
return (
<div>
This is the inbox
</div>
);
}
});
var Calendar = React.createClass({
render: function(){
return (
<div>
This is the calendar
</div>
);
}
});
var routes = (
<Route name="app" path="/wish/" handler={App} >
<Route name="inbox" handler={Inbox}/>
<Route name="calendar" handler={Calendar}/>
<DefaultRoute handler={Inbox}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(
<Handler/>,
document.querySelector('#content')
);
});
上面是一个 super 简单的页面,当用户导航到它时显示收件箱组件,并在导航到时显示日历组件。但是,实际上这些页面可能包含多个组件和大量的 jsx 代码。
分解所有不同组件并仅在需要时下载相关文件的最佳实践是什么,即在上面的简单示例中,仅在用户请求时下载收件箱的代码(以及日历等?由于 JSX 文件本质上是 View ,因此让用户下载所有 View 以仅查看一个 View 似乎违背了我所知道的一切。
我浏览了网上的示例,但只能看到包含 100 个组件的巨大文件......
最佳答案
不确定这是否正是您想要的,但最佳实践是将您的资源(文件)组合在一起,以消除对大量小文件的无关 HTTP 请求。这里有一个平衡(一个 5mb 的 js 文件可能应该分解成更小的文件)和像 webpack 这样的工具。帮助您管理此事。
您是否有需要分解它们的特定用例?
关于javascript - 如何即时包含 React jsx 文件,而不是使用 React-router 一次性包含所有文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30200190/