成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React組件懶加載

mgckid / 643人閱讀

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

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

那么，在React里我們怎樣實現(xiàn)當用到我們需求的功能時再請求對應(yīng)的組件，而不是一次性的請求全部代碼呢？

bundle-loader

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

// 當你用到這個函數(shù)時，這個chunk才會被請求
var waitForChunk = require("bundle-loader!./file.js");

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

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

結(jié)合React

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

怎樣知道何時需要請求這個組件呢？社區(qū)建議的是先加載一個bundle容器組件（這個bundle容器組件本身非常小），當這個容器組件被渲染到dom時則可認為我們需要請求對應(yīng)的懶加載組件了。

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

import React, { Component } from "react";

class Bundle extends Component {
  state = {
    // 因為module被占用了，我們用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() {
    //若加載完成則渲染對應(yīng)懶加載的組件，反之加載beforeLoad傳入的組件
    return this.state.mod
      ? 
      : ;
  }
}

export default Bundle;

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

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é)合React Router

結(jié)合React Router也非常簡單,因為已經(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87274.html

相關(guān)文章

  • react-lazy-load粗讀

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

    dailybird 評論0 收藏0

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

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

    lidashuang 評論0 收藏0

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

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

    K_B_Z 評論0 收藏0

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

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

    dackel 評論0 收藏0

發(fā)表評論

0條評論

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