Javascript 什么时候应该将react组件声明为函数而不是类？

我不确定何时将react组件声明为简单的独立函数，而不是常规的

类myComponent extends Component

语法。要使用React文档中的示例（位于）：

以下内容被称为“组件”

函数boilingDecision（道具）{
如果（道具摄氏度>=100）{
返回水会沸腾。
；
}
返回水不会沸腾。
；
}

虽然它看起来只是一个函数，并且像任何常规的旧函数一样声明。然后在下一段中，以下内容也被定义为组件，看起来更像我认为的组件的外观：

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />
        <BoilingVerdict
          celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
}

类计算器扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
this.state={温度：'}；
}
手变（e）{
this.setState（{temperature:e.target.value}）；
}
render（）{
恒定温度=此.state.temperature；
返回(
以摄氏度为单位输入温度：
);
}
}

---

这两个“组成部分”有什么区别？如果第一个示例不是从组件类继承的，并且不是使用

React.createClass

创建的，那么它实际上是一个组件吗？我希望有人能解释这一区别，因为我在文档中找不到任何答案。

当您不需要使用并且组件没有状态时，可以将组件声明为函数。组件生命周期方法，如

componentWillMount（）

和

componentDidMount（）

只能在组件是扩展

Component

的类时使用，因为它依赖于内部组件状态，即

this.setState（{…}）

。功能组件，也称为无状态组件，因此它们无法以相同的方式维护本地状态

就我个人而言，我总是尝试编写功能组件，因为它们可以说更容易测试，因为它们具有使用道具和返回

ReactElement

实例树的特性。我将仅在以下情况下将组件转换为基于类的组件：

• 需要管理自己基于表示的状态，即不适用于整个应用程序的状态
• 受益于生命周期方法，这是一种通过受限的重新渲染来提高性能的方法
• 需要通过引用子元素

  ReactElement

  s或DOM节点

---

Facebook上有两个补充文档可以很好地解释这一点：

---

TL；DR“组件”主要负责表示一些DOM。根据应用程序的组织方式，组件可能需要也可能不需要维护自己的状态，或者可以访问生命周期方法，如

componentDidMount

或

render

。如果您确实需要这些功能，那么您的组件应该是继承自

React.component

的类。否则，您可能不需要将组件编写为普通的旧函数。
如果更倾向于使用函数方式，而不是创建可以使用高阶组件实用程序调用的类，则它具有HOC
小例子：

const NewComponent = lifecycle({
      componentWillMount() {
        this.props.onEnterScreen();
      },
})(Component)

---

差别似乎很明显；一个人有状态，一个人没有。React docs声明功能（“功能”）组件既没有状态事件，也没有生命周期事件（至少包括用户代码）；在我看来，如果您有一个将采用生命周期方法的组件，那么您应该只制作一个普通组件，而不是求助于HOC。

const NewComponent = lifecycle({
      componentWillMount() {
        this.props.onEnterScreen();
      },
})(Component)