React性能优化

项目中的代码分割

import 静态引入写法

import Home from "./components/Home";
import Login from "./components/Login";
...
return(
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/posts" component={Home} />
  ...
)

以上写法不管匹配到了哪一个 route，都是一次性地引入所有的组件。可以使用代码分割进行优化，实现只引入匹配到的 route 和对应组件。

创建一个异步组件 asyncComponent 替换 import 动态导入的 Login 和 Home 组件，实现按需异步加载

utils/AsyncComponent/asyncComponent.jsx

import React, { Component } from "react";
export default function asyncComponent(importComponent) {
  // asyncComponent 接收一个 importComponent函数作为参数，importComponent()在被调用时会动态引入给定的组件。
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        component: null
      };
    }
    componentDidMount() {
      // 调用传入的importComponent()，并将动态引入的组件保存在state中
      importComponent().then(mod => {
        // import()方法返回的是一个Promise，Promise的返回值只能通过then()来读取
        this.setState({
          // 同时兼容ES6和CommonJS的模块
          component: mod.default ? mod.default : mod
        });
      });
    }
    render() {
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  }
  return AsyncComponent;
}

使用 asyncComponent 组件

src/components/App/index.js

import asyncComponent from "../../utils/AsyncComponent";
// 使用asyncComponent组件来创建代码分片点替换import动态导入的Login和Home组件
const AsyncHome = connectRoute(asyncComponent(() => import("../Home")));
const AsyncLogin = connectRoute(asyncComponent(() => import("../Login")));
//传给 asyncComponent 一个函数，在 AsyncHome 组件被创建时对组件进行动态引入 这里并没有进行组件的引入
...
  return(
    <div>
      <Router>
        <Switch>
          {/* 使用这个 AsyncHome 组件*/}
          <Route exact path="/" component={AsyncHome} />
          <Route path="/login" component={AsyncLogin} />
          <Route path="/posts" component={AsyncHome} />
    ...
  )
...

不要把所有的数据都往 State 中塞

如后端数据，且数据为不需要在页面变动

"data": {
  "result": {
    "id": 2,
    "totalUserCount": 634801,
    "totalSilentUserCount": 631192,
    "totalAccountCount": 29012,
    "creationTime": "2019-12-12T14:46:45.423"
  },
  "isSuccess": true,
  "errorCode": 0,
  "message": ""
},

那么我们只需要把 result 放入 state 即可

this.setState({
  Data:result
})
const {Data}  = this.state
....
<span style={{ color: '#333333', fontSize: '14px' }}>
  <a href="#">
    {Data.totalUserCount}
  </a>
  个，