一：简介

1.1 概念

1.2 特点

1.3 高效的原因

二：虚拟DOM

2.1 概念

2.2 创建虚拟DOM

JS创建虚拟DOM

准备容器

创建虚拟DOM

说明：

三：JSX语法

3.1 定义虚拟DOM时不要用引号。

3.2 标签混入JS表达式需要用{}

3.3 className样式的类名

3.4 内联样式

3.5 只有一个根标签

3.6 标签必须闭合

3.7 标签首字母

3.8 js表达式

四、 JSX练习

遍历数组并输出到页面上

一：简介

1.1 概念

React是用于构建用户界面的JavaScript库（只关注视图），起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

1.2 特点

声明式编程：React 使创建交互式 UI ，当数据变动时 React 能高效更新并渲染合适的组件。

组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

Css html js 封装一个组件

高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

灵活：无论你现在使用什么技术栈，都可通过引入 React 来开发新功能。

1.3 高效的原因

·使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。

·DOM Diffing算法,最小化页面重绘

说明：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效`减少渲染次数`。

二：虚拟DOM

2.1 概念

· 本质时Object类型的对象(一般对象)

· 虚拟DOM比较'轻',真实DOM比较'重',因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性(只有React需要的属性)

· 虚拟DOM最终会被React转化为真实DOM,呈现在页面上

2.2 创建虚拟DOM

JS创建虚拟DOM

<!-- 引入react核心库  --><script src="js/react.development.js"></script><!-- 扩展库 操作DOM --><script src="js/react-dom.development.js"></script><!-- 把jsx语法转js --><script src="js/babel.min.js"></script>

准备容器

<div id=”hello”></div>

创建虚拟DOM

const V_DOM=React.createElement('h1',{id:'title'},'hello react!');ReactDOM.render(V_DOM,document.getElementById("hello"));//渲染到页面

JSX创建虚拟DOM

let V_DOM = <h1>hello,react!</h1>ReactDOM.render(V_DOM,document.getElementById("hello"));

说明：

· You are using the in-browser Babel transformer. Be sure to precompile..... babel的一个警告：你正在使用浏览器翻译babel，请确定不在生产环境中。

· jsx 就是让创建虚拟DOM变得更有层次，更简洁。

三：JSX语法

JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此.应该说JSX因React框架而流行,但也存在其他的实现.只要你够厉害,甚至能在单片机上实现(当然你要自己写出它的实现方式)。

3.1 定义虚拟DOM时不要用引号。

//错误形式：
let V_DOM = ‘<h1>hello,react</h1>’;

3.2 标签混入JS表达式需要用{}

//举例：let str  = "hello,react!";let V_DOM = (<h1><span>{str}</span></h1>)

3.3 className样式的类名

//样式的类名指定不要用class,要用classNamelet V_DOM = (<h1 className='demo'><span>我是文本内容</span></h1>)

3.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"));

3.5 只有一个根标签

//错误形式：let V_DOM = (<h1 className='demo'><span style={{color:'blue',fontSize:'30px'}}>我是文本内容</span></h1><p>我是段落</p>)

3.6 标签必须闭合

//举例：
<input type=”text” name=’myname’ value=’’></input>

3.7 标签首字母

·若`小写字母开头`,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则`报错`。

·若`大写字母开头`,react就去渲染对应组件,若组件没有定义,则`报错`。

3.8 js表达式

一个表达式会产生一个值,可以放在任何一个需要值的地方

· a

·a+b

·demo(1)

·arr.map(

)

·function test(){}

语句:不能放在创建虚拟dom语句中

· if(){}

· for(){}

· switch(){}

四、 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><div id="root"></div><!-- 引入react核心库 --><script src="js/react.development.js"></script><!-- 引入操作dom的扩展库 --><script src="js/react-dom.development.js"></script><!-- 引入babel来解析jsx语法 --><script src="js/babel.min.js"></script><script type="text/babel">const person=[{realname:'张三',age:'18'},{realname:'李四',age:'20'}]const V_DOM=(<ul>{person.map((item,index)=>{return <li key={index}>姓名：{item.realname}年龄：{item.age}</li>})}   </ul>)ReactDOM.render(V_DOM,document.getElementById('root'))</script>
</body>
</html>

猿创征文｜【React 一】入门学习相关推荐

猿创征文｜【深度学习前沿应用】文本生成
猿创征文|[深度学习前沿应用]文本生成作者简介:在校大学生一枚,C/C++领域新星创作者,华为云享专家,阿里云专家博主,腾云先锋(TDP)成员,云曦智划项目总负责人,全国高等学校计算机教学与产业实践 ...
猿创征文|【算法入门必刷】数据结构-栈（二）
[算法入门必刷]算法入门-数据结构-栈(二) 前言算法入门刷题训练题目AB2: 栈的压入.弹出序列题目分析理论准备题解小结
猿创征文 |【算法入门必刷】数据结构-栈（三）
[算法入门必刷]算法入门-数据结构-栈(三) 前言算法入门刷题训练题目AB3:有效括号序列题目分析理论准备题解小结
猿创征文 |【算法入门必刷】数据结构-栈（五）
[算法入门必刷]数据结构-栈(五) 前言算法入门刷题训练 AB5:点击消除题目分析理论准备题解小结
猿创征文 |【算法入门必刷】数据结构-栈（四）
[算法入门必刷]算法入门-数据结构-栈(四) 前言算法入门刷题训练 AB4:逆波兰表达式求值题目分析理论准备题解小结
猿创征文｜在校大学生学习UI设计必备工具及日常生活中使用的软件
嗨,大家好,我是异星球的小怪同志一个想法有点乱七八糟的小怪如果觉得对你有帮助,请支持一波. 希望未来可以一起学习交流. 我是一名在校大二的学生,目前在学习关于UI设计方向的一些课程,平时会用到UI ...
猿创征文｜MySQL入门到实战-基础篇
项目一分析并设计学生管理数据库主要目标是在了解用户软件操作需求的基础上,提炼.总结.归纳出对数据库的需求.主要内容,数据库的存储结构.表中数据及其依赖关系.设计方案的优化与规范.视图等其他数据库对 ...
猿创征文｜我的前端学习之旅【来自一名大四老学长的真情流露】
猿创征文 | 我的前端学习之旅自我介绍我浑噩的大一大二(是不是另一个你) 我的大三生活大三上(学习过程.学习方法.推荐网站) 大三下(技术提升.荣誉证书.推荐比赛) 我与 CSDN 的机缘(从小 ...
猿创征文 | 国产数据库之openGauss的单机主备部署及快速入门
猿创征文 | 国产数据库之openGauss的单机主备部署及快速入门一.openGauss介绍 1.openGauss简介 2.openGauss特点 3.openGauss的逻辑架构图二.环境检 ...
猿创征文 | 国产数据库实战之TiDB 数据库快速入门
猿创征文 | 国产数据库实战之TiDB 数据库快速入门一.系统检查 1.检查系统版本 2.查看本地IP地址 3.TiDB集群介绍二.快速部署本地测试集群 1.安装 TiUP工具 2.声明全局环境变 ...

猿创征文｜【React 一】入门学习

一：简介

1.1 概念

1.2 特点

1.3 高效的原因

二：虚拟DOM

2.1 概念

2.2 创建虚拟DOM

JS创建虚拟DOM

准备容器

创建虚拟DOM

说明：

三：JSX语法

3.1 定义虚拟DOM时不要用引号。

3.2 标签混入JS表达式需要用{}

3.3 className样式的类名

3.4 内联样式

3.5 只有一个根标签

3.6 标签必须闭合

3.7 标签首字母

3.8 js表达式

四、 JSX练习

遍历数组并输出到页面上

猿创征文｜【React 一】入门学习相关推荐

最新文章

热门文章

猿创征文｜【React 一】 入门学习

一：简介

1.1 概念

1.2 特点

1.3 高效的原因

二：虚拟DOM

2.1 概念

2.2 创建虚拟DOM

JS创建虚拟DOM

准备容器

创建虚拟DOM

说明：

三：JSX语法

3.1 定义虚拟DOM时不要用引号。

3.2 标签混入JS表达式需要用{}

3.3 className样式的类名

3.4 内联样式

3.5 只有一个根标签

3.6 标签必须闭合

3.7 标签首字母

3.8 js表达式

四、 JSX练习

遍历数组并输出到页面上

猿创征文｜【React 一】 入门学习相关推荐

最新文章

热门文章

猿创征文｜【React 一】入门学习

猿创征文｜【React 一】入门学习相关推荐