创建 React 组件时，我应该使用函数式组件、React.createClass 还是扩展 React.Component？答案

【问题标题】：When creating React components should I use functional components, React.createClass or extends React.Component?创建 React 组件时，我应该使用函数式组件、React.createClass 还是扩展 React.Component？
【发布时间】：2017-02-25 10:33:06
【问题描述】：

我对 React 很陌生，并且已经阅读了很多关于它的内容。我遇到了三种不同的方法来创建组件：

功能组件：

const Hello = ({world}) => {
  return (
    <div>{"Hello" + world}</div>
  );     
}

React.createClass（工厂）：

const Hello = React.createClass({
  render: function() {
    return <div>{"Hello" + this.props.world}</div>
  }
});

ES6 类扩展

class Hello extends React.Component {
  render() {
    return (
      <div>{"Hello" + this.props.world}</div>
    );
  }
}

除了显而易见的功能组件没有任何状态与它耦合并且可能是一种更实用的组件方法之外，我为什么要使用不同的方法？

在 React 文档中，他们使用了所有三种方法。 Stack Overflow 的一些文章建议使用 Class 方法，然后一些建议使用 Factory 方法。

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

建议对无状态组件使用函数式。

如果您正在使用 ES6+/TypeScript 代码，建议使用 React.Component 扩展。 React Native 仅支持这种类型的组件创建。

React.createClass 用于 ES5。

浏览器将很快得到全面支持，Facebook 建议使用React.Component instead of React.createClass 和functional for stateless。

编辑

Facebook 添加了deprecation warning to React.createClass in React 15.6.0 并指示用户改用create-react-class。

【讨论】：

但Facebook也推荐使用functional
他们建议对那些不需要保持状态且不需要生命周期方法（onComponentDidMount、shouldComponentUpdate 等）的组件使用功能无状态组件跨度>
我猜这 link 解释了它。尽量使用功能组件（未来会有性能优化）。这是推荐的。当组件中需要本地状态或生命周期挂钩时，请使用 ES6 类语法。

【解决方案2】：

据我所知，当您只需要创建呈现逻辑组件时，建议使用功能组件。对于具有任何逻辑的组件，我们使用 React.createClass() 之类的方法。

有两种方法：

首先，您创建通用组件，然后将其划分为表示逻辑和业务逻辑。

第二，你可以一起创建它们。

小心！在划分这些组件时，您的业务逻辑必须呈现您的表现逻辑！

如需更多练习，请参阅 codecademy

上的教程

【讨论】：