javascript – React.createClass与ES6箭头功能

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

module.exports = MyOtherComponent;

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

export default MyComponent;

第二个代码是一个无状态功能组件,并且是用于定义组件作为道具功能的新语法/模式.这是在React v0.14中引入的.

您可以在官方的React博客,here上,关于官方的React文档,here以及Stackoverflow文档,了解更多信息.

有什么区别？

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

一个重要的事情要注意的是功能组件就是这个功能.这不是一个班.因此,没有全球这个对象.这意味着当你做一个渲染时,你基本上是创建一个ReactComponent的一个新实例,因此这些JavaScript对象通过一些全局的这种方式可以互相通信.这也使得使用状态和任何生命周期方法是不可能的.

>我的应用程序如何从中受益？

性能
当您使用无状态功能组件时,React非常聪明,可以省略所有“传统”生命周期方法,这样做可以提供相当多的优化. React团队表示,他们计划在未来进一步优化内存分配并减少支票数量.

适应性
因为我们只是在谈论一个函数(而不是一个类),所以我们不必担心状态,生命周期方法或其他依赖关系.给定参数,该函数将始终给出相同的输出.因此,无论我们想要什么,都很容易适应这样的组件,这也使测试更容易.

鼓励最佳做法
反应通常与MVC模式的V进行比较,因为它意在创建视图.创建组件的“传统”方法使得很容易将业务逻辑(例如,状态或引用)“隐藏到真正应该只处理渲染逻辑的组件中.他们鼓励懒惰和写臭臭的代码.然而,无状态功能组件使得几乎不可能采取这样的捷径和力量更好的方法.

>我应该什么时候使用另一个？

通常,尽可能推荐使用新模式！如果只需要一个渲染方法,但没有生命周期的方法或状态,则使用此模式.当然,有时您需要使用状态,在这种情况下,您可以使用传统模式.

Facebook建议在呈现静态表示组件时使用无状态组件.那么,如果需要某种状态,只需将它们包装在一个有状态的组件中,就可以通过使用它的状态来管理它们,并将这些状态发送给无状态组件.