react项目优化的一些方法

主要说一些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请求的时候加入一个变量开关，避免多次触发，达到节流。
事件处理的时候设置个延迟时间，避免抖动。