哪些语法更适合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> 
    ); 
    } 
});

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

来源

2017-01-21 Hiromu Masuda

有没有 “更好” 的方式本身。一个是ES6语法和另一个ES5语法。它们完全相同，但ES6需要一个特殊的译码器 - 所以它取决于你使用的是什么版本。前者（ES6）很受欢迎，并提供类别和方法，但有其缺点，例如没有自动绑定。 – Li357

你可以看看：http://stackoverflow.com/questions/30668464/react-component-vs-react-createclass –

谢谢。我不知道ES5和ES6。给定的网址也清楚地回答了我的问题。 –

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

但是对于开发人员来说，ES2015语法更加清晰易读，也因为JSX仍然需要编译，所以您仍然使用babel。你可以去ES2015，但是我建议你在学习ES2015之前有一个稳定的ES5技能。

来源

2017-01-21 05:18:12 CodinCat

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

来源

2017-01-21 06:04:19

谢谢。我不知道ES5，ES6和它们的区别。我对使用ES6感兴趣，但我对js和许多编码人员都很陌生。所以我会使用ES5而不是ES6。

来源

2017-01-21 15:48:08

如果您想回复答案，您应该使用注释。 – CodinCat

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

它至少对于OOPS程序员（Java，C++）来说更具可读性。
“这个”上下文的绑定更容易和清晰（使用箭头函数）。
如果您使用let和const关键字，则会污染较少的全局范围。
容易模仿原型继承（在这种情况下扩展React.Component）

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

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

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

来源

2017-01-21 23:48:14

哪些语法更适合React.js的组件

回答

相关问题