javascript - React.createClass 与 ES6 箭头函数

Question

我是 React 新手，正在尝试掌握语法。

我正在 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;

Answer 1

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

您可以在官方 React 博客 here 上阅读更多相关信息。 ，在官方 React 文档上，here .

These components behave just like a React class with only a render method defined. Since no component instance is created for a functional component, any ref added to one will evaluate to null. Functional components do not have lifecycle methods, but you can set .propTypes and .defaultProps as properties on the function.

This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.

<小时/>

• 有什么区别？

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

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

<小时/>

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

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

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

  With React’s stateless functional components, each component can be easily tested in isolation. No mocking, state manipulation, special libraries, or tricky test harnesses are needed.

  鼓励最佳实践
  React 通常与 MVC 模式的 V 进行比较，因为它旨在创建 View 。创建组件的“传统”方法可以轻松地将业务逻辑(例如使用 state 或 ref)“侵入”到实际上只应该处理渲染逻辑的组件中。他们鼓励懒惰和编写臭代码。然而，无状态功能组件使得几乎不可能采取这种捷径并强制采用更好的方法。

<小时/>

• 什么时候应该使用其中一个而不是另一个？

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

  Facebook 建议在渲染静态展示组件时使用无状态组件。然后，如果需要某种状态，只需将它们包装在有状态组件中，即可通过使用其状态并将 props 发送到无状态组件来管理它们。 p>