React —— React 中的JSX语法
文章目录
- 一、什么是React
- 二、React 的特点
- 三、React第一个实例
- 四、JSX语法
- 1、 定义虚拟DOM时不要用引号。
- 2、标签混入JS表达式需要用{ }
- 3、className样式的类名
- 4、内联样式
- 5、只有一个根标签
- 6、标签必须闭合
- 7、 标签首字母
- 8、 js表达式
一、什么是React？
- React 是一个用于构建用户界面的 JAVASCRIPT 库。
- React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
- React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
- React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
二、React 的特点
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
高效的原因
·使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。
·DOM Diffing算法,最小化页面重绘
说明：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效`减少渲染次数`。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
三、React第一个实例
那么React该如何使用呢？下面就通过一个小案例来学习吧！
1、虚拟DOM
概念
- · 本质时Object类型的对象(一般对象)
- · 虚拟DOM比较'轻',真实DOM比较'重',因为虚拟DOM是React内部在用,无需真实DOM上那么 多的属性(只有React需要的属性)
- · 虚拟DOM最终会被React转化为真实DOM,呈现在页面上
2、JSX创建虚拟DOM
准备容器
<div id='root'></div>引入react 文件
<!-- react核心库 --><script src="../JS/react.development.js"></script><!-- react扩展库 操作dom元素--><script src="../Js/react-dom.development.js"></script><!-- 把jsx语法转js --><script src="../Js/babel.min.js"></script>创建虚拟DOM
const V_DOM=React.createElement('h1',{id:'title'},'hello react!'); ReactDOM.render(V_DOM,document.getElementById("root"));//渲染到页面
四、JSX语法
JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此.应该说JSX因React框架而流行,但也存在其他的实现.只要你够厉害,甚至能在单片机上实现(当然你要自己写出它的实现方式)。
1、 定义虚拟DOM时不要用引号。
错误形式：
let V_DOM = ‘<h1>hello,react</h1>’正确形式：
let V_DOM = <h1>hello,react</h1>
2、标签混入JS表达式需要用{ }
举例：
let str = "hello,react!";let V_DOM = (<h1><span>{str}</span></h1>)
3、className样式的类名
样式的类名指定不要用class,要用className
let V_DOM = (<h1 className='demo'><span>我是文本内容</span></h1>)
4、内联样式
要用style={{key:value}}的形式(`双{}代表对象,单{}代表表达式`)去写。
let V_DOM = (<h1 className='demo'><span style={{color:'blue',fontSize:'30px'}}>我是文本内容</span></h1>)ReactDOM.render(V_DOM,document.getElementById("hello"));
5、只有一个根标签
错误形式：
let V_DOM = (<h1 className='demo'><span style={{color:'blue',fontSize:'30px'}}>我是文本内容</span></h1><p>我是段落</p>)正确形式：
// 定义虚拟dom const V_DOM =(<div><p style={{color:'green',fontSize:'20px'}}>姓名:{realname}</p><p className="myage">年龄:{age}</p></div>)ReactDOM.render(V_DOM, document.getElementById('root'));
6、标签必须闭合
举例：<input type=”text” name=’myname’ value=’’></input>
7、 标签首字母
·若`小写字母开头`,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则`报错`。
·若`大写字母开头`,react就去渲染对应组件,若组件没有定义,则`报错`。
8、 js表达式
一个表达式会产生一个值,可以放在任何一个需要值的地方，例如：
- · a
- ·a+b
- ·demo(1)
- ·arr.map(
- )
- ·function test(){}
语句:不能放在创建虚拟dom语句中
- · if(){}
- · for(){}
- · switch(){}
四、小练习
需求： 遍历数组信息并输出到页面上
<!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>渲染人员数据</title>
</head><body><div id="root"></div><script src="../JS/react.development.js"></script><script src="../JS//react-dom.development.js"></script><script src="../JS/babel.min.js"></script><script type="text/babel">// 自定义人员数据const persons = [{ realname: 'Jack', age: 18 },{ realname: 'Lucy', age: 20 },{ realname: 'Tom', age: 21 },{ realname: 'John', age: 25 }]// 定义虚拟domconst V_DOM = (<ul>{persons.map((item)=>{return <li>姓名:{item.realname},年龄:{item.age}</li>})}</ul>)ReactDOM.render(V_DOM, document.getElementById('root'));</script>
</body></html>React —— React 中的JSX语法相关推荐
- jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？
在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
- 【jsx开发Vue】在Vite+Vue3.0中使用jsx语法开发。
所有内容首发微信公众号[WEB前端李志杰],未经允许禁止转载! 可能大家要问我为什么要使用jsx语法开发Vue? 首先要说明的是:个人认为jsx语法和模板语法并不存在优劣之分,在实际项目中应该优先选择 ...
- React学习笔记一 JSX语法组件
JSX语法 1.标签不能添加引号,换行用括号包裹,并且只有一个根标签 const H1 = <h1>标题</h1> const Div = (<div><h1 ...
- React 学习笔记：JSX 语法
JSX JSX 是 JavaScript XML 的简写,表示了在 JavaScript 中书写 XML 格式的代码.它可以让我们在 React 中创建元素更加简单,并且保留 HTML 代码的结构更直 ...
- React框架简介（JSX语法、组件、虚拟DOM渲染）
目录 React框架 为什么要学习React React特点 React核心 JSX语法 语法详解 React开发过程 实际DOM 虚拟DOM React组件 函数组件 类组件 虚拟DOM渲染过程 R ...
- React飞行日记(三) - JSX语法的渲染流程
Jsx的渲染流程 在React.js中, 其为我们提供了一种JSX语法, 能够直接在JS文件中进行虚拟DOM代码的编写, 并在编译后转换成真实DOM渲染到页面中, 那么React是怎么把JSX的虚拟D ...
- React基本使用、jsx语法介绍
文章目录 1. 第一个 react 应用 2. jsx 2.1 jsx 介绍 2.2 使用 jsx 重构页面显示结构 2.3 jsx 表达式 2.4 jsx 动态属性赋值 2.5 jsx 列表渲染 1 ...
- jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到 我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
- 在Vue 中使用 JSX 语法
Vue 中构建虚拟DOM可以直接使用渲染函数构建虚拟Dom,正常情况下用render函数的参数createElement方法构建虚拟Dom的语法比较繁琐,更方便的是用更接近于模板的JSX语法. Vue ...
最新文章
- 如何拿到高薪数据分析师offer？从精准解读一篇招聘信息开始！
- Android JNI入门第五篇——Android.mk分析
- centos下yum安装mysql5.7_CentOS下yum安装mysql5.7
- 6.LibSVM核函数
- win7 下的open live writer代码插件
- 智能水杯设计方案_智能水杯盖方案开发
- springboot创建项目2 开发环境的搭建
- unity3d Android多渠道,Unity For Android多渠道SDK接入解决方案
- 156万在校大学生！中国高校第一城诞生
- 软件测试python测试步骤_软件测试员必备基础：3分钟带你入门自动化测试！
- 3D模型贴图算法归纳讨论，以及OpenGL渲染器中的数据格式——篇1：模型展开算法与UV贴图
- Win11磁盘碎片整理在哪？Win11机械硬盘磁盘碎片整理方法
- ai黑白棋_AI的黑白镜
- java 情感分析_Alink中文情感分析示例（Java版本）
- 验证方法学覆盖率(一):代码覆盖率
- yp集之p8简单数论
- 【scrapy爬虫】最新sogou搜狗搜索 机智操作绕过反爬验证码（搜狗微信公众号文章同理）
- 计算机相近专业职称,计算机专业技术职称有哪些？
- 第八课.TPAMI2021年多篇GNN相关工作
- 详解央行数字货币和数字票据交易平台架构(多图)