提问者:小点点

反应createClass与ES6箭头函数


我是一个新的反应,并试图得到一个语法处理。

我正在React 15环境中开发(使用React starterify模板),并且一直在使用下面版本2中的语法,但是,我在Facebook的React页面中找到的大多数示例和教程都是版本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;

共2个答案

匿名用户

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

你可以在官方的React博客上阅读更多关于它的信息,在这里,在官方的React文档上,在这里。

这些组件的行为就像只定义了渲染方法的React类。由于没有为功能组件创建组件实例,因此添加到其中的任何引用的计算结果都将为null。功能组件没有生命周期方法,但您可以设置。属性类型。defaultProps作为函数的属性。

此模式旨在鼓励创建这些应该包含大部分应用的简单组件。将来,我们还将能够通过避免不必要的检查和内存分配来针对这些组件进行性能优化。

>

  • 有什么区别

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

    需要注意的一件重要事情是,一个功能组件就是一个函数。这不是一门课。因此,没有全局这个对象。这意味着,当您进行渲染时基本上是在创建ReactComponent的新实例,从而排除了这些javascript对象通过某个全局This相互通信的可能性。这也使得不可能使用状态和任何生命周期方法。

    >

    适应性
    因为我们只讨论函数(而不是类),所以不需要担心状态、生命周期方法或其他依赖关系。给定参数,函数将始终提供相同的输出。因此,我们可以很容易地将这些组件适配到我们想要的任何地方,这也使得测试变得更容易。

    使用React的无状态功能组件,可以轻松地对每个组件进行隔离测试。不需要模拟、状态操纵、特殊库或复杂的测试工具。

    鼓励最佳实践
    React经常被比作MVC模式的V,因为它是用来创建视图的。创建组件的“传统”方式使得很容易将业务逻辑(例如使用状态引用)“侵入”到真正应该只处理渲染逻辑的组件中。他们鼓励懒惰和编写难闻的代码。然而,无状态的功能组件几乎不可能采取这种快捷方式并强制采用更好的方法。

    >

  • 我什么时候应该使用一个而不是另一个?

    一般来说,建议尽可能使用新模式!如果您只需要一个呈现方法,但不需要生命周期方法或状态,请使用此模式。当然,有时您确实需要使用state,在这种情况下,您可以使用传统模式。

    Facebook建议在呈现静态表示组件时使用无状态组件。然后,如果需要某种状态,只需将它们包装在有状态组件中,通过使用其'state并向无状态组件发送props来管理它们。

  • 匿名用户

    根据反应15.5添加。0,反应。createClass将被弃用。他们建议您转到ES2015类或使用箭头功能。

    当React最初发布时,并没有用JavaScript创建类的惯用方法,所以我们提供了自己的:React。创建类。

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

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