1. 首页
  2. 问题
  3. React.createClass与ES6箭头函数
小编典典

React.createClass与ES6箭头函数

reactjs

我是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;

阅读 311

收藏
2020-07-22

共1个答案

小编典典

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

您可以在官方的React Blog，
此处 的官方React文档，
此处了解更多信息 。

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

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

  • 有什么不同？

这种模式与“传统”模式类似，不同之处在于您使用的是简单函数而不是类中定义的方法。当您要从类中提取函数时（例如，出于可读性和清洁性考虑），这可能很有用。

需要注意的重要一件事是功能组件就是 功能
。这不是一堂课。因此，没有全局this对象。这意味着当您执行a时，render您基本上是在创建a的新实例ReactComponent，从而排除了这些javascript对象通过某种global相互通信的可能性this。因此，这也使得state不可能使用任何生命周期方法。

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

性能
当您使用无状态功能组件时，React非常聪明，可以省略所有“传统”生命周期方法，事实证明，该方法提供了大量的优化。React团队已经表示，他们计划在将来实现进一步的优化，以进行内存分配并减少检查次数。

适应性
因为我们只在谈论一个函数（而不是一个类），所以我们不必担心state，生命周期方法或其他依赖项。给定参数，该函数将始终提供相同的输出。这样，很容易在任何地方调整这些组件，这也使测试更加容易。

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

鼓励最佳实践
React通常被与MVC模式的 V
进行比较，因为它是用于创建视图的。创建组件的“传统”方式使将业务逻辑（例如通过state或ref）“侵入”
真正只应处理渲染逻辑的组件变得容易。他们鼓励懒惰并写臭代码。但是，无状态功能组件几乎不可能采取这样的捷径并强制采用更好的方法。

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

通常，建议尽可能使用新模式！如果只需要一个render方法，而没有生命周期方法或state，则使用此模式。当然，有时候您 确实
需要使用state，在这种情况下，您可以使用传统模式。

Facebook建议在呈现静态表示组件时使用无状态组件。然后，如果需要某种状态，只需将其包装在有状态的组件中，即可通过使用状态并将其state发送props给无状态组件来对其进行管理。

2020-07-22