This repository has been archived by the owner on May 7, 2022. It is now read-only.
Releases: react-love/react-latest-framework
Releases · react-love/react-latest-framework
4.2.0-hook
- 升级到react16.8.6，支持hook
- 升级到webpack4.28.4，支持更全更新的webpack配置
4.1.0
4.0.0
3.3.0
3.2.0
一个新的版本
升级内容：
1、React和React-Dom打包压缩后的总体积由147KB => 116KB
2、React16更新变化请看官方文档：https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html
3、新增preact支持，如果你觉得preact的兼容性不好，可以切换回react，只需要删除webpack.config的alias的几行配置。
'react': isPro ? 'preact-compat/dist/preact-compat' : 'react', //如果你不想要preact，可以删除这一行
'react-dom': isPro ? 'preact-compat/dist/preact-compat' : 'react-dom', //如果你不想要preact，可以删除这一行
'create-react-class': 'preact-compat/lib/create-react-class' //如果你不想要preact，可以删除这一行3.1.0
项目结构大调整：
├── doc //各种与该项目或者react有关的开发文档供你参考
├── index.html //单页应用的html
├── package.json //node相关环境的配置文件
├── server.js //前端服务器
├── src //项目的主要目录
│ ├── App.js //根react组件
│ ├── AsyncComponent.js //异步react组件HOC
│ ├── actions //action控制中心
│ ├── app.less //公共样式
│ ├── containers //按页面划分组件，每个页面内部的组件在该目录下面管理，公共组件提取到Commons
│ │ ├── BookList
│ │ │ └── BookList.js
│ │ ├── Commons
│ │ ├── Home
│ │ │ ├── Home.js
│ │ │ ├── components
│ │ │ ├── files
│ │ │ └── styles
│ │ └── Search
│ │ ├── Search.js
│ │ ├── components
│ │ └── styles
│ ├── entry.js //webpack打包入口
│ ├── reducers //存放state
│ └── utils //提供一些小工具
├── test //jest测试集
│ ├── __snapshots__
├── webpack.config.js //webpack配置文件
└── webpackServerConfig.js //webpack公共对象
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="https://accionvegana.org/accio/0ITbvNmLiVHa0l2Z6MHc0/" component={homeContainer} />
<Route location={location} path="https://accionvegana.org/accio/0ITbvNmLiVHa0l2Z6MHc0/search" component={Search} />
<Route location={location} path="https://accionvegana.org/accio/0ITbvNmLiVHa0l2Z6MHc0/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="https://accionvegana.org/accio/0ITbvNmLiVHa0l2Z6MHc0/xx" component={Search} />请注意import()方法是异步的，你不能这样使用
const Foo = import("./xx") // 错误的写法
<Route path="https://accionvegana.org/accio/0ITbvNmLiVHa0l2Z6MHc0/xx" component={import("./xxx")} /> //错误的写法1.2.0
使用webpack的import()实现代码切割，不只是在路由中使用，你可以在任意组件内部使用代码切割方法懒加载组件，。
在路由route中，你可以这样
//封装好的异步方法，非原创，使用了一个大神写的函数。
import { asyncComponent } from './AsyncComponent'
//使用asyncComponent()，你就能将Promise的返回值赋给一个变量
const Search = asyncComponent(() => import(/* webpackChunkName: "search" */ "./containers/Search/searchContainer"))
<Route path="https://accionvegana.org/accio/0ITbvNmLiVHa0l2Z6MHc0/xx" component={Search} />请注意import()方法是异步的，你不能这样使用
const Foo = import("./xx") // 错误的写法
<Route path="https://accionvegana.org/accio/0ITbvNmLiVHa0l2Z6MHc0/xx" component={import("./xxx")} /> //错误的写法1.1.0
1、热更新改成react-hot-loader3（@zhengjunxiang）；
2、前端改成webpack-dev-server启动；
3、mock移到easy-mock。
4、如果你不喜欢这种启动和热更新方式，请切换tag版本（不会切换tag吗？）。
5、更新了webpack插件和其他几个插件，你打包之后会发现js体积变小了。
6、新版本推送的比较仓促，有bug可以给我反馈。