React.Component 与 React.createClass

Posted 2023-02-22

【中文标题】React.Component 与 React.createClass

【英文标题】：React.Component vs React.createClass

【发布时间】：2015-08-20 12:26:14

【问题描述】：

我很困惑组件和反应类之间的区别是什么？

我什么时候在 react 类上使用组件？ 看起来组件是一个类，而 createClass 创建了一个组件。

https://facebook.github.io/react/docs/top-level-api.html

React.Component

这是使用 React 组件定义时的基类 ES6 类。参见 Reusable Components 了解如何使用 ES6 类 做出反应。基类实际提供了哪些方法，请参见 组件 API。

React.createClass

创建一个组件类，给定一个规范。一个组件 实现了一个返回一个孩子的渲染方法。那个孩子 可能具有任意深度的子结构。一件事使 与标准原型类不同的组件是你 不需要给他们打电话。它们是方便的包装器 为您构建支持实例（通过 new）。

【问题讨论】：

请注意，使用一种或另一种语法包含一些注意事项。例如 MyComponent extends React.Component 的情况下不支持 mixins。

我在一些回流示例中看到了这一点，其中一些文件是用组件编写的，一些是用 createClass 编写的。我以前读过你的提示，但这让我想到了这个问题。所以基本上如果我想使用 mixins，我会使用 createClass。如果没有，我可以使用 ES6，对吗？

【参考方案1】：

MyComponent extends React.Component 不支持的唯一 React.createClass 功能是 mixins。

做getInitialState()你可以做：

class MyComponent extends React.Component 
  constructor(props, context) 
    super(props, context);

    // initial state
    this.state = 
      counter: 0
    ;
  

  ...

或者如果你使用像 babel 这样的编译器，你可以得到

class MyComponent extends React.Component 
  state = 
    counter: 0
  

  ...

您可以使用 .bind(this) 显式绑定，而不是 createClass 提供的自动绑定，如上所示，或使用胖箭头 ES6 语法：

class MyComponent extends React.Component 
  onClick = () => 
    // do something
  
  ...

你可以像这样把东西放在构造函数中，而不是把东西放在 componentWillMount 中：

class MyComponent extends React.Component 
  constructor(props, context) 
    super(props, context);

    // what you would have put in componentWillMount
  

  ...

React 文档本身有更多详细信息，但基本上 React.createClass 购买的唯一附加功能是 mixins，但是您可以使用 mixins 完成的任何事情都可以使用上下文和更高阶的组件来完成。

【讨论】：

这应该是一个可以接受的答案。感谢您提供详细和最新的解释。

【参考方案2】：

有两种方法可以做同样的事情。

React.createClass 是一个返回 Component 类的函数。

MyComponent = React.createClass(
  ...
);

React.Component 是一个可以扩展的现有组件。主要在使用 ES6 时有用。

MyComponent extends React.Component 
  ...

【讨论】：

还有更多不同之处。例如 getInitialState() 在 ES6 React.Component 中不存在。

看看下面Lewis C的回答。它解释了差异。

【参考方案3】：

React.createClass - 创建组件类的方法

为了更好地使用 ES6 模块，通过扩展 React.Component，它扩展了 Component 类而不是调用 createClass

两者之间几乎没有区别，

语法： React.createClass：

var MyComponent = React.createClass( );

React.Component：

export default class MyComponent extends React.Component 

getInitialState()： React.createClass： 是的 反应组件： 没有

构造函数（）： React.createClass： 不 反应组件： 是的

propTypes 语法： React.createClass：

var MyComponent = React.createClass(
    propTypes:  
);

React.Component：

export default class MyComponent extends React.Component 
MyComponent.prototypes =  

默认属性： React.createClass：

var MyComponent = React.createClass(
    getDefaultProps():  return  
);

React.Component：

export default class MyComponent extends React.Component 
MyComponent.defaultProps =  

状态： React.createClass：

State changes can be made inside getInitialState() function

React.Component：

State changes can be made inside constructor(props) function

这个： React.createClass：

automatically bind 'this' values.
Ex: <div onClick=this.handleClick></div>
'this' can be accessed by default in handleClick function

React.Component：

whereas here we need to bind explicitly,
Ex: <div onClick=this.handleClick.bind(this)></div>

【讨论】：

感谢所有示例 :) 在 React.Component 中：类似于 MyComponent.defaultProps 我们有选项 MyComponent.defaultState 吗？？

【参考方案4】：

看起来 React 建议我们使用 React.createClass

据我所知

MyComponent extends React.Component不支持getInitialState()

在React.createClass 中使用.bind(this) 你会得到这个

警告：bind()：您正在将组件方法绑定到组件。 React 会以高性能的方式自动为您执行此操作，因此您可以安全地删除此调用。

我认为可能不止这些。

如果有人列出所有React.createClass 功能，那就太好了。

注意：React 目前是 0.14.3

【讨论】：

根据这个来自 v0.13 的 facebook.github.io/react/blog/2015/03/10/react-v0.13.html，他们计划在某个时候从另一个 Our eventual goal is for ES6 classes to replace React.createClass completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate React.createClass. 中删除 React.createClass() 语法

【参考方案5】：

说实话，唯一的区别是 React.createClass 使用 mixins 而新的 ES6 语法没有。

两者都只是语法，选择最适合您的。 React 实际上希望在未来的更新中弃用 React.createClass 以支持 ES6 语法。

因此，我建议您和未来的用户检查这些链接，因为此线程上的大多数答案都是相关的并进行了详细解释。

https://ultimatecourses.com/blog/react-create-class-versus-component

https://www.newline.co/fullstack-react/articles/react-create-class-vs-es6-class-components/

【讨论】：

哦，我明白了，我只是认为这是不必要的重复，因为代码示例和 sn-p 已经在链接的那个页面上。但是感谢您的提示，我将继续执行此操作！