如何避免react-router4按需加载时踩坑填坑，实现高效长尾词路由？

本文共计740个文字，预计阅读时间需要3分钟。

React Router 4 中实现按需加载 Component 的方法：

在 React Router 4 中，`getComponent` 方法已被移除，因此不能再使用它来实现按需加载。以下是一些替代方案：

1. 动态导入（Dynamic Imports）： 使用 ES6 的动态 `import()` 语法来按需加载组件。

javascript const MyComponent=lazy(()=> import('./MyComponent'));

2. React.lazy： 使用 `React.lazy` 和 `Suspense` 来实现组件的懒加载。

javascript import React, { Suspense, lazy } from 'react';

const MyComponent=lazy(()=> import('./MyComponent'));

function MyRoute() { return ( ); }

3. React Loadable： 使用 `react-loadable` 库来实现组件的懒加载。

javascript import Loadable from 'react-loadable';

const MyComponent=Loadable({ loader: ()=> import('./MyComponent'), loading: ()=> Loading..., });

这些方法都可以有效地实现 React Router 4 中组件的按需加载。

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

一：创建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; } render() { const C = this.state.component; return C ? <C {...this.props} /> : null; } } return AsyncComponent; }

二：在引入asyncComponent.js,并导入需要按需加载的模块

import asyncComponent from "utils/asyncComponent" const Home = asyncComponent(() => import("./home")) const About = asyncComponent(() => import("./about"))

二：render部分

const routes = () => ( <BrowserRouter> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> <Redirect to="/" /> </Switch> </BrowserRouter> )

三：预览效果

可以看到有一个警告，内容是

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

这个警告其实是在组件卸载的时候执行了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开源项目：github.com/duheng/Mozi

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。