我应该在哪里使用 ReactJS 中的非 JSX 语法答案

【问题标题】：Where should I use non-JSX syntax in ReactJS我应该在哪里使用 ReactJS 中的非 JSX 语法
【发布时间】：2016-08-07 00:53:07
【问题描述】：

我现在正在学习 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 语法组件的情况是什么？

【问题讨论】：

标签： reactjs react-jsx

【解决方案1】：

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

只是为了简单性和长期可维护性，请使用 JSX。只是为了尝试或学习，其实你可以用纯 JS 编写 React。

【讨论】：