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模板）开发，并且在下面的VERSION 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?

VERSION 1

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

module.exports = MyOtherComponent;

VERSION 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 was introduced in React v0.14.

您可以在官方的React博客 这里文档， 此处 ，以及Stackoverflow文档， here

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

这些组件的行为就像一个React类，只有一个render
方法被定义。由于没有为
功能组件创建组件实例，所以添加到任何一个的ref都将被归零。
功能组件没有生命周期方法，但您可以设置
.propTypes 和 .defaultProps 作为功能的属性。

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

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).

    需要注意的一个重要事情是功能组件只是那个 - 一个函数。这不是一个班。因此，没有全局这个对象。这意味着，当您执行 render 时，您基本上创建了一个新的 ReactComponent 实例，因此离开这些JavaScript对象通过一些全局这个来相互通信的可能性。这也使得使用状态，并且任何生命周期方法都不可能。

    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 amount of checks.

    适应性 < br>
    因为我们只是在谈论一个函数（而不是一个类），我们不需要担心 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.

    鼓励最佳做法 br>
    反应经常与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 forces the better approach.

    
    

    • 我使用另一个？

      
      
      

      通常，尽可能推荐使用新的模式！如果您只需要一个 render 方法，但没有生命周期方法或状态，请使用此模式。当然，有时你需要使用 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建议在呈现静态演示组件时使用无状态组件。然后，如果需要某种状态，只需将其包含在有状态组件中，即可使用$ code状态并发送道具到无状态组件。

    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屋！