Question

在学习React.js时我有一个问题。

根据官方文件或一些教科书，我发现有两种表达反应代码的方法。但我不知道哪条路更好。

class SampleComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 'react'
    };
  }

  render() {
    return (
      <p> Hello {this.state.value} !! </p>
    );
  }
}

另一个是这个。

var SampleComponent = React.createClass({
  getInitialState: function() {
    return {
      value: 'react'
    };
  },

  render: function() {
    return (
      <p> Hello {this.state.value} !! </p>
    );
  }
});

有人可以解释哪个是什么，哪个更好？感谢。

Answer 1

两者都很好。第一个是ES2015（或ES6）代码，一些旧版浏览器不支持它，因此通常人们使用babel将代码编译为ES5代码（第二个）。 / p>

但是对于开发人员来说，ES2015语法更清晰，更容易编写，因为JSX仍然需要编译，无论如何都要使用babel。您可以参加ES2015，但在学习ES2015之前，我建议您拥有扎实的ES5技能。

Answer 2

我不会重申版本之间的差异，但第二个示例提供了更好的可读性 - 非常直观。如果您仍在学习React或与可能仍在学习的其他人一起工作，ES5会让每个人都开心。

Answer 3

谢谢。我不知道ES5，ES6和他们的区别。我对使用ES6感兴趣，但我是js的新手，所以很多编码员都是。所以我将使用ES5而不是ES6。

Answer 4

类符号是Es6格式，它有很多好处。

至少对于OOPS程序员（Java，C ++）来说，它更具可读性。
＆＃34;这个＆＃34;的绑定上下文更容易和清晰（使用箭头功能）。
如果使用let和const关键字，则污染较少的全局范围。
轻松模拟原型继承（在本例中扩展React.Component）

最重要的是，它使用Es6模块来组织代码。

class SampleComponent extends React.Component {
          constructor() {
            super();
            this.state = {
              value: 'react'
            };
          }

          render() {
            return (
              <p> Hello {this.state.value} !! </p>
            );
          }
        }

对于React.js的Component，哪种语法更好

4 个答案: