2018/01/25 已更新!
持续更新中,保持依赖包版本最新 🇨🇳
详情可参阅
package.json
- React 16.2.0
- Redux 3.7.2
- React-redux 5.0.6
- React-router-dom 4.2.2
- Redux-saga 0.16.0
- Webpack 3.10.0
- Babel-ESlint + Pre-ommit
- Axios 0.17.1
- ES6 + Babel
已实现
- React、Redux 全家桶
- React-router-dom 路由
- Redux-saga 实用工具
- redux-form 表单实例
- Hmr 热替换
- vendor-trunk 拆分打包
- Axios 网络请求(内有 fetch,可自行切换)
- Mock 数据API接口
- Css Modules
config/index.js cssModule:false
默认关闭(建议团队规范化命名) - ESlint
git
提交时候,语法规则自动校验 - 动态路由
- 2017/12/06 增加代理接口配置实例
- 2017/11/20
- 支持提案中的
ES7 对象展开运算符 ...{}
- 支持提案中的
- 2017/11/17
- 增加环境变量
__ENV__
,方便配置环境参数。用法npm run build:qa
- 增加环境变量
- 2017/11/15
- 修复
provider
不支持热替换
的问题
- 修复
- 2017/11/10
- 对依赖模块拆分打包,解决单个
trunk
文件过大问题
- 对依赖模块拆分打包,解决单个
- 2017/11/07
- 增加
css module
功能
- 增加
- 2017/11/06
- 增加
dev-server
下热替换功能——『Hmr』
- 增加
- 2017/08/21
- 去掉
babel-presets-stag-2
,统一为babel-presets-env
- 去掉
- 2017/07/13
- 增加动态路由功能,用法见
SimpleFormContainer
- 增加动态路由功能,用法见
- 2017/07/06
- 增加
antd
按需加载打包配置(.babelrc)
- 增加
- 2017/06/30
- 修复
git commit
提交时候,校验es7 decorator
不通过问题
- 修复
- 2017/06/29
- 增加
redux-form
表单验证组件
- 增加
- 2017/06/22
- 升级
webpack 3.0
,增加scope hoisting
- 升级
- 2017/06/08
- 引用
pure-render-decorator
,提升渲染性能;增加装饰器 decorator
- 引用
- 2017/05/22
- 对提取的
server
进行小的优化
- 对提取的
- 2017/05/16
- 增加
mock
数据,引用axios
模块,并提取server
请求
- 增加
- 2017/05/15
- 更新
redux-saga
最新版本用法 更新react-router4
最新版用法
- 更新
基于 vue-cli 构建修改
基于
babel-eslint
语法校验
自动校验
git commit -m '提交信息'
手动启动校验
npm run eslint
手动修复不符合规则代码
npm run fix
.
├─ build/ # 基于Vue-cli实现的Webpack构建目录
├─ dist/ # build 生成的生产环境下的项目
├─ src/ # 源码目录
│ ├─ assets/ # images
│ ├─ components/ # 组件(COMPONENT)
│ ├─ const/ # 常量集中管理
│ ├─ containers/ # 容器
│ ├─ reducers/ # 函数因子
│ ├─ routers/ # 路由
│ ├─ saga/ # 路由视图基页(VIEW)
│ ├─ server/ # 网络请求提取
│ ├─ utils/ # 公用方法封装提取
│ ├─ entry.js # 主入口文件
├── static/ # 放置无需经由 Webpack 处理的静态文件
├── test/ # vue-cli产出的测试目录,暂时没有处理,待更
├── index.html # 静态模板页面,开发和build产出,都依赖它
├── .babelrc # Babel 转码配置
├── .eslintignore # ESLint 检查中需忽略的文件(夹)
├── .eslintrc # ESLint 配置
├── .gitignore # git忽略提交
├── .postcssrc.js # postcss配置项,vue-cli产出
├── package.json # 很重要的东西了
项目下载
git clone https://github.com/brucecham/react-cli.git
cd react-cli && yarn
启动开发环境
yarn start
构建生产环境代码
yarn build
可使用 ncu
ncu -a
yarn build
cd dist && sts 8090
Icon 或empty 等状态显示,可以放在 before 或 after 上,500个『2层DIV』与500个『1层DIV』作对比,在安卓很烂的浏览器上,会相差几百毫秒。
<!-- 劣 -->
<div class="video-card">
<div class="video-empty"></div>
<div>
<!-- 优 -->
<div class="video-card video-empty">
<div>
- 引入
pure-render-decorator
,优化渲染判断(shouleComoonentUpdate)
import pureRender from "pure-render-decorator"
class CountTimer extends Component {
...
}
export default pureRender(CountTimer)
- decorator装饰器语法 推荐用法
import pureRender from "pure-render-decorator"
@pureRender
class CountTimer extends Component {
...
}
export default CountTimer
<!-- 劣 -->
<div {...videoData}></div>
<!-- 优 -->
<div data={videoData}></div>
- 纯循环,用forEach,不要用map,map会返回一个数组,性能并不快
- 双层循环,涉及到查找的,不要用二维数组,可以用对象来快速定位,并用Object.keys()取到key进行循环
- try {} catch (e) {} 退出forEach循环
try {
this.contentTmpList.forEach((item, index) => {
if (index > 1) {
throw new Error('')
}
})
} catch (e) {}