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

一、 react組件兩種匯入方式

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

1. import(常用)

import component from './component'

1. 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方法能很好解決

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

用例子解釋一下:
需求情境: 現在有大量的子組件存放在對應檔案夾(如下)

firstComponent    /indexsecordComponent    /indexthirdComponent    /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建立組件的三種方式及其區別