react为什么推出了JSX？

相信学习过react的小伙伴对jsx一定不陌生，它是javascript的一种语法扩展，主要应用于react开发中。

那么react为什么在原有js编写上推出jsx呢？用原生js编写代码不好吗？下面我用js和jsx分别编写一段代码，让大家直观的感受一下jsx与js的区别。

特点：jsx允许用户直接在javascript中直接编写HTML代码

1.jsx版本

<!-- 真实dom，用于渲染虚拟dom的工具 -->
    <div id="box"></div>
    <!-- react核心库 -->
    <script type="text/javascript" src="./react.development.js"></script>
    <!-- 支持react操作dom的一个周边库，它一定是要在react.development.js之后引入的 -->
    <script type="text/javascript" src="./react-dom.development.js"></script>
    <!-- 用于将jsx语法转换成js语法的一个库 -->
    <script type="'text/javascript" src="./babel.min.js"></script>

    <script type="text/babel"> //  jsx写法的话，这里需要将type改成babel格式
       // 创建一个虚拟dom
       const VDOM = <h2>哈哈哈，我是一个虚拟dom</h2>
       // 将虚拟dom渲染至页面
       ReactDOM.render(VDOM, document.getElementById('box'))
    </script>

2.js版本

    <div id="box"></div>

    <script type="text/javascript" src="./react.development.js"></script>
    <script type="text/javascript" src="./react-dom.development.js"></script>

    <script type="text/javascript">
        const VDOM = React.createElemt( h2, { id: 'title' }, '哈哈哈，这是一个虚拟dom' )
        ReactDOM.render(VDOM, document.getElementById('box'))
    </script>

对比一下两版代码，可以看到主要区别在图下

那么肯定会有小伙伴有疑问了，对比两版代码，好像用js写的代码量好像还更少了，别着急，我们再来对比一下下面的案例。

假设，我现在需要渲染的dom有多层结构，比如我div下面有一个ul标签，ul标签里面还有一个li标签，li标签里面还有各span标签，那么用jsx来写的优势就出来了，对比一下两版的代码书写：

1.jsx版

    <script type="text/babel">
        const VDOM = (
            <div>
                <ul>
                    <li>
                        <span>我是span标签</span>
                    </li>
                </ul>
            </div>
        )
        ReactDOM.render(VDOM, document.getElementById('box'))
    </script>

2.js版

    <script type="text/javascript">
        const VDOM = React.createElemt(
            div,{id: 'title'},
            React.createElemt(ul, {},
            React.createElemt(li, {},
            React.createElemt(span, {}, '我是span标签')
        )))
        ReactDOM.render(VDOM, document.getElementById('box'))
    </script>

怎么样？看得出区别了吗？当我们的页面结构变得复杂的时候，jsx的优势就体现出来了，我们可以用我们最熟悉的html编写方式去编写我们的虚拟dom，至于他们怎么转换成浏览器能识别的js，不需要我们去操心。想比之下，jsx书写的代码也比js的更直观一些。