最近闲着没事，把自己网站上的react版本都升了一遍，发现webpack2 和 router v4都发布了一段时间了。升级看了看有什么不同。
webpack2已经有很多文章以及自家的官网都说的很多了。反而router v4没什么人说。
github链接
这里借个地方说几个v4的优点
BrowserRouter,Switch
react的写法。所有都是组件。而数据都在props中传递。getComponent 。这是一把双刃剑。取消了这个之后，写法得到统一，至于异步加载的时候，可以用一个高阶函数去判断chunk.js是否加载完了，中间还能做一个过渡动画的组件去让加载时候没那么枯燥而缺点也有很多。最大的一样就是，妈蛋，我还没学过v3，v4就出来了……
lz你好，看了你的代码，我有一个疑问：
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = {Component: AsyncComponent.Component}
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {
AsyncComponent.Component = Component // 这一句不太明白？是用来干嘛的
this.setState({Component})
})
}
}
render() {
const {Component} = this.state
if (Component) {return <Component { ...this.props} />}
console.log(Component);
return (<Loading />)
}
}
}
看这个模块的调用
const userRouter = asyncComponent(() => System.import('./user/index').then(module => module.default))
这个asyncComponent传入了一个函数() => System.import('./user/index').then(module => module.default)
这个函数就是getComponent。用到了webpack2 的System.import。当它的JS文件加载完之后会执行then内的操作，并把JS里面模块作为参数module => module.default。
回到你的问题上，其实就是把加载好的模块写上AsyncComponent.Component上。
想说async的事不需要router来控制，router只是根据url来render各种component。
用redux-thunk或者redux-saga处理，方便自由。