官方文档（https://immutable-js.github.io/immutable-js/docs/#/）

有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的，下面我们来一探究竟。

JavaScript 中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存，但当应用复杂后，这就造成了非常大的隐患，Mutable 带来的优点变得得不偿失。为了解决这个问题，一般的做法是使用 shallowCopy（浅拷贝）或 deepCopy（深拷贝）来避免被修改，但这样做造成了 CPU 和内存的浪费。

Immutable 可以很好地解决这些问题。

首先我们使用react组件会配合connect来连接store获取state，那么只要store中的state发生改变组件就会重新渲染，所以性能不高，一般我们可以使用shouldComponentUpdate()来判断，但react提供了PureComponent组件，当我们把Component替换成PureComponent的时候会自动帮我们优化组件避免不必要的渲染，注意：前提是使用immutable来管理数据，不然会出现一些问题。

什么是异步组件？简单来说就是异步加载一个组件，正常情况浏览器加载的是我们打包好的bundle.js文件，那么这个文件是集合了所有js是代码，然而我们首屏加载并不需要一次性加载所有的组件，这会造成性能的损耗，所以我们可以使用异步组件，推荐使用（react-loadable）https://github.com/jamiebuilds/react-loadable，那么使用react-loadable就会造成路由跳转的问题，所以我们需要使用withRouter来解决，withRouter组件的功能是让当前组件有能力获取到所有的参数和内容

1.首先进入项目运行 npm run eject 展开详细代码（只可以使用一次，展开后不可恢复）

2.create-react-app 的版本在低于 2.0 的时候可以在 package.json 增加 proxy 配置， 配置成如下：

1
2
3
4
5
6

"proxy":{
    "/api/**":{
        "target":"https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",   //需要代理的地址
    　　 "changeOrigin": true
    }
}

什么是react按需加载？简单来说就是当我们引用antd的时候需要引入全局css样式，这会对性能造成一定的影响，那么使用按需加载以后就不需要引入css全局样式了，直接引入功能模块即可，既然需要设置按需加载就要对webpack文件进行修改，需要我们执行npm run eject命令来展开项目的隐藏文件，如果只是简单的修改，我们可以使用react-app-rewired定义全局变量，react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置。具体如下：

使用 react-app-rewired 对 create-react-app 的默认配置进行自定义

1.yarn add react-app-rewired –dev

1
2
3
4
5
6
7
8
9

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}