在React中导出功能和类组件

Question

我在VS Code中使用的是ES7 React / Redux / GraphQL / React-Native代码片段 ，我不确定导出使用哪种“类型”。 如果要导出，则应在类/功能组件声明或文件末尾。

在下面的代码中，我有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

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

非常感谢！

Answer 1

丹·阿布拉莫夫（Dan Abramov）在推文中说：

JS技巧：无论您喜欢哪种导出样式（默认或命名）或使用哪种函数样式（箭头或声明），请确保您的函数具有名称！ 对于React组件在DevTools中显示的名称和警告尤其重要。

而且，使用之间rce和rcc导出类组件：这取决于你不过来决定，在CRA文档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;

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

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的useState钩子，您就可以在功能组件中使用状态。 对于类组件，请阅读React.Component文档。

Answer 2

如果要导出文件中的多个组件，则仅需使用export ComponentName （无默认值）。

然后您可以导入为

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

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

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

要么

export default Class; // at the end of file

两者都一样。

您可以使用任何名称导入

import Class from '../directory'