This repository was archived by the owner on May 7, 2022. It is now read-only.
3.0.0
1、升级babel到最新稳定版
2、升级webpack到3.5.5
3、更新css和less提取模式，由于webpack开发环境不支持css热更新，所以不单独提取css，而在生成环境下，单独打包css模块。
4、全面优化组件，vendor.js打包体积有所减少，线上开启gzip之后仅有92.1kb，点击上面的链接在线查看
5、完善eslint规则
6、封装2个公共组件给开发者使用
升级V2小提示：(不建议升级)
1、修改css动画class退出属性
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
/*leave 改为 exit*/
.example-exit {
opacity: 1;
}
.example-exit.example-exit-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}2、CSSTransitionGroup替换成TransitionGroup和CSSTransition，同时修改props
import {TransitionGroup, CSSTransition} from 'react-transition-group'
class A extends React.Component {
render() {
return (
<TransitionGroup>
<CSSTransition
key={location.pathname}
classNames={animateCls}
enter={true}
exit={true}
timeout={{exit: 400, enter: 400}}
>
<div>
<Route location={location} exact path="/" component={homeContainer} />
<Route location={location} path="/search" component={Search} />
<Route location={location} path="/bookList/:bookId" component={BookList} />
</div>
</CSSTransition>
</TransitionGroup>
)
}
}- 使用webpack的import()实现代码切割，不只是在路由中使用，你可以在任意组件内部使用代码切割方法懒加载组件，。
在路由route中，你可以这样
//封装好的异步方法，非原创，使用了一个大神写的函数。
import { asyncComponent } from './AsyncComponent'
//使用asyncComponent()，你就能将Promise的返回值赋给一个变量
const Search = asyncComponent(() => import(/* webpackChunkName: "search" */ "./containers/Search/searchContainer"))
<Route path="/xx" component={Search} />请注意import()方法是异步的，你不能这样使用
const Foo = import("./xx") // 错误的写法
<Route path="/xx" component={import("./xxx")} /> //错误的写法