在创建React组件时，我应该使用功能组件，React.createClass还是扩展React.Component？

Question

我对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方法。

Answer 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。

Answer 2

据我所知，建议您在需要创建表示逻辑组件时使用功能组件。对于具有任何逻辑的组件，我们使用smth，如 React.createClass（）。

有两种方法可以做到：

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

第二个，您可以同时创建它们。

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

有关更多练习，请参阅 codecademy

上的教程