一、 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     /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 
                        
关键字：