基于 Create React App路由4.0的异步组件加载

本文┞仿是一个额外的篇章，它可以在你的React app中，赞助加快初始的加载组件时光。当然这个操作不是完全须要的，但如不雅你好奇的话，请随便跟随这篇文┞仿一路用Create React App和 react路由4.0的异步加载方法来赞助react.js构建大年夜型应用。

代码瓜分(Code Splitting)

代码瓜分和 react-router

在我们 react app 中，常见的路由设备可能是像下面一样的

/* Import the components */ 
import Home from './containers/Home'; 
import Posts from './containers/Posts'; 
import NotFound from './containers/NotFound'; 
 
 
/* Use components to define routes */ 
export default () => ( 
  <Switch> 
    <Route path="/" exact component={Home} /> 
    <Route path="/posts/:id" exact component={Posts} /> 
    <Route component={NotFound} /> 
  </Switch> 
);  

我们一开端惹人这些组件，然后定义好的路径，会根据我们的路由去匹拍┞封些组件。

然则，我们静态地在顶部导入路由中的所有组件。这意味着，不管哪个路由匹配，所有这些组件都被加载。我们只想加载对匹配路由的时刻才加载响应的组件。下面我们一步步来完成这个任务。

创建一个js 文件，如：src/components/AsyncComponent.js，代码如下

import React, { Component } from 'react'; 
 
export default function asyncComponent(importComponent) { 
 
  class AsyncComponent extends Component { 
 
    constructor(props) { 
      super(props); 
 
      this.state = { 
        component: null, 
      }; 
    } 
 
    async componentDidMount() { 
      const { default: component } = await importComponent(); 
 
      this.setState({ 
        component: component 
      }); 
    } 
 
    render() { 
      const C = this.state.component; 
 
      return C 
        ? <C {...this.props} /> 
        : null	
			
 1/4    1 2 3 4 下一页 尾页
	
			

　　推荐阅读
　　浪潮将发布服务器新品  聚焦智慧计算
            
            
                
                    
                
                【51CTO.com原创稿件】 2017年7月6日，海潮经由过程其官方微信宣布了将于7月12日宣布其新一代办事器&mdash;&m>>>详细阅读


本文标题：【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
地址：http://www.17bianji.com/lsqh/36075.html
 1/2    1