性能優(yōu)化
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 react-app-rewired@2.0.2-next.0 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( // 在默認配置基礎(chǔ)上注入 // 插件名悼潭，插件配置 ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }], config ); return config; }; 以上任選一種踩寇，
import {Button} from 'antd'即可按需加載對應(yīng)的js, css文件
容器組件和展示組件
容器組件: 容器組件負責數(shù)據(jù)獲取
展示組件: 負責根據(jù)props顯示信息
shouldcomponentUpdate
shouldComponentUpdate（15.5版本的優(yōu)化）-
注意
缺點: 每次需要重寫shouldComponentUpdate, 進行數(shù)據(jù)的前后比較邏輯 -
代碼
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） 讓函數(shù)式的組件也有PureComponent的功能 2. memo傳入展示組件碳竟，返回一個類似PureComponent包裝過后的組件 -
代碼
const Comment = React.memo((props) => ( <p>{props.name}</p> ));
