React组件懒加载

mgckid 发布于2019-08-21 11:54 / 634人阅读

摘要：怎样知道何时需要请求这个组件呢社区建议的是先加载一个容器组件这个容器组件本身非常小，当这个容器组件被渲染到时则可认为我们需要请求对应的懒加载组件了。

React组件懒加载

Web应用一个重要的优势就在于可以只加载我们想要的功能，而不必每次打开都把整个系统载入

那么，在React里我们怎样实现当用到我们需求的功能时再请求对应的组件，而不是一次性的请求全部代码呢？

bundle-loader

新版的React建议我们使用bundle-loader进行代码的分离,下面我们看下它的用法:

// 当你用到这个函数时，这个chunk才会被请求
var waitForChunk = require("bundle-loader!./file.js");

//  当请求的chunk加载完成才会执行传入的回调函数，并将请求的模块作为参数传入回调函数
waitForChunk(function(file) {
    // 接收到懒加载模块，类似于下面代码
    // var file = require("./file.js");
});

这个插件使用非常简单，只是对require.ensure的封装，使用起来类似于AMD的方式，
只需在回调函数里接收到懒加载的模块即可。

结合React

React 组件也是模块，因此可以使用bundle-loader进行代码分离,只是需要在合适的地方请求调用即可。

怎样知道何时需要请求这个组件呢？社区建议的是先加载一个bundle容器组件（这个bundle容器组件本身非常小），当这个容器组件被渲染到dom时则可认为我们需要请求对应的懒加载组件了。

我们可以为所有的懒加载组件封装一个通用的容器组件:
(这里也有已经封装好的: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() {
    //若加载完成则渲染对应懒加载的组件，反之加载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;

怎么样，是不是特别简单

结合React Router

结合React Router也非常简单,因为已经把Bundle作为Route的component参数了，
所以要再封装一层，把load和beforeLoad预先传入即可。

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

const AboutWrapper = props => ;

class App extends Component {

  render() {
    return (
      
        Welcome!
        
      
    )
  }
}

云服务器 GPU云服务器懒加载懒加载异常 javascript懒加载懒加载session

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87274.html

react-lazy-load粗读

摘要：粗读近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下的库的实现。之先别关注，按他给注释说测试用。之是组件绑定事件时会触发的函数。 react-lazy-load粗读近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下 react-lazy-load 的库的实现。懒加载这里懒加载场景不是路由...

dailybird 2019-08-26 12:13 评论0 收藏0
组件复用那些事儿 - React 实现按需加载轮子

摘要：同时，懒加载按需加载概念至关重要。时至今日，这些实现懒加载脚本的代码仍有学习意义。代码实战下面让我们动手实现一个按需加载轮子。同样，对于组件也可以使用无状态组件函数式组件实现这样无疑更加简洁。组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 React、Vue 等对此概念都倍加推崇。确实，组件化复用性（reusability）和模块性（modularization...

lidashuang 2019-08-22 16:24 评论0 收藏0
组件复用那些事儿 - React 实现按需加载轮子

摘要：同时，懒加载按需加载概念至关重要。时至今日，这些实现懒加载脚本的代码仍有学习意义。代码实战下面让我们动手实现一个按需加载轮子。同样，对于组件也可以使用无状态组件函数式组件实现这样无疑更加简洁。组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 React、Vue 等对此概念都倍加推崇。确实，组件化复用性（reusability）和模块性（modularization...

K_B_Z 2019-08-02 10:14 评论0 收藏0
组件复用那些事儿 - React 实现按需加载轮子

摘要：同时，懒加载按需加载概念至关重要。时至今日，这些实现懒加载脚本的代码仍有学习意义。代码实战下面让我们动手实现一个按需加载轮子。同样，对于组件也可以使用无状态组件函数式组件实现这样无疑更加简洁。组件化在当今前端开发领域中是一个非常重要的概念。著名的前端类库，比如 React、Vue 等对此概念都倍加推崇。确实，组件化复用性（reusability）和模块性（modularization...

dackel 2019-08-29 15:04 评论0 收藏0