React.createClass与ES6箭头功能

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类一样,只定义了一个render方法.由于没有为功能组件创建组件实例,因此添加到其中的任何ref将评估为null.功能组件没有生命周期方法,但您可以在函数上设置 .propTypes和.defaultProps作为属性.

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

• 有什么不同？

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

  需要注意的一件重要事情是功能组件只是一个功能.这不是一个班级.因此,没有全球this对象.这意味着当你正在做一个render你基本上创建一个新的a实例时ReactComponent,这就忽略了这些javascript对象通过一些全局相互通信的可能性this.这也使得使用state和任何生命周期方法都不可能.

• 我的应用如何从中受益？

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

  适应性
  因为我们只谈论一个函数(而不是一个类),所以我们不需要担心state生命周期方法或其他依赖关系.给定参数,函数将始终提供相同的输出.因此,很容易在任何我们想要的地方调整这些组件,结果也使测试更容易.

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

  鼓励最佳实践
  React通常与MVC模式的V进行比较,因为它用于创建视图.创建组件的"传统"方法使得很容易"破解"业务逻辑(例如,使用state或ref)成为真正应该只处理渲染逻辑的组件.他们鼓励懒惰和编写臭代码.然而,无状态功能组件使得几乎不可能采取这种快捷方式并迫使更好的方法.

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

  通常,建议尽可能使用新模式!如果您只需要一个render方法,但没有生命周期方法或者state,请使用此模式.当然,有时你也需要使用state,在这种情况下,你没事使用的传统格局.

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