第三章创建虚拟DOM的两种方式和JSX的语法规则

原创已于 2023-03-28 14:49:56 修改 · 449 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js #jsx #虚拟DOM

于 2023-01-05 15:54:21 首次发布

ReactJS 专栏收录该内容

37 篇文章

订阅专栏

博客对比了传统JavaScript和JSX创建DOM的方式。传统JavaScript创建需指定标签名、属性和内容，复杂结构嵌套多、代码冗长且维护难。JSX则直接创建DOM结构，由React渲染，结构清晰、代码简洁。此外，还介绍了JSX的语法规则。

1、传统的javaScript创建方式

调用方法：React.createElement(参数1,参数2,参数3)

参数1：创建的标签的名称——和HTML的标签同名

参数2：标签的属性——如：id等

参数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>Hello React</title>
</head>
<body>
    <!-- 准备好员工“容器” -->
    <div id="app"></div>

    <!-- 引入ReactJS核心库 -->
    <script type="text/javascript" src="../JS/react.development.js"></script>

    <!-- 引入React-DOM核心库，用于操作DOM -->
    <script type="text/javascript" src="../JS/react-dom.development.js"></script>

    <script type="text/javascript">
      // 1、创建虚拟DOM
      const VDOM = React.createElement('h1',{id: 'title'},'Hello React')
      // 2、将虚拟DOM渲染到页面
      ReactDOM.render(VDOM, document.getElementById('app'))
    </script>

</body>
</html>

注意：第二个参数在没有内容并且第三个参数有值的时候，第二个参数也要用{}来占位，不能省略。

2、jsx的创建方式

jsx的方式比较简单，直接创建DOM结构，最后交给react去渲染即可。

<!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>Hello React</title>
</head>
<body>
    <!-- 准备好员工“容器” -->
    <div id="app"></div>

    <!-- 引入ReactJS核心库 -->
    <script type="text/javascript" src="../JS/react.development.js"></script>

    <!-- 引入React-DOM核心库，用于操作DOM -->
    <script type="text/javascript" src="../JS/react-dom.development.js"></script>

    <!-- 引入Babel，用于编译jsx为js -->
    <script type="text/javascript" src="../JS/babel.min.js"></script>

    <!-- 此处类型为babel -->
    <script type="text/babel">
      // 1、创建虚拟DOM
      const VDOM = <h1>Hello React</h1> // 此处不能加引号，因为不是字符串
      // 2、将虚拟DOM渲染到页面
      ReactDOM.render(VDOM, document.getElementById('app'))
    </script>

</body>
</html>

3、比较明显的区别

对于复杂的dom结构，js的方式需要方法嵌套，而jsx不需要。
jsx的结构层次分明，而js的方式对于复杂的结构比较混乱，维护较困难。
jsx代码简洁，js方式代码冗长。

4、jsx的语法规则

定义虚拟DOM时，不要写括号
标签中混入JS表达式时要用{}
样式的类名指定不要用class，要用className
内联样式，要用style={{key：value}}的形式去写
只有一个根标签
标签必须闭合
标签首字母小写，则该标签会转为html中同名元素，若html中无该标签对应的同名元素则报错
若标签首字母大写，react就去渲染对应的组件，若组件没有定义，则报错

<!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>Hello React</title>
  <style>
    .title{
      width: 100%;
      background-color: orange;
    }
  </style>
</head>
<body>
    <!-- 准备好员工“容器” -->
    <div id="app"></div>

    <!-- 引入ReactJS核心库 -->
    <script type="text/javascript" src="../JS/react.development.js"></script>

    <!-- 引入React-DOM核心库，用于操作DOM -->
    <script type="text/javascript" src="../JS/react-dom.development.js"></script>

    <!-- 引入Babel，用于编译jsx为js -->
    <script type="text/javascript" src="../JS/babel.min.js"></script>

    <!-- 此处类型为babel -->
    <script type="text/babel">
      const myId = 'Genius'
      const myData = 'Hello,React'

      // 1、创建虚拟DOM
      const VDOM =(
        <div>
          <h2 className="title" id={myId.toLocaleLowerCase()}>
            <span style={{color:'white'}}>{myData.toLocaleLowerCase()}</span>
          </h2>  
          <input type="0"/>
        </div>
      ) // 此处不能加引号，因为不是字符串
      // 2、将虚拟DOM渲染到页面
      ReactDOM.render(VDOM, document.getElementById('app'))
    </script>

</body>
</html>