React.createClass 与 ES6 箭头函数 [英] React.createClass vs. ES6 arrow function

问题描述

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

I'm new to React and trying to get a handle on syntax.

我正在 React 15 环境中进行开发(使用 react-starterify 模板)并且一直在使用下面版本 2 中的语法，但是，我在 Facebook 的 React 页面中找到的大多数示例和教程都是版本 1.什么是两者之间的区别以及我什么时候应该使用一个而不是另一个?

I'm developing in a React 15 environment (using the react-starterify template) and have been using the syntax in VERSION 2 below, but, most of the examples and tutorials I find in Facebook's React pages are VERSION 1. What's the difference between the two and when should I use the one over the other?

版本 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;

推荐答案

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

The second code is a stateless functional component and is a new syntax/pattern for defining components as a function of props. It was introduced in React v0.14.

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

You can read more about it on the official React Blog, here, on the official React Documentation, here.

这些组件的行为就像一个只有渲染的 React 类方法定义.由于没有为一个组件创建一个实例功能组件，任何添加到一个的引用将评估为空.函数式组件没有生命周期方法，但是你可以设置.propTypes 和 .defaultProps 作为函数的属性.

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.

<小时>

• 有什么不同?

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

  ---

  • What's the difference?

    This pattern is similar to the "traditional" one, except for the fact that you're using simple functions instead of methods defined in a class. This can be useful when you want to extract functions out of the class (e.g for readability and cleanliness sake).

    需要注意的一件重要事情是，一个功能组件就是——一个功能.这不是一个班级.因此，没有全局 this 对象.这意味着当你在做一个 render 时，你基本上是在创建一个 ReactComponent 的新实例，从而排除了这些 javascript 对象相互通信的可能性通过一些全局this.这也导致无法使用 state 和任何生命周期方法.

    One important thing to note is that a functional component is just that - a function. It's not a class. As such, there's no global this object. This means that when you're doing a render you're basically creating a new instance of a ReactComponent, thus leaving out the possibility for these javascript objects to communicate with each other via some global this. This also makes the use of state and any life-cycle methods impossible as a consequence.

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

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

    • How does my app benefit from it?

      Performance
      When you're using stateless functional components, React is clever enough to omit all "traditional" life-cycle methods, which turns out to be providing a fair amount of optimizations. The React team has stated that they are planning to implement further optimizations in the future for memory allocations and reducing the number of checks.

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

    Adaptability
    Because we're only talking about a function (and not a class), we don't need to worry about state, life-cycle methods, or other dependencies. Given the parameters, the function will always give the same output. As such, it's very easy to adapt such components wherever we want, which turns out to also make testing easier.

    借助 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 进行比较，因为它用于创建视图.创建组件的传统"方式使得将业务逻辑(例如使用 state 或 ref)侵入"到真正应该只处理渲染逻辑的组件中变得容易.他们鼓励懒惰和编写臭代码.然而，无状态的功能组件几乎不可能采取这样的捷径并强制采用更好的方法.

    Encourages best practices
    React is often compared to the V of the MVC pattern because it's meant for creating views. The "traditional" ways of creating components make it easy to "hack in" business logic (e.g with state or ref) into components that really should only handle render logic. They encourage laziness and writing smelly code. However, stateless functional components make it nearly impossible to take such shortcuts and force the better approach.

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

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

    • When should I use the one over the other?

      Generally, using the new pattern is recommended whenever possible! If you only need a render method, but no life-cycle methods or state, use this pattern. Of course, sometimes you do need to use state, in which case you're fine using the traditional pattern.

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

  Facebook recommends using stateless components whenever rendering static presentational components. Then, if some kind of state is needed, simply wrap those in a stateful component to manage them by using its' state and sending down props to the stateless components.

  这篇关于React.createClass 与 ES6 箭头函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！