基于create-react-app 2.0构建前端框架 新手必

开箱即用，容易理解，更适合小白使用开发学习

mobx 简介

和 redux 类似，mobx 是一个数据管理库，都可以和 react 配合使用。它区别于 redux 的最大特点是，可以直接修改数据，对 UI 进行精确刷新

使用 mobx 时，借鉴了 redux 架构的优点：

• 单一数据源，这样避免了子组件、父组件状态同步的问题
• 可以做到让组件无状态化
• 使用 Provider 注入，让 store actions 可以在子组件中，通过 props 访问使用

下面是一些不同点：

• mobx 使用的是 @inject 装饰器语法注入，redux 使用的是 connect 语法注入
• mobx 使用 @observer 语法，让一个 component 能响应 store 字段更新
• mobx 会动态精确绑定数据字段和对应 component 关系， redux 使用 connect 参数手动控制传递哪些字段
• mobx 直接修改 store 的状态，但是必须在 @action 修饰的函数中完成，@action 的语义，表示这是一个修改状态的操作
• redux Provider 传递 store 是强约定，mobx Provider 灵活传递 store actions，也可以是其它名字，比如 db
• redux 使用了比较难以理解的高阶函数和参数 connect combineReducers bindActionCreators mapStateToProps mapDispatchToProps ，mobx 方案，除了使用 decorator 语法，没有其它让人感觉理解困难的函数。
• redux 引入了数据流，mobx 没有数据流的概念，通过 actions 直接改变数据

编码工作量对比

代码功能少，感觉不到差别，好像就是 redux 方案有点难理解；而 mobx 比较直接，也比较 magic，就像当年刚开始使用 jQuery 的感觉。

mobx 在大项目中的扩展能力

redux 方案，本质上还是通过添加更多的 switch 语句来实现扩展，将 store 分支节点的 reducer 分散到不同的文件，再通过工具函数combineReducers 合并成一个 rootReducer。

mobx 方案的扩展非常简单，需要扩展 store 和 actions。并且，actions 和 store 的扩展方式完全一致，通过给父类添加成员

下载地址:
https://github.com/wulibaibao/react-antd-demo

已支持：

• mobx ———— mobx进行状态管理
• React-router-dom ———— React路由体系
• Antd ———— 使用antd学习开发后台管理系统
• React-loadable ———— import()动态加载的支持
• webpack打包优化 ———— build包更小
• fetch ———— 数据请求
• Scss ———— css 预处理
• 登录验证
• 支持装载ES7（装饰器）
• Express
• Webpack 4.0
• create-react-app 2.0

即将支持：

• IE兼容
• 接口
• nginx
• gzip
• typescript

快速开始

install

yarn install or npm install

建议使用yarn

npm install yarn -g

start

yarn start

默认端口：3000

修改默认端口

方法一

"start":"set PORT=3535 && node scripts/start.js"

方法二

/*
自行安装包 yarn add cross-env
*/
"start":"cross-env PORT node scripts/start.js"

webpack proxy

转发配置package.json中的proxy

yarn start

build

yarn build

具体修改点：

webpack.config.dev.js && webpack.config.prod.js

• 新增方法

 + function resolve (dir) {
 +     return path.join(__dirname, '..', dir)
 + }

• resolve -> alias 新增

 + '@':resolve('src'),

webpack.config.prod

• externals
  externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。

 + externals: {
 +    'react': 'React',
 +    'react-dom': 'ReactDOM',
 +    'mobx' : 'mobx',
 +    'react-router-dom':'ReactRouterDOM',
 +    'mobx-react':'mobxReact',
 +    'moment':'moment',
 +    'antd' : 'antd',
 + },

• devtool
  此选项控制是否生成，以及如何生成 source map。

 - devtool: shouldUseSourceMap ? 'source-map' : false,
 + devtool: false 

package.json -> proxy

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用

 + "proxy":{}

public -> index.html

HtmlWebpackPlugin 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。

 + <%if(process.env.NODE_ENV === 'production') {%>
 +    <script src="%PUBLIC_URL%/lib/react.production.min.js"></script>
 +    <script src="%PUBLIC_URL%/lib/react-dom.production.min.js"></script>
 +    <script src="%PUBLIC_URL%/lib/react-router-dom.min.js"></script>
 +    <script src="%PUBLIC_URL%/lib/mobx.umd.min.js"></script>
 +    <script src="%PUBLIC_URL%/lib/mobx-react.min.js"></script>
 +    <script src="%PUBLIC_URL%/lib/moment.min.js"></script>
 +    <script src="%PUBLIC_URL%/lib/antd.min.js"></script>
 + <%}%>

app.js

    const path = require('path')
    const express = require('express')

    var app = express()

    // 静态文件资源，做静态文件服务器，js、css、html资源等
    const projPath = process.cwd()
    // js,css资源
    app.use( `/` , express.static( path.join(projPath, 'build') ) )

    app.get( `*` , ( req , res ) => res.sendFile(path.join(__dirname, 'build', 'index.html')) )

    // 修改侦听服务器端口
    const port = 2001
    app.listen(port)
    console.info(`Listen on Port ${port}`)

over!

希望喜欢

---

喜欢请关注个人博客！

blog address : https://www.wulibaibao.com/

简书地址：

https://www.jianshu.com/u/bc0ac5b86f32

联系我！
QQ ：381477703

mobx介绍部分引文: http://imweb.io/topic/59f4833db72024f03c7f49b4