优化一
- 减少对 refs、ref 的使用
- 可以通过事件绑定的函数的第一个形参中获取 event.target 访问 真实DOM元素（具体可以参考我另外一篇文章：React总结）
优化二
- 遍历数组，生成虚拟DOM时，给每个元素绑定的 key 最好不要使用 index（也就是索引）
- 尽可能使用每一项的唯一标识，作为 key 的值
- key 是帮助 React 识别哪些元素改变了，比如被添加或删除。
- 如果列表项目的顺序可能会变化，使用索引来用作 key 值，这样做会导致性能变差，还可能引起组件状态的问题。
- react会通过比较虚拟DOM的差异来实现真实DOM是否需要重新编译，而在列表中 key 就是识别的标志之一。
优化三
- 组件懒加载
- 需要使用 lazy 和 Suspense 配合使用才可以
- 可以实现在当前路由地址与路由组件的 path 对应时再加载组件
- 加快加载速度
- Suspense 需要绑定一个属性：fallback={传入一个组件}，传入的组件就不可以使用懒加载了
// 一般在项目中都是在 layout 也就是菜单文件中去注册路由组件
import React, { Component, Suspense, lazy } from 'react'
<Suspense fallback={<h1>loading.....</h1>}>
<Switch>
<Route path="/home" component={lazy(()=>import('./pages/Home'))}/>
<Redirect to="/login"/>
</Switch>
</Suspense>
优化四
- 组件优化
- 在创建类组件时有两种可以继承的父类组件：Component 和 PureComponent
- Component 的特点
- 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
- 只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低
- 这是因为：Component中的shouldComponentUpdate()总是返回true
- PureComponent
- PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
- 注意:
- 只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false
- 不要直接修改state数据, 而是要产生新数据
- 项目中一般使用PureComponent来优化
优化五
- react react-dom 这两个包在发布生产环境时可以使用 CDN 的方式引入使用
优化六
虚拟化长列表
如果你的应用渲染了长列表（上百甚至上千的数据），我们推荐使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。
react-window 和 react-virtualized 是热门的虚拟滚动库。 它们提供了多种可复用的组件，用于展示列表、网格和表格数据。 如果你想要一些针对你的应用做定制优化，你也可以创建你自己的虚拟滚动组件，就像 Twitter 所做的。
