react-router4按需加载(踩坑填坑)

来源：动视网责编：小采时间：2020-11-27 22:02:17

react-router4按需加载(踩坑填坑)

react-router4按需加载(踩坑填坑):react-router4如何去实现按需加载Component，在router4以前，我们是使用getComponent的方式来实现按需加载的，router4中，getComponent方法已经被移除，网上有好几种方案大多都解决的不太彻底，下面我说一下我的方案：一：创建asyncComponen

推荐度：

点击下载本文 文档为doc格式

导读react-router4按需加载(踩坑填坑):react-router4如何去实现按需加载Component，在router4以前，我们是使用getComponent的方式来实现按需加载的，router4中，getComponent方法已经被移除，网上有好几种方案大多都解决的不太彻底，下面我说一下我的方案：一：创建asyncComponen

这个警告其实是在组件卸载的时候执行了setState，虽然这个警告并不影响正常使用，但是看着总是不爽，所以我们要在组件卸载的时候结束setState，如下：

componentWillUnmount(){
 this.setState = (state,callback)=>{
 return
 }
}

四：完整版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() {
 if(this.hasLoadedComponent()){
 return;
 }
 const { default: component } = await importComponent();
 this.setState({
 component: component
 });
 }

 hasLoadedComponent() {
 return this.state.component !== null;
 }
 componentWillUnmount(){
 this.setState = (state,callback)=>{
 return
 }
 }

 render() {
 const C = this.state.component;

 return C ? <C {...this.props} /> : null;
 }
 }

 return AsyncComponent;
}

五： webpack部分配置需要配置chunkFilename

eturn {
 output: {
 path: path.resolve(CWD, config.build),
 publicPath: config.static[process.env.MODE],
 chunkFilename: 'js/[name]-[chunkhash:8].js',
 filename: 'js/[name].js',
 },

结尾推广一下我的react-native开源项目：https://github.com/duheng/Mozi

react-router4按需加载(踩坑填坑)

推荐度：

点击下载本文 文档为doc格式

标签： React 填坑按需加载

热门焦点

react-router4按需加载(踩坑填坑)

react-router4按需加载(踩坑填坑)

react-router4按需加载(踩坑填坑)

最新推荐

猜你喜欢

热门推荐