React組件導入的兩種方式(動態導入組件的實現)

一、 react組件兩種導入方式

React組件可以通過兩種方式導入另一個組件

1. import(常用)

import component from './component'

2. require

const component = require('./component')

兩種方式有什么區別?

• 提出的規范不同
  import是ES6語法,reuqire是CommonJs提出的.

• import會通過babel轉換成CommonJS規范。
  下面兩行代碼是等價的

import component from './component'
// => 
const component = require('./component')

推薦統一規范一種導入方式,防止混亂
當然,不同情況使用的方式也是不一樣的.
下面詳細介紹兩種導入方式對應的情況(注意這里不介紹按需加載,可看《前端性能優化之按需加載》)

二、兩種方式對應的 情況

1. import xxx from 'xxx'
   一般來說使用import就夠了.但是要注意import需要放在定義組件的外部。這就導致一個問題:

如果我需要通過動態路徑動態加載組件(這里並非指按需加載),在class里面(ES6)語法使用import會報下面錯誤:

Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level

這時候使用require方法能很好解決

2. var xxx = require('xxx')
   這里需要注意的是:
   用import引入的組件只需要export default即可
   而通過require引入的組件需要底部生命module.exports = component

用例子解釋一下:
需求場景: 現在有大量的子組件存放在對應文件夾(如下)

firstComponent
    /index
secordComponent
    /index
thirdComponent
    /index
...

但是我在父組件每次只需加載其中一個即可,我不想一次性導入大量的子組件,然后加判斷篩選出對應組件。這樣代碼可能會非常多、雜(比如我有20個子組件,那么我要寫20個import);
於是我通過require動態載入

//父組件
renderDetail(mode,pageType){
    let dynamicDetail = require(`../components/content/${pageType}/index`)
    return dynamicDetail
}

render(){
    //const { pageType } = this.props; 這里的pageType是判斷加載哪個子組件的條件
    
    //我們先假設一個
    pageType = firstComponent;  //存在firstComponent這么一個文件夾里面有一個index.js組件
    
    let DynamicDetail = this.renderDetail(pageType);    //動態拿到這個組件
    
    return(
        <div className="detailWried">
            <DynamicDetail />
        </div>
    )
}

//子組件
import React from 'react'

export default class firstComponent extends React.Component{
    render(){
        return(
            <div>
                NavMenu
            </div>
        )
    }
}

module.exports = firstComponent;

這樣我就可以實現動態加載組件的功能了.把pageType替換成動態的即可,pageType的值則按照用戶操作動態改變即可。例如用戶選擇第二個組件的時候:pageTpey = secordComponent

注意這里可能會遇到一個問題:
把require里面的路徑替換成變量的話,

let path = `../../../../components/content/${mode}/children/${pageType}/index`
let dynamicDetail = require(path)

會報以下錯

//終端
Critical dependency: the request of a dependency is an expression

//瀏覽器
can't  require module'.'

在require使用字符串變量即可(字符串變量可真的是一個好方便東西)

至此！兩個導入組件的方式介紹完畢！
擴展一下:

• React創建組件的三種方式及其區別