React：导出 const + 导出默认值 vs 导出默认值答案

【问题标题】：React: export const + export default vs export defaultReact：导出 const + 导出默认值 vs 导出默认值
【发布时间】：2017-07-09 03:18:57
【问题描述】：

我遇到了使用“双重”导出创建当前组件的情况。你能解释一下它是否有真正的用途，还是只是作者的偏好？

import React from 'react'
import DuckImage from '../assets/Duck.jpg'
import './HomeView.scss'

export const HomeView = () => (
  <div>
    <h4>Welcome!</h4>
    <img
      alt='This is a duck, because Redux!'
      className='duck'
      src={DuckImage} />
  </div>
)

export default HomeView

P.S：当前代码稍后被 webpack2 捆绑。

【问题讨论】：

他们将其导出为常规常量和默认常量，因此您可以使用import HomeView from "file" 或import { HomeView } from "file" 导入它。
导出默认允许import React from 'react' 之类的东西。无默认导出需要{} 例如import {React} from 'react'。每个文件只能有 1 个默认值

标签： reactjs webpack ecmascript-6

【解决方案1】：

在这种情况下，两个出口正在出口相同的东西。两者都有

import Homeview

和

import { Homeview }

将为您提供相同的模块（HomeView 组件）。

不过，我看到您正在使用 Redux。如果你正在做类似

的事情

export const HomeView ...

export default connect(mapStateToProps)(HomeView);

这可能很有用，因为您有时可能想要使用非 Redux 连接的组件，或者您可能需要它进行测试。

【讨论】：

最后一点很好。不只是 Redux，如果你也想将 React 的 PropTypes 添加到函数中。