【react框架】体验第一个react例子，认识并学会写JSX

庞囧

已于 2023-01-30 23:03:40 修改

阅读量412

点赞数 2

分类专栏： react框架文章标签： react.js javascript 学习

于 2021-07-03 20:31:24 首次发布

本文链接：https://blog.csdn.net/pagnzong/article/details/118444577

版权

react框架专栏收录该内容

18 篇文章 4 订阅

订阅专栏

文章目录

前言
第一个react例子
react为什么提供了jsx写法
语法规则
其他补充
- 如何实现v-show与v-if
- jsx中不推荐定义函数

前言

没react介绍，懒得记哈哈。

如果会vue，学起来难度就减少一些。

知识点的学习来源于B站尚硅谷的系列教学视频，已投币哈哈，后面文章的记录就不再提及了。

以下用原生以cdn的方式引入react在线js文件，这样立马就能体验到react。

第一个react例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 1 引入react核心库，这里采用压缩后的 -->
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.production.min.js"
    ></script>
    <!-- 2 引入react-dom，用于支持react操作DOM，也采用压缩后的 -->
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
    <!-- 3 引入babel，用于将jsx转为js（目前太高版本的babel有不支持react的问题，所以用低一些的版本） -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel">
      /* 此处一定要写babel */
      //1.创建虚拟DOM
      const VDOM = (
        <h1>Hello,React</h1>
      ); /* 此处一定不要写引号，因为不是字符串，是react提供的jsx写法 */
      //2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"));
    </script>
  </body>
</html>

react为什么提供了jsx写法

什么是jsx

JavaScript XML，react定义的一种类似于XML的JS扩展语法，JS + XML本质是React.createElement(component, props, ...children)方法的语法糖。

XML：简单来讲就是一种用于存储和传输数据的格式，很像html，因为格式中有很多浪费空间的写法，于是后来有了JSON格式。XML现在还有使用需求。

需要babel转译

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行，只要用了JSX，都要加上type="text/babel", 声明需要babel来处理。这是原生代码的注意事项。在react工程中会集成babel做处理。

提升写代码效率

知道jsx后，来看看为啥react提供jsx的写法，不用原生js，举个对比例子：

jsx实现：

<script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM, document.getElementById('test'))
</script>

js实现：

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

实现同样一个嵌套元素，js写法显得非常麻烦，所以react提供的jsx的写法，让开发更加便捷，这是原因之一；

提升渲染效率

简单认识虚拟dom

react的虚拟dom和真实dom什么区别，可以打印上面的例子：

console.log('虚拟DOM',VDOM);
console.log('真实DOM',document.getElementById('test'));

在这里插入图片描述
可以看到咱们写的JSX首先被转换成虚拟DOM：

本质是Object类型的对象（一般对象）
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。中间一层转换初看好像性能会影响，但当DOM的数量越来越多时，通过底层的diff算法，优势就会体现出来，后面文章会讲解。
从书写的角度来说，jsx就是用来简化创建虚拟DOM

所以，jsx先被转换成虚拟DOM，然后最终才转换成真实的DOM。

语法规则

一开始从vue转过来可能会不习惯，写多了就好了。

要在()里写jsx

个人感觉这个()就是高数babel，里面是jsx，快过来转义。

<script type="text/babel" >
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
</script>

JS表达式时要用{}，里面必须返回东西

const myId = "abox";
const myData = "HeLlo";
const data = ['Angular','React','Vue']
<script type="text/babel" >
	const VDOM = ( 
	<div>
		<h1 id={myId.toLowerCase()}>
			{myData.toLowerCase()}
		</h1>
		<ul>
			{
				data.map((item,index)=>{
					return <li key={index}>{item}</li> // 循环出来的需要加个key
				})
			}
		</ul>
	</div>
	)
</script>

{} 中不能放入js语句，要放入js表达式，两者的区别是：

JS表达式：能产生一个值，都可以用个变量去接到数据const x = ，例如：

a 一个变量
a+b
demo(1) 有返回值
arr.map() 有返回值
function test () {} 返回整个函数

JS语句(代码)：就理解为和表达式相反的，不会返回一个数字，例如：

if(){}
for(){}
switch(){case:xxxx}

要是实在想写js语句可以这样：

<div>
  {(()=>{
    switch (i) {
        case 0:
          return <p/>
        case 1:
          return <span/>
        default:
          return null
      }
  })()}
</TabPane>

说白了就是执行一个函数，并且这个函数要返回东西。

总结下，就是在{}中写的js一定要返回东西（这样就不用记什么js表达式、js语句的概念）。

jsx的注释也要借助{}符号，例如 {/* */}，在jsx项目里注释快捷键会自动生成，编辑器会自动处理。

怎么给标签绑定函数也是用的{}，具体看【react框架】认识各种组件类型以及一些需要了解的函数概念

类名用className

<script type="text/babel" >
	const VDOM = ( 
		<h2 className="title">
			<p className={aticveColor}>牛的</p>
        </h2>
	)
</script>

内联样式用 style={{key:value}}

其实就是往里面写对象

<script type="text/babel" >
	const VDOM = ( 
		<h2 style={{ color: "white", fontSize: isSmall ? "12px" : "16px" }}>
        </h2>
	)
</script>

只有一个根标签

和vue的template一样。

标签必须闭合

这必须的

标签首字母意义

若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

其他补充

如何实现v-show与v-if

这是应该是vue用户第一次玩react都会问的问题。

{ isFlag && <div>123</div> } // v-if

<div style={{display: isFlag ? 'block': 'none'}}>123</div> // v-show

jsx中不推荐定义函数

什么叫定义函数，首先正常绑定事件是：

fn = () => {}
render() {
  return <div onClick={this.fn}>
}

而定义函数是在绑定事件的时候，先定义一个函数

fn = () => {}
render() {
  return <div onClick={()=>{this.fn}}>
}

因为：

jsx会被频繁执行，相应的render函数也会被频繁执行
每次渲染都会去定义函数，页面复杂后开支大

但是：

当功能稍微复杂一点的时候，这种写法不可避免
现在个人电脑配置已经足够支撑这种小开支，个人认为没必要刻意不写这种定义函数

庞囧

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【react框架】体验第一个react例子，认识并学会写JSX

没react介绍，懒得记哈哈。如果会vue，学起来难度就减少一些。知识点的学习来源于B站尚硅谷的系列教学视频，已投币哈哈，后面文章的记录就不再提及了。以下用原生以cdn的方式引入react在线js文件，这样立马就能体验到react。JavaScript XML，react定义的一种类似于XML的JS扩展语法，JS + XML本质是方法的语法糖。XML：简单来讲就是一种用于存储和传输数据的格式，很像html，因为格式中有很多浪费空间的写法，于是后来有了JSON格式。XML现在还有使用需求。
复制链接

扫一扫

专栏目录