React 性能优化

性能优化

• antd按需加载
• 容器组件和展示组件
• shouldcomponentUpdate
• purecomponent
• memo

antd按需加载

• 方案一

      第一步： npm run eject
      
      第二步： npm i antd babel-plugin-import  // 安装
      
      第三步： webpack配置中修改 babel-loader option
      {
        "plugins": [
          ["import", {
            "libraryName": "antd",
            "libraryDirectory": "es",
            "style": "css" // `style: true` 会加载 less 文件
          }]
        ]
      }
      
  

• 方案二

      第一步： npm install [email protected] babel-plugin-import --save
      
      第二步： package.json的scripts启动命令，使用'react-app-rewired'取代'react-scripts'
      
      第三步：在根目录新增'config-overrides.js'文件
      
      第四部: npm start
  

• config-overrides.js文件中代码

      // 不需要eject, 就能直接改写create-react-app的默认webpack配置
      const { injectBabelPlugin } = require("react-app-rewired");
      module.exports = function override(config, env) {
        config = injectBabelPlugin(
          // 在默认配置基础上注入
          // 插件名，插件配置
          ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
          config
        );
        return config;
      };
  

• 以上任选一种，import {Button} from 'antd' 即可按需加载对应的js, css文件

容器组件和展示组件

• 容器组件: 容器组件负责数据获取

• 展示组件: 负责根据props显示信息

shouldcomponentUpdate

• shouldComponentUpdate（15.5版本的优化）

• 注意

      缺点: 每次需要重写shouldComponentUpdate, 进行数据的前后比较逻辑
  

• 代码

      shouldComponentUpdate (nextProps) {
          if(nextProps.params === this.props.params) {
              return false
          }
          return true
      }
  

purecomponent

• PureComponent(浅比较)

• 注意

      1. 每次都是浅比较, 深比较时容易造成无限递归，性能反而下降
      
      2. 跟shouldComponentUpdate效果一致
      
      3. 代码建议是, 一般传入的props是值引用类型, 否则不好比较
  

• 代码

      class Comp extends React.PureComponent {
          
      }
  

• 代码原理

  [图片上传失败...(image-84a1f6-1585664719790)]

memo

• memo高阶组件（浅对比）

• 注意

      1. React.memo（16.6.0） 让函数式的组件也有PureComponent的功能
      
      2. memo传入展示组件，返回一个类似PureComponent包装过后的组件
  

• 代码

      const Comment = React.memo((props) => (
          
  {props.name}
      ));