javascript - React.js 的 Component 哪种语法比较好

Question

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

根据官方文档或者一些教材，我发现有两种表达react代码的方式。但我不知道哪种方式更好。

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 代码(第二个)。

但是对于开发者来说，ES2015的语法更清晰，也更容易写，而且JSX还需要编译，反正你还是用babel吧。你可以直接选择 ES2015，但我建议你在学习 ES2015 之前先掌握扎实的 ES5 技能。