个性化阅读
专注于IT技术分析

React使用代码分离 – ReactJS实战教程

点击下载

上一章ReactJS实战教程请查看:React高阶组件用法

React应用程序使用Webpack或Browserfy等工具将他们的文件绑定/打包在一起,绑定是一个获取多个文件并将它们合并到单个文件(称为包)中的过程,bundle包负责在网页上加载整个应用程序。我们可以从下面的例子中理解它。

App.js

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

math.js

export function add(a, b) {  
  return a + b;  
}  

bundle文件如下所示:

function add(a, b) {  
  return a + b;  
}  
  
console.log(add(16, 26)); // 42  

随着应用程序的增长,我们的包也会增长,特别是当我们使用大型第三方库时。如果包的大小变大,加载到网页上需要很长时间。为了避免大规模的包,我们需要将包实现分离。

React 16.6.0于2018年10月发布,并引入了一种执行代码分离的方法。代码分离是Webpack和Browserify支持的一个特性,它可以创建多个包,这些包可以在运行时动态加载。

代码分离使用React.lazy和Suspense工具/库,它帮助你懒洋洋地加载一个依赖项,只有当用户需要时才加载它。

代码分离改进:

  • 应用程序的性能
  • 对内存的影响
  • 下载的千字节(或兆字节)大小

React.lazy

将代码分离到应用程序的最佳方法是使用动态import()语法,React.lazy函数允许我们将动态导入呈现为常规组件。

之前的使用

import ExampleComponent from './ExampleComponent';  
  
function MyComponent() {  
  return (  
    <div>  
      <ExampleComponent />  
    </div>  
  );  
}  

现在的使用

const ExampleComponent = React.lazy(() => import('./ExampleComponent'));  
  
function MyComponent() {  
  return (  
    <div>  
      <ExampleComponent />  
    </div>  
  );  
}  

上面的代码片段在渲染ExampleComponent时自动加载含ExampleComponent的包。

Suspense

如果包含ExampleComponent的模块还没有被函数组件(MyComponent)加载,那么我们需要在等待加载时显示一些回退内容。我们可以使用Suspense组件来做到这一点。换句话说,在获取和渲染延迟组件时,Suspense组件负责处理输出。

const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  
  
function MyComponent() {  
  return (  
    <div>  
      <Suspense fallback={<div>Loading...</div>}>  
        <ExampleComponent />  
      </Suspense>  
    </div>  
  );  
}  

后退prop接受你在等待组件加载时希望渲染的React元素,我们可以将多个延迟组件与一个Suspense组件组合在一起。可以在下面的例子中看到。

const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  
const ExamComponent = React.lazy(() => import('./ ExamComponent'));  
  
function MyComponent() {  
  return (  
    <div>  
      <Suspense fallback={<div>Loading...</div>}>  
        <section>  
          <ExampleComponent />  
          <ExamComponent />  
        </section>  
      </Suspense>  
    </div>  
  );  
}  

注意:React.lazy和Suspense组件尚不能用于服务器端渲染,对于在服务器渲染的应用程序中进行代码拆分,建议使用可加载组件。

错误边界

如果任何模块加载失败,例如由于网络故障,我们将收到错误消息。 我们可以使用“错误边界”处理这些错误。 一旦创建了错误边界,就可以在惰性组件上方的任何地方使用它来显示错误状态。

import MyErrorBoundary from './MyErrorBoundary';  
const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  
const ExamComponent = React.lazy(() => import('./ ExamComponent'));  
  
const MyComponent = () => (  
  <div>  
    <MyErrorBoundary>  
      <Suspense fallback={<div>Loading...</div>}>  
        <section>  
          <ExampleComponent />  
          <ExamComponent />  
        </section>  
      </Suspense>  
    </MyErrorBoundary>  
  </div>  
);  

基于路径的代码分离

这是非常棘手的决定,我们在应用程序中引入分离的代码。为此,我们必须确保我们选择的地方,将分离的捆绑包平均不会破坏用户体验。

路由是开始代码分割的最佳位置,在web上的页面转换过程中,基于路由的代码分割是非常重要的,这需要一定的加载时间。下面是一个如何使用React Router和React.lazy设置基于路由的代码分离到应用程序的例子。

import { Switch, BrowserRouter as Router, Route} from 'react-router-dom';  
import React, { Suspense, lazy } from 'react';  
  
const Home = lazy(() => import('./routes/Home'));  
const About = lazy(() => import('./routes/About'));  
const Contact = lazy(() => import('./routes/Contact'));  
  
const App = () => (  
  <Router>  
    <Suspense fallback={<div>Loading...</div>}>  
      <Switch>  
        <Route exact path="/" component={Home}/>  
        <Route path="/about" component={About}/>  
        <Route path="/contact" component={Contact}/>  
      </Switch>  
    </Suspense>  
  </Router>  
);  

使用export实现代码分离

当前,React.lazy仅支持默认导出。 如果要使用命名导出导入任何模块,则需要创建一个中间模块,将其重新导出为默认模块。 我们可以从以下示例中了解它。

ExampleComponents.js

export const MyFirstComponent = /* ... */;  
export const MySecondComponent = /* ... */;  

MyFirstComponent.js

export { MyFirstComponent as default } from "./ExampleComponents.js";  

MyApp.js

import React, { lazy } from 'react';  
const MyFirstComponent = lazy(() => import("./MyFirstComponent.js"));  
赞(0)
未经允许不得转载:srcmini » React使用代码分离 – ReactJS实战教程

评论 抢沙发

评论前必须登录!