React JSX

由于通过React.createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

React使用 JSX 来替代常规的JavaScript，JSX 可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。React不一定非要使用JSX，但它有以下优点：

JSX 执行更快，因为它在编译为JavaScript代码后进行了优化
它是类型安全的，在编译过程中就能发现错误
声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
jsx语法中一定要有一个顶级元素包裹，否则编译报错，程序不能运行

在项目中尝试 JSX 最快的方法是在页面中添加这个 <script> 标签，引入解析jsx语法的babel类库，注意后续的script标签块中使用了jsx语法，则一定要申明类型 type="text/babel"，否则babel将不进行解析jsx语法。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hell world</title>
</head>

<body>
  <!-- 用于内容显示容器 挂载点 -->
  <div id="app"></div>

  
  <!-- react核心类库 -->
  <script src="./js/react.development.js"></script>
  <!-- dom操作 -->
  <script src="./js/react-dom.development.js"></script>
  <!-- 解析jsx语法的兼容库 -->
  <script src="./js/babel.min.js"></script>
  
  <script type="text/babel">
    const app = document.querySelector('#app')
    // 如果是单行则不需要小括号，多行需要使用小括号括起来
    const vnode = (<div>
      <dl>
        <dt>标题1</dt>
        <dd>新闻1</dd>
        <dd>新闻2</dd>
      </dl>
      <dl>
        <dt>标题2</dt>
        <dd>新闻3</dd>
        <dd>新闻4</dd>
      </dl>
    </div>)
    // 把虚拟dom转为真实的dom并挂载到页面中
    ReactDOM.render(vnode, app)

    // 虚拟dom
    // const el = React.createElement
    /* const vnode = el(
      'div',
      null,
      el('h1', { id: 100 }, 'hello world'),
      el('h1', { id: 100 }, 'hello world'),
    ) */

    /* const vnode = el(
      'div',
      null,
      el('dl', null, 
        el('dt',null,'标题1'),
        el('dd',null,'新闻1'),
        el('dd',null,'新闻2'),
      ),
      el('dl', null, 
        el('dt',null,'标题2'),
        el('dd',null,'新闻3'),
        el('dd',null,'新闻4'),
      ),
    )  */
    // // 把虚拟dom转为真实的dom并挂载到页面中
    // ReactDOM.render(vnode, app)


  </script>


</body>

</html>

posted on 2021-02-25 17:48 Tsunami黄嵩粟阅读(67) 评论(0) 编辑收藏举报