本项目主要作为 react 项目开发的启动模板。使用 webpack v3、react v16、react-router v4，相较旧模板有较大的变化。
webpack 的具体使用及优化可参考我的博文 webpack 使用总结 。
- Hot Module Replacement 热加载
- ESLint 检测
- less、autoprefixer
- 业务组件使用 cssModule，通用组件使用 BEM 命名法
- 小于 8k 图片转为 base64
- svg 图标
- 文件压缩、添加 MD5
- ES6+, Fetch
- 使用 Redux DevTools (安装浏览器插件)
本项目用到的纯组件主要如下：
- 按钮 Button
- 走马灯 Carousel
- 弹框 Dialog
- 图标 Icon
- 无限滚动 Infinite-Scroll
- 列表载入 List-Loading
- 结果页 Result-Card
- 分段器 Segmented
- 菊花图 Spin
- 步骤条 Steps
- 标签页 Tabs
- 倒计时 Time-Count
- 轻提示 Toast
这些组件主要展示思路与方法，功能较基础，仅供参考。实际开发生产时请根据业务需求二次开发。
本项目使用yarn作为包管理，也可替换为npm。两者的差异请参阅从 npm 客户端迁移。无论使用哪个都建议将安装源替换为淘宝镜像。
git clone https://github.com/tumars/boilerplate-webpack-react-es6-cssModule
cd boilerplate-webpack-react-es6-cssModule
yarn install
yarn start
访问 http://localhost:3000/ 查看页面。
打开新命令行窗口，执行：
yarn run mock
接口将会在本地 3003 端口启动。本项目的接口数据通过 node http 服务建立，配置文件在 /mock 文件夹内。
Windows 用户使用：
yarn run build-win
Mac 用户使用：
yarn run build-mac
文件将会在./dist文件夹内生成。
可以使用anywhere工具建立本地服务查看页面：
yarn global add anywhere 或 npm i -g anywhere
cd ./dist
anywhere
页面会自动打开。
之前使用 rem 布局，后来看了再聊移动端页面的适配,决定使用 vw、vh 布局，配合 postcss-px-to-viewport和 viewport-units-buggyfill 能通过大部分机型的测试。
经测试发现 viewport-units-buggyfill 在处理 base64 背景图片的 vw vh 时会导致图片出错，请注意。
当然使用 rem 布局还是最安全的，提供三个方案：
- 参考本项目 v2 版本使用 js 控制 html 的 font-size 。
- 使用 postcss-pxtorem。
- 使用淘宝的 lib-flexible，这个是最推荐的。
本项目中的获取接口数据处的异步处理使用的是 async 函数，相比 Promise 直观、方便了许多。
本项目的一些组件使用了 Decorator（修饰器）的写法，例如 module/mo-carousel。以及 css module 也是以 Decorator 的方式使用。
Reselect 库可以创建可记忆的(Memoized)、可组合的 selector 函数。Reselect selectors 可以用来高效地计算 Redux store 里的衍生数据。
使用 Reselect 相当一个缓存，使容器组件传递的 props 输入值不变时输出值不变，以减少显示组件的重复渲染。
本项目的 layout/data-list-tabs 文件内使用了 Reselect。
更多 Reselect 的访问跟介绍请访问：https://github.com/reactjs/reselect
Immutable 是指数据不可变。使用 Immutable 在每次操作修改对象时都会生成一个新对象，而不修改原对象。这对 react 有这么两点意义：
-
- 保证了 state 的不可被直接更改。
-
- 便于 shouldComponentUpdate 对比前后对象是否相同。
从而一定的程度上的保证安全性和提提高性能。
这是 Immutable.js 的文档页面：https://facebook.github.io/immutable-js/
React Diff 算法中 React 会借助元素的 key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。 如果使用 index 来作为 key，当数据更新仅仅是数组重新排序或在其中间位置插入新元素，那么视图元素都将重新渲染。
在 componentWillMount 没有意义，所有的 state 初始化应当在 this.state 中定义，而第一次 render 后改变 state 应当在 componentDidMount 中执行。
而且该时间周期钩子在 react v17 版本中将会被移除，查看：https://reactjs.org/docs/react-component.html#mounting
页面的图像渲染经过如下五个步骤
- script （js 计算）
- style （样式计算）
- layout （布局）
- paint （绘制）
- composite （合成）
具体的讲解与优化请查看 chrome 开发者文档的说明： https://developers.google.com/web/fundamentals/performance/rendering/?hl=zh-cn
- 主要使用 webpack v3 + react v16 + react-router v4
- 更改文件结构，组件更新
- Promise 改为 async await
- rem 布局改为 vw、vh，使用 postcss-px-to-viewport 配置
- 动画组件依赖更新至 react-transition-group
主要使用 webpack v2 + react v15 + react-router v4
主要使用 webpack v1 + react v13 + react-router v2
如有问题请提 issue，或通过以下方式联系到我：
- 邮箱 menghui9898@gmail.com
- 博客 ferecord.com
- Twitter @Tumars
欢迎指教交流 🙆