Reactjs 在React中导出函数和类组件

我使用的是一个in-VS代码，我不确定使用哪种“类型”的导出。如果导出应位于类/功能组件声明或文件末尾

在下面的代码中，我有2个类组件导出和3个功能组件导出

以下哪一项是推荐的

// ****************************************
// 1. rcc
// ****************************************
import React, { Component } from 'react'

export default class myComponent extends Component {
  render() {
    return (
      <div>

      </div>
    )
  }
}

// ****************************************
// 2. rce
// ****************************************
import React, { Component } from 'react'

class myComponent extends Component {
  render() {
    return (
      <div>

      </div>
    )
  }
}

export default myComponent

// ****************************************
// 3. rfc
// ****************************************
import React from 'react'

export default function myComponent() {
  return (
    <div>

    </div>
  )
}

// ****************************************
// 4. rfce
// ****************************************
import React from 'react'

function myComponent() {
  return (
    <div>

    </div>
  )
}

export default myComponent

// ****************************************
//  5. rafc
// ****************************************
import React from 'react'

const myComponent = () => {
  return (
    <div>

    </div>
  )
}

export default myComponent

//****************************************
// 1. 碾压混凝土
// ****************************************
从“React”导入React，{Component}
导出默认类myComponent扩展组件{
render（）{
返回(
)
}
}
// ****************************************
// 2. rce
// ****************************************
从“React”导入React，{Component}
类myComponent扩展组件{
render（）{
返回(
)
}
}
导出默认myComponent
// ****************************************
// 3. rfc
// ****************************************
从“React”导入React
导出默认函数myComponent（）{
返回(
)
}
// ****************************************
// 4. rfce
// ****************************************
从“React”导入React
函数myComponent（）{
返回(
)
}
导出默认myComponent
// ****************************************
//  5. 皇家空军
// ****************************************
从“React”导入React
常量myComponent=（）=>{
返回(
)
}
导出默认myComponent

我的第二个问题是关于功能组件的——最好（建议）将功能组件编写为箭头函数或经典函数声明

---

非常感谢

如果要导出文件中的多个组件，则只能使用

导出组件名称

（无默认设置）

然后您可以导入为

import {ComponentA,ComponentB,...} from '../directory'

另一种情况是，您只能将文件中的一个组件导出为

export default Class extends ........{} // 

或

两者都是一样的

您可以使用任何名称导入

从“../directory”导入类

Dan Abramov在他的文章中说：

JS提示：无论您喜欢哪种导出样式（默认或命名）或 使用哪种函数样式（箭头或声明），请确保 函数有名字！特别重要的是，使组件与 在DevTools和警告中显示命名

并且，在使用

rce

和

rcc

导出类组件之间：由您决定，但是，正如在文档中所使用的

rce

一样：

import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file

class DangerButton extends Component {
  render() {
    return <Button color="red" />;
  }
}

export default DangerButton;

import React，{Component}来自'React'；
从“./按钮”导入按钮；//从另一个文件导入组件
类DangerButton扩展组件{
render（）{
回来
}
}
导出默认危险按钮；

使用这种样式，您可以轻松地使用，在本例中，我们希望将类组件扭曲为库提供的高阶组件：

import { injectIntl} from "react-intl";

class Button extends React.Component {
  render() {
    const intl = this.props.intl;
    const title = intl.formatMessage({
        id: "button.title",
        defaultMessage: "Hello!"
      });
    return <Button title={title}>...</Button>;
  }
}
export default injectIntl(Button);

从“react intl”导入{injectIntl}；
类按钮扩展了React.Component{
render（）{
const intl=this.props.intl；
const title=intl.formatMessage({
id:“按钮.标题”，
默认消息：“你好！”
});
回来
}
}
导出默认injectIntl（按钮）；

在使用功能组件和类组件之间：请参阅，功能组件更易于编写和测试，现在使用React的钩子，您可以在功能组件中使用状态。有关类组件，请阅读文档。

可能的副本

import { injectIntl} from "react-intl";

class Button extends React.Component {
  render() {
    const intl = this.props.intl;
    const title = intl.formatMessage({
        id: "button.title",
        defaultMessage: "Hello!"
      });
    return <Button title={title}>...</Button>;
  }
}
export default injectIntl(Button);