要使用哪个ReactJS语法React.createClass或ES6扩展？ [英] Which ReactJS syntax to use; React.createClass or ES6 extends?

问题描述

我是ReactJS的初学者。我在各种网站上学习和研究了很多文件和电子书。我知道ReactJS有两种语法。示例：

  React.createClass（{
 displayName：'Counter'，
 getDefaultProps：function（） {
 return {initialCount：0}; 
}，
 getInitialState：function（）{
 return {count：this.props.initialCount} 
}，
 propTypes：{initialCount：React.PropTypes.number}，
 tick（）{
 this.setState（{count：this.state.count + 1}）; 
}，
 render（）{
 return（
< div onClick = {this.tick}> 
点击：{this.state.count} 
< / div> ; 
）; 
} 
}）; 
  

此版本由ES6编写：

  class Counter extends React.Component {
 static propTypes = {initialCount：React.PropTypes.number}; 
 static defaultProps = {initialCount：0}; 
 
构造函数（道具）{
超（道具）; 
 this.state = {count：props.initialCount}; 
} 
 
 state = {count：this.props.initialCount}; 
 tick（）{
 this.setState（{count：this.state.count + 1}）; 
} 
 
 render（）{
 return（
< div onClick = {this.tick.bind（this）}> 
点击： {this.state.count} 
< / div> 
）; 
} 
} 
  

使用ReactJS更好的方法是什么？但是我发现这些库，github上的应用程序用于执行很多ES6。

解决方案

第二种方法可能是正确的随着Facebook表示他们最终会废弃React.createClass方法，将继续前进。

从 React v0.13发行说明：

我们的最终目标是为ES6类替换React .createClass完全，但是直到我们替换当前的mixin用例并支持该类语言的类属性初始化器，我们不打算弃用React.createClass

我认为第二种方法也使得更容易阅读代码，但这显然是一个更主观的原因。

然而，如所述请注意，ES6格式不支持Mixins，所以如果你需要一个mixin，你需要使用该组件的createClass格式。

Todd Motto的这篇文章React.createClass vs. extends React.Component有som关于两种语法之间的差异的很好的信息。值得一读，讨论这两个语法之间这个关键字的行为是否有所不同。

编辑：一个href =https://stackoverflow.com/a/35060571/1879019> Dan Caragea的帖子下面提供了一些绝对值得肯定的考虑。

第三种方法...

还有第三种定义React组件的方法，称为无状态函数中的/facebook.github.io/react/docs/reusable-components.html#stateless-functionsrel =nofollow noreferrer>通常称为无状态功能组件或无状态功能组件 。这是文档中的示例：

  function HelloMessage（props）{
 return < div> Hello {props.name}< / div> ;; 
} 
  

将组件定义为函数意味着每次都重新创建，所以没有持续的内部状态。这使得组件更容易推理和测试，因为组件的行为对于给定的一组属性（道具）将始终是相同的，而不是由于内部状态的值而从运行到运行的潜在变化。

当使用Redux等独立的状态管理方法时，这种方法效果非常好，并确保Redux的时间行程能够产生一致的结果。功能无状态组件还使执行功能更简单，如撤消/重做。

I'm beginner of ReactJS. I learned and studied a lot of documents and ebooks on various websites. I realize there are two syntaxes for ReactJS. Example:

React.createClass({
  displayName: 'Counter',
  getDefaultProps: function(){
    return {initialCount: 0};
  },
  getInitialState: function() {
    return {count: this.props.initialCount} 
  },
  propTypes: {initialCount: React.PropTypes.number},
  tick() {
    this.setState({count: this.state.count + 1});
  },
  render() {
    return (
      <div onClick={this.tick}>
        Clicks: {this.state.count}
      </div>
    );
  }
});

And this version is written by ES6:

class Counter extends React.Component {
  static propTypes = {initialCount: React.PropTypes.number};
  static defaultProps = {initialCount: 0};

  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }

  state = {count: this.props.initialCount};
  tick() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

What is the better way to use ReactJS? But I found these libraries, application on github used to perform a lot ES6.

解决方案

The second approach is probably the correct one to adopt going forward as Facebook have said they will ultimately deprecate the React.createClass approach.

From the React v0.13 release notes:

Our eventual goal is for ES6 classes to replace React.createClass completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate React.createClass

Personally I think the second approach also makes for easier to read code, but that is obviously a more subjective reason.

However, as stated above, it's important to note that the ES6 format does not support Mixins, so if you need a mixin you need to use the createClass format for that component.

This post "React.createClass versus extends React.Component" by Todd Motto has some good information on the difference between the two syntaxes. It's worth reading that for a discussion of how the this keyword behaves differently between the two syntaxes.

Edit: Dan Caragea's post below makes some excellent points that should definitely be considered too.

A third alternative...

There is a also a third way of defining a React component, called 'Stateless Functions' in the React Documentation and often called 'Stateless Functional Components' or 'Functional Stateless Components'. This is the example from the docs:

function HelloMessage(props) {
  return <div>Hello {props.name}</div>;
}

Defining the component as a function means it is effectively created anew each time and so has no ongoing internal state. This makes the component easier to to reason about, and to test, as the component's behaviour will always be identical for a given set of properties (props), rather than potentially varying from run-to-run due the values of the internal state.

This approach works particularly well when using a separate State management approach such as Redux and ensures that Redux's time-travel will produce consistent results. Functional Stateless Components also make implementing features like undo/redo simpler.

这篇关于要使用哪个ReactJS语法React.createClass或ES6扩展？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！