持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情
使用create-react-app搭建一个项目，该删的删掉，该补上的补上。
最后的app.js应该有留有一个div用于存放组件，保证能运行就好。
注意点：
-
当路由在app中过多时如果初始为“/”路径时全部渲染，势必会浪费性能。
-
如果组件中没有state或者props改变仍然重复渲染的话，也造成不必要的浪费。
-
当网络慢时，加载空余时间是不是会一片空白？
解决：
- 我们项目在运行时打包都是通过webpack的生成bundle.js。 打包一次就会生成不同的kb，这取决于项目大小。要解决的问题就是初始根组件就把所有组件都打包渲染出来这个问题。 于是想到，是不是可以初始只渲染app组件，下面点击哪个组件就生成哪个组件的bundle.js。当然可以。
`React.lazy` 函数能让你像渲染常规组件一样处理动态引入（的组件）。
import OtherComponent from './OtherComponent';//使用前
const OtherComponent = React.lazy(() => import('./OtherComponent')); //使用后
这个操作也叫做代码分割：打包
大多数 React 应用都会使用 Webpack，Rollup 或 Browserify 这类的构建工具来打包文件。 打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。 接着在页面上引入该 bundle，整个应用即可一次性加载。
打包是个非常棒的技术，但随着你的应用增长，你的代码包也将随之增长。尤其是在整合了体积巨大的第三方库的情况下。你需要关注你代码包中所包含的代码，以避免因体积过大而导致加载时间过长。
为了避免搞出大体积的代码包，在前期就思考该问题并对代码包进行分割是个不错的选择。 代码分割是由诸如 Webpack，Rollup 和 Browserify（factor-bundle）这类打包器支持的一项技术，能够创建多个包并在运行时动态加载。
对你的应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容，能够显著地提高你的应用性能。尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。
- 解决方法：
使用PureComponent纯函数来包裹类组件、使用shouldComponentUpdate判断是否应该更新、使用memo来包裹函数组件
shouldComponentUpdate(nextProps, nextState) {
return true;
}
在大部分情况下，你可以继承 React.PureComponent / memo以代替手写 shouldComponentUpdate()。它用当前与之前 props 和 state 的浅比较覆写了 shouldComponentUpdate() 的实现。
- 使用Suspense
当网络慢，请求卡顿造成白屏时：
import { PureComponent,Suspense,lazy } from "react"
<Suspense fallback={<p>loading,请等等</p>}/>
这样就保证每次在页面没有成功加载之前得到一个页面展示的效果了。
