主要说一些react项目书写代码时的一些东西，至于各种通用的优化方法就不提了，比如合并图片、webback打包压缩啥的，还是建议直接使用脚手架，比如create-react-app、nextJS，一些通过的配置处理的很好，没必要在自己搭一套。
代码分割
项目体积大的时候用，达到一个将代码懒加载的效果，可以根据模块分割，也可以根据路由分割。
通过import()
使用之前：
import { add } from './math';
console.log(add(16, 26));
使用之后
import("./math").then(math => {
console.log(math.add(16, 26));
});
webpack解析到该语法的时候，会自动进行分割。
React.lazy，只支持default exports
使用之前：
import OtherComponent from './OtherComponent';
使用之后
const OtherComponent = React.lazy(() => import('./OtherComponent'));
基于路由的代码分割
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);
避免使用Context
Context是react中跨组件树传递数据的一种方法，但是会让组件复用性变差，不推荐使用，有相应场景的话就使用redux。
虚拟化长列表
当页面有非常多的元素时，会出现卡顿，这时可以使用虚拟滚动替代，仅渲染有限的内容，降低重新渲染的时间，以及创建DOM节点的数量，推荐库：react-window
key不要使用index
循环渲染时，数据变化频繁的话，建议使用唯一的key，例如id。
封装公共方法
把常用的方法封装起来，放入util目录下，需要时引入。
多使用Memo、useMemo缓存
当传递的数据发生变化时才会重新渲染。
组件卸载时清空还在执行的方法
例如定时器、轮询方法在卸载后还是会继续执行，卸载时要清空。
使用fragement避免额外标记
使用前
return <div>
<h1></h1>
<h2></h2>
</div>
使用后
return <>
<h1></h1>
<h2></h2>
</>
节流防抖
在API请求的时候加入一个变量开关，避免多次触发，达到节流。
事件处理的时候设置个延迟时间，避免抖动。
