react开发那些事儿，如修改默认端口3000等

创建新项目

ant-design-pro，企业级中后台前端/设计解决方案

一、启动
1、yarn create umi
2、选择ant-design-pro，javascript

3、npm install
4、npm start
5、项目启动成功

react 、dva项目

一、dva相关概念
1、dva官网： https://dvajs.com/guide/getting-started.html#安装-dva-cli
2、dva首先是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva还额外内置了react-router和fetch。
3、dva是framework（框架），不是library（库）

二、安装dva-cli并创建应用
1、npm install dva-cli -g // 全局安装dva-cli，只需要安装一次，不需要每个项目都安装
2、cd ~/ee/react
3、dva new dva-demo
4、cd dva-demo
5、npm start

二、配置antd和babel-plugin-import
1、npm i --save antd
2、npm i --save-dev babel-plugin-import
（1）babel-plugin-import用于按需引入antd的javascript和css，这样打包出来的文件不至于太大。
3、修改.webpackrc，使babel-plugin-import插件生效

{
	 "extraBabelPlugins": [
	    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
	]
}

三、配置代理，能通过RESTFul的方式访问
1、.webpackrc.js，加上proxy配置：

"proxy": {
	"/api": {
		"target": "http://jsonplaceholder.typicode.com",
		"changeOrigin": true,
		"pathRewrite": {"^/api": ""}
	}
}

---

工程配置

react修改端口，默认的3000端口修改成3001

1、方法一：修改package.json
package.json里
（1）mac

"scripts": {
	"start": "PORT=3001 react-scripts start"
}

（1）windows
"start": "set PORT=3001 && react-scripts start"
2、方法二：安装cross-env，修改package.json
（1）npm install cross-env -g
（2）package.json

"start": "cross-env PORT=3001 react-scripts start"

3、方法三：修改node_modules/react-scripts/start.js
（1）const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001

store/index.js

1、既有redux调试，又有redux-thunk中间件

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
const middleware = [thunk];
const enhancer = compose(applyMiddleware(...middleware), composeEnhancers);

const store = createStore(
  reducer, /* preloadedState, */
  enhancer
);

export default store;

---

webstorm

webstorm报错“can’t find module eslint-config-react-app”。

1、解决：webstorm中的eslint config改成当前项目的node_modules中的eslint。

---

控制台

报错：Please use require("history").createHashHistory instead of require("history/createHashHistory")

1、解决：node_modules/ _dva@2.4.1@dva/ lib/ index.js
var _createHashHistory = _interopRequireDefault(require("history/createHashHistory"));改成
var _createHashHistory = _interopRequireDefault(require("history").createHashHistory);

报错：Invalid attempt to spread non-iterable instance

1、原因：对象前用了扩展运算符
2、解决：把对象改成数组，或者不要使用扩展运算符
validator: {} 改成validator: []
才能使用...validator ， 不然就会报上面的错误。

---

mock

mockjs时跨域

1、报错：Request header field cache-control is not allowed by Access-Control-Allow-He
2、res.header('Access-Control-Allow-Headers', 'Origin, Cache-Control, Content-Type, Content-Length, Authorization, Accept, X-Requested-With'); //允许的header类型
加上Cache-Control

---

代码

每3个数字用，隔开

1、正则：/\B(?=(\d{3})+(?!\d))/g

`${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}

2、理解：
（1）
\B匹配非单词边界；
\d匹配一个数字；
+是量词，表示前面的内容重复1到多次
?=是预言，表示这个位置后面的内容需要满足的条件，注意只是匹配一个位置，并不匹配具体的字符，所以是零宽；
?!也是预言，表示这个位置后面的内容不能满足的条件，注意也只是匹配一个位置，并不匹配具体的字符，所以也是零宽；
（2）
\d{3}匹配三个数字，+表示前面的内容重复1到多次，所以(\d{3})+表示三个数字的1到多次，也就是3,6,9…等3的倍数个数字的字符串；
(?!\d)匹配一个位置，这个位置后面不是数字
(?=(\d{3})+(?!\d))匹配一个位置，这个位置后面首先是3的倍数个数字的字符串，接下来的位置不是数字
/\B(?=(\d{3})+(?!\d))/g就是全局匹配一个位置，这个位置是非单词边界，然后后面是3的倍数个数字，然后是非数字。
（3）
比如，字符串ad12345678abs，这个正则匹配的位置就是2后面的位置，5后面的位置。2后面有6（3 * 2）个数字，5后面有3（3 * 1）个数字。

getFieldDecorator单选框，默认是要显示值的。默认显示的数据是后台传过来的。select中的option也是后台传过来的，传了个id:487，对应的opiton的id是487，显示的是“商用区”。但是页面一直显示不出“商用区”，一直显示487

<FormItem label="大区">{getFieldDecorator('areaId', { rules: [{ required: !this.state.changeDis, message: '请选择' }] })(areaSelect({ disabled: this.state.changeDis }))}</FormItem>

1、花费时间的地方：一直以为异步获取option数据是在得到默认id:487之后，从而导致只能显示id，显示不了name。
2、解决：487是数字类型，而option的key是字符串类型，把487改成字符串类型，就会默认选上。