在创建React组件时，我应该使用功能组件吗?创建或扩展React.Component

When creating React components should I use functional components, React.createClass or extends React.Component?

本文关键字：组件 React 创建 Component 功能 扩展 我应该      更新时间：2023-09-26

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

功能组件: 

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

反应。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方法。

对于无状态的组件，建议使用function。

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

React.createClass用于ES5。

浏览器很快就会有完整的支持，Facebook建议使用React。组件而不是React。createClass和使用无状态函数。

编辑

Facebook向React添加了弃用警告。在React 15.6.0的createClass，并指出用户使用create-react-class代替。

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

有两种方法:

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

第二个，你可以在旁边创建它们。

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

更多练习参见codecademy

相关文章：