欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年01月06日 15:24:57   作者:墨子攻城  
這篇文章主要介紹了react-router4按需加載(踩坑填坑),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

react-router4如何去實現(xiàn)按需加載Component,在router4以前,我們是使用getComponent的方式來實現(xiàn)按需加載的,router4中,getComponent方法已經(jīng)被移除,網(wǎng)上有好幾種方案大多都解決的不太徹底,下面我說一下我的方案:

一:創(chuàng)建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,并導(dǎo)入需要按需加載的模塊

 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>
)

三:預(yù)覽效果

可以看到有一個警告,內(nèi)容是

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

這個警告其實是在組件卸載的時候執(zhí)行了setState,雖然這個警告并不影響正常使用,但是看著總是不爽,所以我們要在組件卸載的時候結(jié)束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',
 },

結(jié)尾推廣一下我的react-native開源項目:https://github.com/duheng/Mozi

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 解決React報錯Invalid hook call

    解決React報錯Invalid hook call

    這篇文章主要為大家介紹了React報錯Invalid hook call解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12
  • 一個基于react的圖片裁剪組件示例

    一個基于react的圖片裁剪組件示例

    本篇文章主要介紹了一個基于react的圖片裁剪組件示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • 詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法

    詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法

    這篇文章主要介紹了詳解React中傳入組件的props改變時更新組件的幾種實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 使用React Native創(chuàng)建以太坊錢包實現(xiàn)轉(zhuǎn)賬等功能

    使用React Native創(chuàng)建以太坊錢包實現(xiàn)轉(zhuǎn)賬等功能

    這篇文章主要介紹了使用React Native創(chuàng)建以太坊錢包,實現(xiàn)轉(zhuǎn)賬等功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-07-07
  • React?Hydrate原理源碼解析

    React?Hydrate原理源碼解析

    這篇文章主要為大家介紹了React?Hydrate原理源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • React?程序設(shè)計簡單的輕量級自動完成搜索框應(yīng)用

    React?程序設(shè)計簡單的輕量級自動完成搜索框應(yīng)用

    這篇文章主要為大家介紹了React?程序設(shè)計簡單的輕量級自動完成搜索框應(yīng)用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • React報錯解決之ref返回undefined或null

    React報錯解決之ref返回undefined或null

    最近使用react做個滾動監(jiān)聽獲取更多數(shù)據(jù)效果,當(dāng)想獲取dom時發(fā)現(xiàn)怎么也獲取不到,下面這篇文章主要給大家介紹了關(guān)于React報錯解決之ref返回undefined或null的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • React 實現(xiàn)拖拽功能的示例代碼

    React 實現(xiàn)拖拽功能的示例代碼

    這篇文章主要介紹了React 實現(xiàn)拖拽功能的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • GraphQL在react中的應(yīng)用示例詳解

    GraphQL在react中的應(yīng)用示例詳解

    這篇文章主要為大家介紹了GraphQL在react中的應(yīng)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • React Native設(shè)備信息查看調(diào)試詳解

    React Native設(shè)備信息查看調(diào)試詳解

    這篇文章主要為大家介紹了React Native設(shè)備信息查看調(diào)試詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11

最新評論