React中JSX存在的意义

JSX存在的意义有三个：方便、方便、还是方便。

常规情况下，创建一个虚拟DOM，并将其渲染到页面上，会使用以下代码的形式：

<script type="text/babel">/* 此处标签必须指明 text/babel 否则不识别JSX语法 */
    
  // 1. 创建虚拟DOM
  const VDOM = <h1>hello react</h1> //此处不需要加引号，这是JSX语法

  // 2. 渲染虚拟DOM
  ReactDOM.render(VDOM, document.getElementById('root'))
</script>

其中，const VDOM = <h1>hello react</h1>就是使用JSX语法创建一个虚拟DOM，text/babel指明使用babel将JSX语句翻译为浏览器能识别的JS语句。

1. 使用JS创建虚拟DOM

在React中，创建虚拟DOM的方式不止JSX一种，还可以使用原生的JS实现同样的效果：

<script>//此处不需要使用text/babel

  // 1. 创建虚拟DOM    创建按虚拟DOM的原生JS方法
  const VDOM = React.createElement('h1', {
    
    }, 'hello react')

  // 2. 渲染虚拟DOM
  ReactDOM.render(VDOM, document.getElementById('root'))
</script>

React.createElement方法接受三个参数：

需要创建的标签名，比如h1
标签的属性，比如id、title等
标签的内容，比如hello react

2. 原生JS方式存在的问题

如果只是简单的hello react应用，使用JSX和原生JS并没有太大的区别，但是如果创建的虚拟DOM存在多层嵌套，就会非常的繁琐，如下：

<script>//此处不需要使用text/babel

  // 1. 创建虚拟DOM    创建按虚拟DOM的原生JS方法
  const VDOM = React.createElement('div', {
    
     class: 'container' },
                 React.createElement('h1', {
    
     class: 'title' },
                   React.createElement('span', {
    
     class: 'hello' }, 'hello react')))

  // 2. 渲染虚拟DOM
  ReactDOM.render(VDOM, document.getElementById('root'))
</script>

如果使用JSX的方式实现同样的效果：

 <script type="text/babel">//原生js此处不需要使用text/babel

  const VDOM = (
    <div className='container'>
      <h1 className='title'>
        <span className='hello'>hello react</span>
      </h1>
    </div>
    ) //多行JSX语句可以使用小括号括起来实现换行缩进

        // 2. 渲染虚拟DOM
        ReactDOM.render(VDOM, document.getElementById('root'))
    </script>

JSX相比于原生JS，语法更加简洁，支持标签缩进，通俗易懂。

注意： JSX语法和HTML稍有不同，例如上例中的className属性

实际上，babel最终就会将JSX翻译为原生的JS格式，二者在执行上没有本质的区别，只是由babel代替人工做了繁琐的代码编写工作。

3. 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS创建虚拟DOM</title>
</head>

<body>
    <!-- 1. 准备好一个容器 -->
    <div id="root"> </div>

    <!-- cdn引入方式 -->
    <!-- 1. 引入React核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 2. 引入react-dom扩展库，用于操作DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 3.  引入Babel，将JSX转为JS -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- 5. 编写React代码 -->
    <script type="text/babel">//原生js此处不需要使用text/babel

        // 1. 创建虚拟DOM    创建按虚拟DOM的原生JS方法
        // const VDOM = React.createElement('div', { class: 'container' },
        //     React.createElement('h1', { class: 'title' },
        //         React.createElement('span', { class: 'hello' }, 'hello react')))

        const VDOM = (
            <div className='container'>
                <h1 className='title'>
                    <span className='hello'>hello react</span>
                </h1>
            </div>
        )

        // 2. 渲染虚拟DOM
        ReactDOM.render(VDOM, document.getElementById('root'))
    </script>
</body>
</html>

02-React中JSX存在的意义

React中JSX存在的意义

1. 使用JS创建虚拟DOM

2. 原生JS方式存在的问题

3. 完整代码

猜你喜欢