代码中的优化方案

一. React性能优化

1. 减轻不必要的state

只存储跟组件渲染有关的数据（如 count/列表数据/loading等）
不用做渲染的数据不要放在state中，如 定时器id，放在this中

2. shouldComponentUpdate 避免不必要的渲染（类组件）

通过return false告诉组件不需要重新渲染，可通过传参nextProps, nextState来判断是否需要更新
`nextState.num === this.state.num`、`nextProps.num === this.props.num`

3. 纯组件 PureComponent（类组件）

1. PureComponent内部自动实现了shouldComponentUpdate，不需要手动比较，通过分别对比前后两次props和state的值，来决定是否重新渲染
2. PureComponent是浅层对比，只对比对象的引用地址是否相同，不能直接修改对象中的值，应创建新对象；数组用扩展运算符、concat、slice返回新数组的方法，不要使用push等直接修改数组的方法
`class App extends React.PureComponent`

4. useEffect\useCallback\useMemo\React.memo（针对函数组件）

1. useEffect监听依赖项发生变化，执行回调函数
2. useCallback缓存的是一个函数，滥用会造成性能问题，因为会监听依赖项
3. useMemo缓存的是一个值
4. React.memo用于函数组件，类似于类组件的PureComponent

二. Vue代码的一些优化

1. v-if和v-for

1. v-for优先于v-if被解析
2. 如果同时出现，每次都会先执行渲染再判断条件，无论如何循环都不可避免，浪费了性能
3. 要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环

2. Object.freeze

不再监听不需要双向绑定的数据

三. 其他优化的地方

1. 长列表性能优化

展示大型列表和表格数据（如：城市列表、通讯录、微博等），会导致页面卡顿，滚动不流畅
产生性能问题的原因：大量DOM节点的重绘和重排
影响移动设备耗电加快、影响移动设备电池寿命
优化方案：1. 懒渲染 2. 可视区域渲染

懒渲染

常见的长列表优化方案，常见于移动端
原理：每次只渲染一部分数据（如10条），等渲染的数据即将滚动完时，再渲染后面部分
优点：每次只渲染一部分数据，速度快
缺点：数据量大时，页面中依然存在大量DOM，占用内存过多、降低浏览器渲染性能，导致页面卡顿
使用场景：数据量不大的情况

可视区域渲染（react-virtualized组件）

原理：只渲染页面可视区域的列表项，在滚动列表时动态恒心列表项（会额外加载一部分数据，考虑滚动快页面白屏的问题）
使用场景：一次性展示大量数据的情况（如：大表格、微博、聊天应用等）