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

資訊專(zhuān)欄INFORMATION COLUMN

React組件懶加載

mgckid / 635人閱讀

摘要：怎樣知道何時(shí)需要請(qǐng)求這個(gè)組件呢社區(qū)建議的是先加載一個(gè)容器組件這個(gè)容器組件本身非常小，當(dāng)這個(gè)容器組件被渲染到時(shí)則可認(rèn)為我們需要請(qǐng)求對(duì)應(yīng)的懶加載組件了。

React組件懶加載 
Web應(yīng)用一個(gè)重要的優(yōu)勢(shì)就在于可以只加載我們想要的功能，而不必每次打開(kāi)都把整個(gè)系統(tǒng)載入

那么，在React里我們?cè)鯓訉?shí)現(xiàn)當(dāng)用到我們需求的功能時(shí)再請(qǐng)求對(duì)應(yīng)的組件，而不是一次性的請(qǐng)求全部代碼呢？

bundle-loader

新版的React建議我們使用bundle-loader進(jìn)行代碼的分離,下面我們看下它的用法:

// 當(dāng)你用到這個(gè)函數(shù)時(shí)，這個(gè)chunk才會(huì)被請(qǐng)求
var waitForChunk = require("bundle-loader!./file.js");

//  當(dāng)請(qǐng)求的chunk加載完成才會(huì)執(zhí)行傳入的回調(diào)函數(shù)，并將請(qǐng)求的模塊作為參數(shù)傳入回調(diào)函數(shù)
waitForChunk(function(file) {
    // 接收到懶加載模塊，類(lèi)似于下面代碼
    // var file = require("./file.js");
});

這個(gè)插件使用非常簡(jiǎn)單，只是對(duì)require.ensure的封裝，使用起來(lái)類(lèi)似于AMD的方式，
只需在回調(diào)函數(shù)里接收到懶加載的模塊即可。

結(jié)合React

React 組件也是模塊，因此可以使用bundle-loader進(jìn)行代碼分離,只是需要在合適的地方請(qǐng)求調(diào)用即可。

怎樣知道何時(shí)需要請(qǐng)求這個(gè)組件呢？社區(qū)建議的是先加載一個(gè)bundle容器組件（這個(gè)bundle容器組件本身非常?。?dāng)這個(gè)容器組件被渲染到dom時(shí)則可認(rèn)為我們需要請(qǐng)求對(duì)應(yīng)的懶加載組件了。

我們可以為所有的懶加載組件封裝一個(gè)通用的容器組件:
(這里也有已經(jīng)封裝好的:react-lazy-bundle,直接安裝即可）

import React, { Component } from "react";

class Bundle extends Component {
  state = {
    // 因?yàn)閙odule被占用了，我們用mod定義變量
    mod: null
  };

  componentWillMount() {
    this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps);
    }
  }

  load(props) {
    this.setState({
      mod: null
    });
    props.load(mod => {
      this.setState({
        // 為了兼容es module 和 AMD module
        mod: mod.default ? mod.default : mod
      });
    });
  }

  render() {
    //若加載完成則渲染對(duì)應(yīng)懶加載的組件，反之加載beforeLoad傳入的組件
    return this.state.mod
      ? 
      : ;
  }
}

export default Bundle;

如上封裝，使用時(shí)我們只需如下即可:

import React, { Component } from "react";
import Bundle from "./Bundle";

import Test from "bundle-loader?lazy&name=[name]!./test";

const BeforeLoadComponent = props =>
  

    before load {props.name}
  
;

class HomePage extends Component {
  render() {
    return (
      

        
      

    );
  }
}

export default HomePage;

怎么樣，是不是特別簡(jiǎn)單

結(jié)合React Router

結(jié)合React Router也非常簡(jiǎn)單,因?yàn)橐呀?jīng)把Bundle作為Route的component參數(shù)了，
所以要再封裝一層，把load和beforeLoad預(yù)先傳入即可。

import Bundle from "./Bundle";
import About from "bundle-loader?lazy&name=[name]!./About";

const AboutWrapper = props => ;

class App extends Component {

  render() {
    return (
      

        
Welcome!

        
      

    )
  }
}

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

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

相關(guān)文章

  • react-lazy-load粗讀

    摘要：粗讀近來(lái)沒(méi)什么特別要做的事，下班回來(lái)的空閑時(shí)間也比較多，所以抽空看看懶加載是怎么實(shí)現(xiàn)的，特別是看了下的庫(kù)的實(shí)現(xiàn)。之先別關(guān)注，按他給注釋說(shuō)測(cè)試用。之是組件綁定事件時(shí)會(huì)觸發(fā)的函數(shù)。 react-lazy-load粗讀 近來(lái)沒(méi)什么特別要做的事，下班回來(lái)的空閑時(shí)間也比較多，所以抽空看看懶加載是怎么實(shí)現(xiàn)的，特別是看了下 react-lazy-load 的庫(kù)的實(shí)現(xiàn)。 懶加載 這里懶加載場(chǎng)景不是路由...

    dailybird 評(píng)論0 收藏0

  • 組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子

    摘要：同時(shí)，懶加載按需加載概念至關(guān)重要。時(shí)至今日，這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣，對(duì)于組件也可以使用無(wú)狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無(wú)疑更加簡(jiǎn)潔。 組件化在當(dāng)今前端開(kāi)發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類(lèi)庫(kù)，比如 React、Vue 等對(duì)此概念都倍加推崇。確實(shí)，組件化復(fù)用性（reusability）和模塊性（modularization...

    lidashuang 評(píng)論0 收藏0

  • 組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子

    摘要：同時(shí)，懶加載按需加載概念至關(guān)重要。時(shí)至今日，這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣，對(duì)于組件也可以使用無(wú)狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無(wú)疑更加簡(jiǎn)潔。 組件化在當(dāng)今前端開(kāi)發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類(lèi)庫(kù)，比如 React、Vue 等對(duì)此概念都倍加推崇。確實(shí)，組件化復(fù)用性（reusability）和模塊性（modularization...

    K_B_Z 評(píng)論0 收藏0

  • 組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子

    摘要：同時(shí)，懶加載按需加載概念至關(guān)重要。時(shí)至今日，這些實(shí)現(xiàn)懶加載腳本的代碼仍有學(xué)習(xí)意義。代碼實(shí)戰(zhàn)下面讓我們動(dòng)手實(shí)現(xiàn)一個(gè)按需加載輪子。同樣，對(duì)于組件也可以使用無(wú)狀態(tài)組件函數(shù)式組件實(shí)現(xiàn)這樣無(wú)疑更加簡(jiǎn)潔。 組件化在當(dāng)今前端開(kāi)發(fā)領(lǐng)域中是一個(gè)非常重要的概念。著名的前端類(lèi)庫(kù)，比如 React、Vue 等對(duì)此概念都倍加推崇。確實(shí)，組件化復(fù)用性（reusability）和模塊性（modularization...

    dackel 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<