Question

我现在正在学习ReactJS。在处理React时我正在使用JSX语法。我知道通过使用JSX，它是一种简洁而熟悉的语法，用于定义具有属性的树结构。哪个让代码更容易理解？

/** @jsx React.DOM */
Var ReactComponent = React.createClass({
    Render: function(){
    Return (

    <ul className = “my-list">
            &ltli&gtFirst Text Content &lt/li&gt
            &ltli&gtSecond Text Content &lt/li&gt
    </ul>

);
}
});

没有JSX语法

Var ReactComponent = React.createClass({
    Render: function(){
        Return(

    var child1 = React.createElement('li', null, 'First Text Content');
    var child2 = React.createElement('li', null, 'Second Text Content');
    var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

    );
    }
    ));

任何人都可以指导我，如果JSX语法很简单并且方便React实现，那么在React中使用非JSX语法组件的情况是什么？

Answer 1

基本上，你个人的选择是采用JSX还是不采用。 JSX在编写React应用程序时非常受欢迎，因为它使代码简洁，可读性更高，当然也可以维护。如果你想在没有JSX的情况下编写React，当然你可以并且没有特殊情况你必须/不能使用JSX。但随着您的应用程序的增长，您会发现由于非JSX语法，您的代码库的复杂性正在增加。

为了更长时间的简单性和可维护性，请使用JSX。对于尝试或学习，事实上，你可以用纯JS编写React。

我应该在ReactJS中何处使用非JSX语法

1 个答案: