国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React 按需加載 - 代碼分隔

lncwwn / 2141人閱讀

摘要：使用動態(tài)之前使用動態(tài)后注意，動態(tài)并不是標準的，所以需要配置可以以一個標準組件的方法渲然一個動態(tài)引入的組件。以前的做法使用這樣在組件渲然的時候才加載。

代碼分隔

我們現(xiàn)在大多數(shù)React項目都是以Webpack 或者 Browserify等將一堆的jsx文件組織一起，并且由一個類似index.js的入口文件串聯(lián)起來的單頁面web頁面。

例如：

// math.js
export function add(a, b) {
  return a + b;
}

App:

// app.js
import { add } from "./math.js";

console.log(add(16, 26)); // 42

打完包后：

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

console.log(add(16, 26)); // 42

從這個例子可以看出，打完包后將所有的js都壓縮到一個文件里了。隨著項目越來越大，打包的文件也會越來越大，如果再引入一些第三方的js庫，那就更龐大了。

接下來介紹一下如何將React代碼分隔。（以下內(nèi)容是16.6.0版本才支持的）

Code Splitting會幫助你的應用實現(xiàn)lazy load.

這么做，即使沒有減少整個項目的代碼量，也會避免在項目初始加載時，加載沒必須的js,從而使用項目性能有所提升。

import()

最簡單直接的方式就是引入動態(tài) import 實現(xiàn)代碼分隔。

使用 動態(tài) import 之前：

import { add } from "./math";

console.log(add(16, 26));

使用動態(tài) import 后：

import("./math").then(math => {
  console.log(math.add(16, 26));
});
注意，動態(tài) import 并不是標準的EcmaScript，所以需要配置 babel-plugin-syntax-dynamic-import
React.lazy

React.lazy 可以以一個React標準組件的方法渲然一個動態(tài)引入的組件。

以前的做法：

import OtherComponent from "./OtherComponent";

function MyComponent() {
  return (
    

      
    

  );
}

使用 React.lazy ：

const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    

      
    

  );
}

這樣在組件MyComponent渲然的時候才加載OtherComponent。

React.lazy 必須使用動態(tài) import() 引入組件，必須返回一個 Promise Component。

React.lazy 目前不支持服務(wù)端渲然
Suspense

假如在 React.lazy 時，import 失敗或者異常時，我們需要給于提示，或者一個默認的組件，我們就需要使用 Suspense .

例如：

const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    

      Loading...
}>
); }

fallback 也是一個組件，但不能通過 動態(tài) import 引入的組件.

Suspense 只能包裹一個單結(jié)點，如果有多個 動態(tài) import 的組件需要放在一個 Suspense 中時，可以使用類似 React.Fragmet 包裹一下，也可以使用其他的 React 組件包裹。例如：

const OtherComponent = React.lazy(() => import("./OtherComponent"));
const AnotherComponent = React.lazy(() => import("./AnotherComponent"));

function MyComponent() {
  return (
    

      Loading...
}>
); } 基于Router的代碼分隔

基于 Router 的代碼分隔，也是我們通常所說的按需加載。是我們推薦的方式。

例如：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React, { Suspense, lazy } from "react";

const Home = lazy(() => import("./routes/Home"));
const About = lazy(() => import("./routes/About"));

const App = () => (
  
    Loading...
}> ); Named Exports

React.lazy 目前只支持 default 導出，不支持命名導出。例如，只支持：

export default () => {
  return(
I am a Lazy component
);
}

如果要支持命令導出，需要重新再 export ,例如：

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from "react";
const MyComponent = lazy(() => import("./MyComponent.js"));

推薦閱讀 《React 手稿》

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99906.html

相關(guān)文章

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<