『React-Demos』Demo-02：JSX语法初步了解

 
  
  
   
  
 引言 
 通过上一节的学习，对于react也有了一个基础的认识，那么这节我们将通过俩个demo讲解JSX语法
让大家对于JSX有一个基础的认识和理解
React官网-JSX 简介
 
 demo-02:JSX语法 
 源码：demo02/source
核心代码<body>
<div id="test1"></div>
<div id="test2"></div>
<div>-------------------------分割线-----------------------</div>
<div id="test3"></div>
<script type="text/javascript">
  // 第一种方式：创建虚拟DOM对象
  const h1 = React.createElement(
    'h1',
    { id: 'myTitile', className: 'myClass' },
    'Hello h1标签'
  )
  // 将虚拟DOM对象渲染到页面指定容器中
  ReactDOM.render(h1, document.getElementById('test1'))

  // 用第一种创建方式，在h2标签中创建一个span标签
  const span = React.createElement('span', {}, '第一种方法创建span标签')
  const h2 = React.createElement(
    'h2',
    { id: 'myTitile', className: 'myClass' },
    span,
    span
  )
  // 将虚拟DOM对象渲染到页面指定容器中
  ReactDOM.render(h2, document.getElementById('test2'))
</script>
<script type="text/babel">
  // 第二种方式：创建虚拟DOM对象
  const h3 = (
    <h3 id="myTitle2" className="myClass2">
      <span>第二种方法创建span标签</span>
      <span>第二种方法创建span标签</span>
    </h3>
  )
  // 将虚拟DOM对象渲染到页面指定容器中
  ReactDOM.render(h3, document.getElementById('test3'))

  const id = 'myTitle3';
  const className = 'myClass3';
  const content = '我也是第二种方法创建span标签';
  const myH1 = <h1 id={id} className={className}>
	<span>{content}</span>
	<span>我也是第二种方法创建span标签</span>
	</h1>
 ReactDOM.render(myH1, document.getElementById('test4'))
</script>
</body>
 
小结： 
   第一种方式使用的是 纯JS语法，不用设置type="text/babel"浏览器自动识别，但是缺点也很明显，使用麻烦
第二种方式使用的是JSX语法，需要设置type="text/babel"浏览器才可以识别，使用方便，推荐使用（react中也是使用这种语法）
JSX语法： 
     以<开头代码，如果是html同名标签，会解析成HTML同名元素，如果不是，就会当做组件解析
以｛开头代码，里面内容会当做js代码解析
JSX语法作用：用来创建虚拟DOM对象
 
 
 
  
 总结： 
 多敲、多记、多查（面向谷歌编程）
原创不易，希望可以帮助到可爱的你，喜欢的话请对我素质三连吧，☛点赞、✌关注、转发✍
 
 
拎壳儿跑的蜗牛
发布了29 篇原创文章 · 获赞 45 · 访问量 7万+
私信关注
『React-Demos』Demo-02：JSX语法初步了解

引言

demo-02:JSX语法

总结：

猜你喜欢
