利用React 16.6新特性优化应用性能-白红宇

利用React v16.6 Lazy&Suspense提升应用性能

本篇文章示例代码

前言

利用懒加载(Lazy Loading)优化页面性能不是什么新概念，不过React 16.6可以使用React.lazy与Suspense让原生React实现Lazy Loading大大的简化。

本篇文章也会拓展多种类似解决方案，见拓展部分

主要关键词说明

动态导入（Dynamic Import）

动态导入目前只是TC39的一个提案，不是JS（ES）标准的一部分。该功能可以动态化加载我们分割的组件/页面/文件，具体提案见下方链接：

目前要使用动态导入，需要使用到babel插件：

React.lazy

lazy函数提供了一种非常简便的方法动态导入组件，实现按需加载与代码分割

React.lazy使用方式非常简单，示例：

// lazy 接受一个函数作为参数const MyComponent = React.lazy(() => import('path/MyComponent'));// 展示时才加载（可以自定义一些条件）const App = () => (  
        
       
    
)复制代码

Suspense

Suspense组件用于包装lazy组件，在lazy组件还没有完全加载时，将fallback内容呈现给用户。

用动态加载，编译时会将文件分割，从加载文件到呈现会有时间延迟，此时可以使用Suspense展示一个loading。

使用示例

import React, { Suspense } from 'react';const MyComponent = React.lazy(() => import('path/MyComponent'));const Loading = (  loading...
);const App = () => (  
        
           
          
       
    
)复制代码

ErrorBoundary

ErrorBoundary（错误边界），可以使用ErrorBoundary包装Suspense，当Suspense出错时，统一处理错误。当然ErrorBoundary不止可用于Suspense，可以包装任意组件，然后统一处理错误。

实际场景中，可以自己先写一些通用错误页/组件继承自ErrorBoundary，然后包装要处理的组件。

也可以在组件的componentDidCatch生命周期中单独处理错误。

应用

性能优化说明

针对React加载的优化，可以分为两类：

页面加载优化

组件加载优化

很明显，React.lazy + Suspense可以很方便的应用于组件加载优化场景。

示例场景

CSR(客户端渲染)应用多页面的中某个耗时组件的加载

路由层

import React from 'react';import { BrowserRouter as Router, Route } from 'react-router-dom';import Header from './header';import Index from '../pages';import Welcome from '../pages/welcome';export default () => (  
        
           
      
      
            
           
       
      
     
  
    );复制代码

某个存在耗时组件的页面

// welcome.jsimport React, { Suspense } from 'react';// 使用Suspense + React.lazy动态加载的耗时组件const Content = React.lazy(() => import('../components/content'));export default () => (  
        
     Welcome
    
     
      
       loading...
      
}>      
          
       
    
);复制代码

说明

假设用webpack编译上面代码产出bundle.js。当进入首页时，加载的bundle.js不会包含Welcome Content部分的代码，切换页面到Welcome时会走网络加载需要的文件。

利用这种方法拆分多个组件时，可以显著的提升首屏时间。

完整示例项目

说明：该项目主要用于React一些新功能及有意思的用法示例，会持续更新，后面会涉及到hooks及最新源码相关，有兴趣的可以star。

拓展

针对SSR（服务端渲染）应用导入性能优化

可以使用，Next.js已支持直接使用dynamic import，并且可以指明什么时候动态导入（服务端/客户端），Next.js对首屏做了很多优化，首屏时，服务端会寻找到最简依赖渲染，具体可以点击前面链接查看文档。示例：

// Next.js 动态导入const MyComponent = dynamic(import('../components/MyComponent'), {  ssr: false,  loading: () => false,});复制代码

针对组件的动态加载

针对图片的lazy loading

针对动态请求

：对于CSR应用，在不用hooks的情况下，也可以不在componentDidMount中处理请求，让请求更加的优雅。

：利用Render Props + React hooks + Context API统一处理请求，支持SSR使用

封装react-request示例（统一请求处理）

import React from 'react';import PropTypes from 'prop-types';import { Fetch } from 'react-request';// import ReactLoading from 'react-loading';import config from '../../config';const CustomFetch = (props) => {  const { url, children } = props;  return (    
    
      data.data}    >      {({ fetching, failed, data }) => {        if (fetching) {          // 正在请求：可以展示loading动画          // return 
     ;        }        if (failed) {          // 当前组件请求失败          // return 
     请求失败...
;        }        if (data) {          // 请求成功          return children(data);        }        return null;      }}    
      );};CustomFetch.propTypes = {  url: PropTypes.string.isRequired,};export default CustomFetch;复制代码

在组件中使用CustomFetch

buildLinks = () => (    
          
     
              {data => data.map((item, index) => (          
                              {item.name}
                  ))}      
         
    
  );复制代码