浅谈react性能优化的方法-创新互联

React性能优化思路

软件的性能优化思路就像生活中去看病，大致是这样的：

使用工具来分析性能瓶颈（找病根）

尝试使用优化技巧解决这些问题（服药）

使用工具测试性能是否确实有提升（疗效确认）

初识react只是为了尽快完成项目，后期进行代码审查时候发现有很多地方需要优化，因此做了个小结。

• Code Splitting
• shouldComponentUpdate避免重复渲染
• 使用不可突变数据结构
• 组件尽可能的进行拆分、解耦
• 列表类组件优化
• bind函数优化
• 不要滥用props
• ReactDOMServer进行服务端渲染组件

Code Splitting

Code Splitting 可以帮你“懒加载”代码，如果你没办法直接减少应用的体积，那么不妨尝试把应用从单个 bundle 拆分成单个 bundle + 多份动态代码的形式。

webpack提供三种代码分离方法，详情见webpack官网

• 入口起点：使用 entry 配置手动地分离代码。
• 防止重复：使用 SplitChunks 去重和分离 chunk。
• 动态导入：通过模块的内联函数调用来分离代码。

在此，主要了解一下第三种动态导入的方法。

1、例如可以把下面的import方式

import { add } from './math';
console.log(add(16, 26));