universal-react-mobx
同构react应用，使用mobx自动进行状态管理，更高的渲染性能。 支持单页面和多页面的服务端渲染
技术栈:
- react
- mobx
- express
- ES2015
- webpack 2
- babel 6
- Service Worker
- Web安全
- react router 4
Start:
- npm install universal-react-mobx
- npm run build:dev // for development
- contains 'in-line-source-map' for debugging
- 'why-did-you-update' avoidable re-render checking
- react hot module replacing
- npm run build:prod // for production
- npm run build:lib // build libs file
- npm run build // both
- npm run local // start server for dev
- npm run watch // watch files for building
怎么新增一个页面?
1.传统多页面方式：
1.1.服务端：
- 注册路由
router.get('/', getIndex);- 配置appName和实例化后的store
module.exports = function (req, res, next) {
res.renderReactHTML({
component: <Page/>,
locals: {
appName: 'index',
title: 'index page'
},
store: new Store()
});
};1.2.客户端：
- 客户端增加一个新页面且名称和上面定义的appName一致
initializeRender({
Store
component: <Page/>
})2.单页面spa方式
2.1.新增路由：
<Route path="/" component={App} onChange={ onChange }>
<IndexRoute component={ require('./pages/App/Vote').default }/>
<Route path="vote" component={ require('./pages/App/Vote').default }/>
<Route path="about" component={About} />
</Route>2.2.页面组件通过connectDataFetchers修饰器进行服务端或客户端数据拉取
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import { Link } from 'react-router';
import connectDataFetchers from '../../utils/connectDataFetchers';
@connectDataFetchers(['VoteStore'])
@observer(['VoteStore'])
class Vote extends Component {
static pageConfig = {
pageId: 'Vote'
};
render() {
return (
<div className="vote">
this is vote
<Link to="/about?debug=test">about</Link>
<Link to="/test">test</Link>
message: { this.props.VoteStore.message }
</div>
);
}
}