ES6环境下React组件最合理的导出方式探讨及三种方式对比

嘿，这个问题确实是很多刚用ES6写React的开发者都会困惑的点，我来帮你拆解这三种导出方式的差异、导入区别，以及各自的优势～

1. 匿名默认导出类 #

export default class extends Component {
  render() {
    // ...
  }
}

这种写法最简洁直接，不用额外给类起名字，适合快速撸个简单组件。但缺点也挺明显：

• 组件在文件内部没有显式名称，调试时React DevTools里只会显示Anonymous或者文件名，出问题了很难快速定位；
• 如果后续要在文件里复用这个类（比如写静态方法、或者把它当父类），根本没法直接引用，总不能自己导入自己吧？太折腾了。

2. 具名默认导出类 #

export default class ComponentName extends Component {
  render() {
    // ...
  }
}

这种和第一种本质都是默认导出，但给类加了个正经名字，直接解决了匿名类的调试痛点——React DevTools会清晰显示你定义的ComponentName，找问题方便多了。而且在文件内部要引用这个类的话，直接用ComponentName就行，比第一种顺手多了。

关于导入的区别 #

你问导入这两种导出的组件有没有区别？其实本质上没差，因为都是默认导出，导入的时候你想叫啥名就叫啥名：

// 不管是匿名还是具名默认导出，都能这么写
import MyComponent from './MyComponent';
import RandomName from './MyComponent';

唯一的小细节是，用VS Code这类IDE时，具名默认导出的组件在导入时会有自动补全提示，IDE能识别出你定义的ComponentName，而匿名导出的只能提示文件名，这点对效率有点小影响。

3. 类定义与导出分离 #

class ComponentName extends Component {
  render() {
    // ...
  }
}
export default ComponentName;

这种和第二种在程序运行层面完全等价，只是把类定义和导出逻辑分开了。它的优势在于：

• 灵活性更高：如果后续需要给组件加个高阶组件包装（比如withRouter、connect），直接在导出前处理就行，不用动类定义的代码：

  class ComponentName extends Component { /* ... */ }
  // 包装后再导出
  const WrappedComponent = withRouter(ComponentName);
  export default WrappedComponent;
  

• 可读性更好：类定义和导出分开，结构更清晰，尤其是组件代码比较长的时候，扫一眼就知道最后导出的是什么。

哪种方式更推荐？ #

如果是简单的小型组件，三种都能用，但更建议选第二种或第三种：

• 组件逻辑简单、不需要后续修改导出逻辑的话，第二种写法更紧凑；
• 组件可能需要包装、或者代码量较大时，第三种方式更灵活，可读性也更强。

至于第一种匿名导出，除非是临时写的一次性组件，不然真不建议长期用——调试和复用的麻烦会随着项目变大越来越突出。

内容的提问来源于stack exchange，提问作者Lei Nelissen