Skip to content
This repository has been archived by the owner on May 7, 2022. It is now read-only.

Releases: react-love/react-latest-framework

4.2.0-hook

24 Apr 14:22
Compare
Choose a tag to compare
4.2.0-hook Pre-release
Pre-release
  • 升级到react16.8.6,支持hook
  • 升级到webpack4.28.4,支持更全更新的webpack配置

4.1.0

23 Aug 08:04
Compare
Choose a tag to compare

插件全面升级

react = 16.4.2
webpack = 4.17.1
使用更轻量的mini-css-extract-plugin来处理css
增加redux-immutable

4.0.0

15 May 07:14
Compare
Choose a tag to compare

1、基础架构由自定义全部更新为create-react-app架构

2、原来的插件基本不变,比如redux、react-router4等

3、V3以及之前的架构不再维护

3.3.0

21 Dec 15:11
Compare
Choose a tag to compare

update

1、eslint全面开启;
2、给git commit增加eslint检查拦截;
3、极致压缩,首屏36.89kb;
4、增加几个常用的utils。

3.2.0

28 Sep 00:36
Compare
Choose a tag to compare

一个新的版本

升级内容:

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

11 Sep 15:37
Compare
Choose a tag to compare

项目结构大调整:

├── 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

26 Aug 17:17
Compare
Choose a tag to compare

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")} /> //错误的写法

1.2.0

17 Jun 11:08
Compare
Choose a tag to compare

使用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")} /> //错误的写法

1.1.0

06 Jun 11:01
Compare
Choose a tag to compare
1.1.0 Pre-release
Pre-release

1、热更新改成react-hot-loader3(@zhengjunxiang);

2、前端改成webpack-dev-server启动;

3、mock移到easy-mock。

4、如果你不喜欢这种启动和热更新方式,请切换tag版本(不会切换tag吗?)。

5、更新了webpack插件和其他几个插件,你打包之后会发现js体积变小了。

6、新版本推送的比较仓促,有bug可以给我反馈。

1.0.3

18 May 16:54
Compare
Choose a tag to compare

移动端适配