Question

我是React的新手并试图掌握语法。

我正在React 15环境中开发（使用react-starterify模板）并且一直在使用下面的VERSION 2中的语法，但是，我在Facebook的React页面中找到的大多数示例和教程都是VERSION 1.什么是两者之间的区别，何时应该使用另一个？

版本1

var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        // some list
      </ul>
    );
  }
});

module.exports = MyOtherComponent;

版本2

const MyComponent = () => (
  <ul>
    // some list
  </ul>
);

export default MyComponent;

Answer 1

第二个代码是无状态功能组件，是一种新的语法/模式，用于将组件定义为props的函数。它是在React v0.14中引入的。

您可以在官方React文档here上的官方React博客上了解更多相关信息。

这些组件的行为就像一个只有渲染的React类   方法定义。由于没有为a创建组件实例   功能组件，添加到其中的任何引用将评估为null。   功能组件没有生命周期方法，但您可以设置   .propTypes和.defaultProps作为函数的属性。

这种模式旨在鼓励创造这些简单的   应该包含大部分应用的组件。在里面   未来，我们还能够进行特定的性能优化   通过避免不必要的检查和记忆来对这些组件   分配。

有什么区别？

此模式类似于“传统”模式，除了您使用简单函数而不是类中定义的方法。当你想要从类中提取函数时（例如为了可读性和清洁度），这可能很有用。

需要注意的一件重要事情是功能组件就是 - 功能。这不是一个班级。因此，没有全局this对象。这意味着，当您执行render时，您基本上创建了ReactComponent的新实例，从而忽略了这些javascript对象通过某些全局{{1}相互通信的可能性。 }}。这也使this和任何生命周期方法的使用成为不可能的结果。

我的应用如何从中受益？

<强>性能
当您使用无状态功能组件时，React足够聪明，可以省略所有“传统”生命周期方法，结果证明提供了相当多的优化。 React团队表示，他们计划在未来进一步优化内存分配并减少支票数量。

<强>适应性
因为我们只讨论函数（而不是类），所以我们不需要担心state，生命周期方法或其他依赖项。给定参数，函数将始终提供相同的输出。因此，很容易在任何我们想要的地方调整这些组件，结果也使测试变得更容易。

使用React的无状态功能组件，可以轻松地单独测试每个组件。不需要嘲笑，状态操纵，特殊库或棘手的测试工具。

鼓励最佳做法
React通常与MVC模式的 V 进行比较，因为它用于创建视图。创建组件的“传统”方法使得很容易将业务逻辑（例如state或state）“入侵”到真正应该只处理渲染逻辑的组件中。他们鼓励懒惰和编写臭代码。然而，无状态功能组件使得几乎不可能采取这种快捷方式并迫使更好的方法。

我应该何时使用另一个？

通常，建议尽可能使用新模式！如果您只需要ref方法，但没有生命周期方法或render，请使用此模式。当然，有时你做需要使用state，在这种情况下你可以使用传统模式。

Facebook建议在渲染静态表示组件时使用无状态组件。然后，如果需要某种状态，只需将它们包装在有状态组件中，通过使用“state并将state发送到无状态组件来管理它们。”

Answer 2

要添加，从react 15.5.0开始，不推荐使用React.createClass。他们建议您转到ES2015课程或使用箭头功能。

当React最初发布时，没有惯用的方法在JavaScript中创建类，所以我们提供了自己的：React.createClass。

后来，作为ES2015的一部分，类被添加到语言中，因此我们添加了使用JavaScript类创建React组件的功能。与功能组件一起，JavaScript类现在是在React中创建组件的首选方法。

对于现有的createClass组件，我们建议您将它们迁移到JavaScript类。

React.createClass与ES6箭头函数

2 个答案:

有什么区别？

我的应用如何从中受益？

我应该何时使用另一个？