【React】JSX 语法及原理

已于 2022-04-18 16:46:24 修改
阅读量720 收藏 4
点赞数 2
分类专栏： React 全家桶 文章标签： react jsx
于 2021-05-18 16:42:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677671/article/details/116988955
版权

文章目录

一、JSX 原理分析

  • 要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构
<div class='app' id='appRoot'>
  <h1 class='title'>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>
  • 上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示：
{
  tag: 'div',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}
  • 但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。

于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
	render(){
		return (
			<div className='app' id='appRoot'>
        	<h1 className='title'>欢迎进入React的世界</h1>
        	<p>React.js 是一个构建页面 UI 的库</p>
      	</div>
		)
		
	}
}
ReactDOM.render(
	<App />,
	document.getElementById('root')
)
  • 编译之后将得到这样的代码:
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "div",
        {
          className: 'app',
          id: 'appRoot'
        },
        React.createElement(
          "h1",
          { className: 'title' },
          "欢迎进入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

ReactDOM.render(
	React.createElement(App),
  document.getElementById('root')
)
  • React.createElement会构建一个 JavaScript 对象来描述你HTML结构的信息，包括标签名、属性、还有子元素等
// 语法：
React.createElement(
	type,
	[props],
	[...children]
)
  • 所谓的JSX其实就是JavaScript 对象，所以使用React 和JSX的时候一定要经过编译的过程：

JSX → 使用 React 构造组件，bable 进行编译 → JavaScript 对象 → ReactDOM.render() →DOM元素→插入页面

1.1、案例分析

不用 jsx 语法

  • hello world
<!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>Document</title>
</head>
<body>
    <!-- 
        步骤：
        1. 创建渲染容器
        2. 引入相关的外部js文件
        3. 创建react组件
     -->
     <!-- 1. 创建渲染容器 -->
     <div id="root"></div>
     <!-- 
         2. 引入需要的外部js文件，注意文件的先后顺序
         先react.js 后react-dom.js
      -->
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script>
        // 3. 创建react组件
        // 获取需要渲染的位置对应的dom
        const container = document.getElementById("root");
        // 创建具体的渲染内容
        // 语法：React.cerateElement(标签名,属性对象,子内容)
        // 细节：子内容还支持套娃
        // 例如：React.cerateElement(标签名,属性对象,React.cerateElement(标签名,属性对象,内容))
        const content = React.createElement("div",{},"hello world")
        // 正式渲染组件
        // 语法：ReactDOM.render(虚拟dom,挂载点)
        ReactDOM.render(content,container);
      </script>
</body>
</html>

在这里插入图片描述

使用 jsx 语法

  • JSX 重构 Hello world
<!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>Document</title>
</head>
<body>
    <!-- 
        步骤：
        1. 创建渲染容器
        2. 引入相关的外部js文件
        3. 创建react组件

        JSX语法使用的要求：
        1. 需要在原基础上，引入一个babel的js文件
        2. 并且该文件的导入要在react的两个文件之前
        3. 之所以导入babel，原因是浏览器不认识jsx语法
        4. 需要babel.js将jsx语法转化为浏览器认识的语法
        5. 如果我们希望某个script标签被babel解析，需要给script标签加上 type="text/babel"
     -->
     <!-- 1. 创建渲染容器 -->
     <div id="root"></div>
     <!-- 
         2. 引入需要的外部js文件，注意文件的先后顺序
         babel.min.js（要在最前）
         然后react.js 最后react-dom.js
      -->
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script type="text/babel">
        // 3. 创建react组件
        // 获取需要渲染的位置对应的dom
        const container = document.getElementById("root");
        // 创建虚拟节点
        // jsx语法就是在js中写html语法
        // 针对换行的jsx语法，编辑器在格式化的时候自动加()
        // 另外，切记，不要给jsx语法加引号
        const vNode=(
            <div>
                <div>
                    <div>hello world</div>
                </div>
            </div>
        );
        ReactDOM.render(vNode,container);
      </script>
</body>
</html>

1.2、作用总结

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

React 使用 JSX 来替代常规的 JavaScript ， JSX 可以理解为 JavaScript 语法扩展。
他里面的标签申明要符号 XML 规范要求（必须要有一个唯一的根元素）

在写jsx语法的时候需要注意，如果对应dom有多个层次，建议给整体添加小括号。
这样的话允许通过格式化插件将代码格式化成多行，有助于清晰的看清dom的层次结构
  • React 不一定非要使用 JSX
  • 但是他有以下的优点
1. JSX 执行更快，因为他在编译为 JavaScript代码后进行了优化
2. 它的类型安全，在编译过程中就能发现错误
3. 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率
4. JSX 语法中一定要有一个 顶级元素包裹（XML一大特性，否则编译报错，程序不能运行）

二、JSX 语法使用

2.1、插值表达式

  • 在 JSX 语法中，要用 JS 代码写到{ }中，所有标签必须闭合
  • 注意：在 jsx 语法中不支持//注释形式以及<!---->注释形式，只能使用{/* */}注释形式。
<!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>Document</title>
</head>
<body>
    <!-- 
        插值表达式：
        1. 含义与vue中概念是一样的
        2. 常见的支持：
            直接输出
            支持三元
        3. 不要把vue的习惯带过来，vue插值是双层大括号，react的插值是单层大括号
        注意点：在jsx语法中，不支持“HTML”简括号形式的注释，也不支持“js”双斜杠形式的注释，其注释形式只有“{/* 注释内容 */}”
     -->
     <div id="root"></div>
     <!-- 
         引入需要的外部js文件，注意文件的先后顺序，不能变
      -->
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script type="text/babel">
        let bool = true;
        let num1 = 15;
        let num2 = 29;
        let msg = '一段文本内容';
        // 1. 获取挂载点
        const el = document.getElementById("root");
        // 2. jsx语法
        const vNode=(
            <div>
                {/*注释写法*/}
                <div>直接插值：{msg}</div>
                <div>三元运算：{bool ? 'yes':'no'}</div>
                <div>js表达式：{num1 +num2}</div>
                <div></div>
            </div>
        );
        // 3. 渲染
        ReactDOM.render(vNode,el);
      </script>
</body>
</html>
  • 运行结果：

在这里插入图片描述

2.2、属性绑定

  • 相当于：Vue2的v-bind指令
<!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>Document</title>
</head>
<body>
    <!-- 
        属性绑定：
        1. 在react中没有类似vue中的v-bind的语法糖
        2. 动态属性绑定，react插值要求不能给属性值加引号，加了就不解析
        3. 在属性值的位置直接使用插值表达式：
        4. 对于html内容，不能使用插值，如果需要解析则必须通过属性绑定，绑定dangerouslySetInnerHTML={{__html:content}},直接输出html内容比较危险，存在xss攻击
     -->
     <div id="root"></div>
     <!-- 
          引入需要的外部js文件，注意文件的先后顺序
      -->
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script type="text/babel">
        // 数据初始化
        let url = "https://www.baidu.com";
        let style = {color:'red',backgroung:'black'};
        let content = '<a href="https://www.baidu.com">百度</a>';
        // 1. 获取dom
        const el = document.getElementById("root");
        // 2. 产生dom
        const vNode=(
            <div>
                <div>给a标签绑定一个ls地址：<a href={url}>百度</a></div>
                <div style={style}>给div绑定style</div>
                <div dangerouslySetInnerHTML={{__html:content}}></div>
                
            </div>
        );
        // 3. 渲染
        ReactDOM.render(vNode,el);
      </script>
</body>
</html>
  • 运行结果：
    在这里插入图片描述

需要注意，在 react 中，JavaScript 代码部分里面如果涉及到 DOM 的 class 属性操作，请不要直接使用 class，原因是这个 class 是 es6 里面的关键词，react里面需要使用 className 进行替换。

<div className={cls}></div>

2.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>Document</title>
</head>
<body>
    <!-- 
        循环操作：
        1. 循环操作在react中支持两种写法
            直接循环：基本不用（没有办法对数据显示效果解析处理，有种数组元素拼接在一起形成字符串的感觉）
            循环并处理：经常使用（推荐）
        2. 在写循环的时候，注意代码的分割，通过大括号对分割
        3. 在循环的时候，每个子元素必须有一个唯一的key属性
     -->
     <div id="root"></div>
     <!-- 
         2. 引入需要的外部js文件，注意文件的先后顺序
         先react.js 后react-dom.js
      -->
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script type="text/babel">
        // 准备一个数组
        let arr = ['a','b','c','d'];
        // 获取dom
        const el = document.getElementById("root");
        // 产生虚拟dom
        const vNode=(
            <div>
                <div></div>
                {/*第一种循环方式（了解）：直接循环*/}
                {arr}
                <hr/>
                {/*第二种循环方式（常用）：通过js的api循环*/}

                <ul>
                    {
                        arr.map((item,index) => {
                            return <li key={index}>{item}</li>
                            }
                        )
                    }   
                </ul>

            </div>
        );
        // 3. 渲染
        ReactDOM.render(vNode,el);
      </script>
</body>
</html>
  • 运行结果：
    在这里插入图片描述
  • 注意：
上面的 map() 不能用 forEach() 代替：
因为 forEach()返回的是 undefined，map()返回的是一个新数组
总结：在jsx语法中循环不能使用 forEach() 和 for()
一颗不甘坠落的流星
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jsx原理解析及虚拟dom初理解
gercke的博客
10-12 682
jsx本质 bable.js作用 浏览器不能直接解析jxs代码，需要bable转译为纯JS代码才能运行 只要用了JXS，都要加上type=“text/bable”，声明需要bable来处理 JSX 代表 Objects 实际上，jsx 仅仅只是 React.createElement(component, props, …children) 函数的语法糖。 Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。 const element = (
react JSX 原理解析
weixin_36725266的博客
07-30 733
what？ JSX是对js语法的扩展，使我们可以用类似xml方式描述视图 why? 执行快、类型安全、开发简单快速 how? babel-loader会预编译jsx为 React.createElement(type, props, …chilren) ...
ReactJS实战之JSX详解
最新发布
m0_74530944的博客
05-02 906
这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！！《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门，即可获取！这段代码会被转换成一段合法的JavaScript：三元形式还可用来有条件地渲染整个节点：{condition?Hello JSXnull}这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！！
简单了解一下jsx的本质与原理
badbaby52906的博客
11-03 244
jsx本质是语法糖。通过转化成React.createElement('div',{class:'active'},[子元素])的函数调用，生成虚拟dom树，最后生成真实dom树。
JSX的样式处理
m0_63400611的博客
08-21 286
通过引入外部css文件,并且通过类名的形式将导入的类名赋给元素的class属性,从而添加样式。1. 行内样式 -- style。
JSX 实现原理浅析
weixin_30540691的博客
04-19 814
JSX 实现原理浅析 本文旨在解析 JSX 语法写法的来由，如何一步步的从 DOM 字符窜拼接、事件绑定、方法实现，到我们的 JSX 封装。 本文以点赞、取消的功能来阐述（文中代码以 ES6 写法阐述），该例基本包括了【状态改变】、【事件绑定】、【方法封装】等基本要求。 一、传统方法实现 HTML 结构： <body> <div class='wrapper'...
React JSX语法使用案例
04-21
在`.babelrc`中，我们通常会配置`@babel/preset-react`预设，以便Babel能正确处理JSX语法。 `webpack.config.js`是Webpack的配置文件，Webpack是一个模块打包工具，用于处理前端资源。在React应用中，Webpack可以将...
vim-jsx-improve：React jsx的语法和缩进插件
02-06
修复了React jsx文件的语法突出显示和缩进的问题。 与xml.vim配合良好 该插件没有依赖性，包含了jsx和javascript所需的所有代码。 注意：如果已经安装，您需要禁用vim-javascript插件，我必须更改一些高亮显示组以...
React JSX
12-14
React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。...
vim-jsx-typescript：针对vim和Typescript的React JSX语法突出显示
02-02
**vim-jsx-typescript** 是一个专门为 **Vim** 编辑器设计的插件，旨在为使用 **TypeScript** 开发 **React JSX** 代码的开发者提供强大的语法高亮和增强功能。这个插件结合了 **vim-jsx** 和 **typescript-vim** 的...
JSX语法及特点介绍_v4
04-25
JSX语法简介 React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX简介 JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来...
vue 渲染函数 & JSX
01-07
渲染函数 render 通过渲染函数渲染组件 Vue.component('myComponent', { render (h) { // createElement return h( 'div', // HTML tag、自定义组件、异步组件 { // 属性对象 attrs: { // 标签属性 id: 'wrap' }, class: { // 类名 'my-com': true }, props: { // DOM 属性，prop
【React系列】JSX核心语法和原理
川峰的博客
01-02 1173
在ES6之前，我们通过function来定义类，但是这种模式一直被很多从其他编程语言（比如Java、C++、OC等等）转到JavaScript的人所不适应。原因是，大多数面向对象的语言，都是使用class关键字来定义类的。而JavaScript也从ES6开始引入了class关键字，用于定义一个类。ES6之前定义一个Person转换成ES6中的类如何定义呢？类中有一个构造方法，当我们通过new关键字调用时，就会默认执行这个构造方法。构造方法中可以给当前对象添加属性。
React中的JSX原理渐析
油墨香^-^的博客
03-08 252
目前来说，我们已经基本实现了和这两个方法。只不过目前来说仅仅针对于源生DOM节点进行了处理。在React中我们知道会有各种各样我们自己定义的组件，接下来我们会一步一步去看看这些组件的渲染流程。之前对于React中关于你好，以现在的逻辑去渲染这段代码还存在疑惑。之后会梳理总结下debugger的详细流程。~~梳理完上述流程后，会展开谈一谈React中关于class组件的渲染。class至此我们已经完成了基础的的渲染。
浅谈JSX语法糖
wgh2820777641的博客
04-18 709
浅谈JSX语法糖 jsx简单觉得来说就是在javascript里面使用html文档。 JSX是一种语法糖，全称：javascript xml。 JSX语法不是必须使用的，但是因为使用了JSX语法之后会降低我们的开发难度，故而这样的语法又被成为语法糖。 看下面的DOM结构： <div class='app' id='appRoot'> <h1 class='title'>...
Vue2 + JSX使用总结
热门推荐
东扯葫芦西扯瓜——前端小菜鸟的博客
05-28 1万+
什么是JSX 摘自 React 官方： 它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。 Vue 什么时候应当使用JSX 这里说的是应当，而不是必须。因为在绝大多数情况下，模板语法都能胜任，只不过写起来看着不太好看而已。或者使用模板语法，那写起来恐怕不是一般的长，而且阅读会费劲很多。 下面我们来看下应当使用JSX而
【React】在React中 JSX 代码如何转成 JS 代码？
pingan8787
10-24 1566
一、介绍 写 React 代码的朋友应该都是直接写 JSX 代码，JSX 让我们可以在 JS 中直接写 HTML 代码，可阅读性较高。本章节主要介绍 JSX 通过 babel 转换后会生成什么样式代码。 二、案例 div 标签 <div></div> 通过 babel 转换后： React.createElement("div", null); 带 id 属性的 ...
React - JSX原理
a9874561328的博客
02-16 259
1 要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构 比如下列代码 <div class='app' id='appRoot'> <h1 class='title'>欢迎进入React的世界</h1> <p> React.js 是一个帮助你构建页面 UI 的库 </p> </div> 上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示(c
React基础 ——JSX语法
Tuness的博客
02-24 167
** jsx的介绍 ** JSX 是 React 的核心组成部分，它使用 XML 标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以粗暴的理解为在 JS 中编写与 XML 类似的语言，一种定义带属性树结构（DOM结构） 的语法，它的目的是通过编译器将这些标记编译为标准的JS语言。 ** jsx原理 ** React.createElement(tag,{attrs},content) JSX...
react jsx写法
08-28
React JSX 是一种在 JavaScript 中编写类似 HTML 的语法，它允许我们在组件中直接编写 HTML 结构。以下是 React JSX 的常见写法： 1. 使用标签表示元素：可以使用标签来表示 React 元素，例如 `<div>` 表示一个 `<div>` 元素。 ```jsx <div>Hello World!</div> ``` 2. 使用花括号插入 JavaScript 表达式：可以在标签内使用花括号 `{}` 插入 JavaScript 表达式。 ```jsx <div>{2 + 2}</div> ``` 3. 使用属性传递数据：可以在标签上使用属性来传递数据给组件。 ```jsx <MyComponent name="John" age={25} /> ``` 4. 使用 className 替代 class：由于 `class` 是 JavaScript 的保留字，所以在 JSX 中要使用 `className` 来添加 CSS 类名。 ```jsx <div className="container"></div> ``` 5. 使用注释：可以使用花括号和双斜线来添加注释。 ```jsx <div> {/* 这是一个注释 */} </div> ``` 注意：JSX 是一种语法糖，最终会被转译为普通的 JavaScript 代码运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值