网站建设中的html,深圳建设网站需要多少钱,网络营销策划的具体流程是,久久建筑网 围栏工程专项施工方案React概述
react是什么#xff1f;
React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。
为什么学#xff1f;
1.原生JS操作DOM繁琐#xff0c;效率低
2.使用JS直接操作DOM,浏览器会进行大量的重绘重排
3.原生JS没有组件化编码方案#xff0c;代码…React概述
react是什么
React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。
为什么学
1.原生JS操作DOM繁琐效率低
2.使用JS直接操作DOM,浏览器会进行大量的重绘重排
3.原生JS没有组件化编码方案代码复用低 在学习之前最好看一下关于npm的知识下面是我在网上看见的一个写的还不错的npm的文章 npm React的特点
1.组件化开发声明式编码提高效率
组件化开发把复杂的代码拆成一块一块组件模块化开发声明式编码比如我写了一个页面页面上有一个蓝色的图形我想改这个图形的颜色我只需要通过改某个命令或者传入的某个参数就可以实现颜色的修改不需要去修改这个页面代码这便是声明式编码
2.在React Native中使用React进行移动端开发
3.使用虚拟DOMDiffing算法减少真实DOM操作大大提升效率
虚拟DOM是一种空间换时间的做法数据先到虚拟DOM上再通过虚拟DOM映射到真实DOM上这种做法只有第一次页面加载时会稍慢一些因为加了一层虚拟DOM到真实DOM的映射。但是在后续数据变更DOM修改的时候就会明显体现优势。以前DOM更新操作只会去更新全体数据区域消耗极大而虚拟DOM在更新前会进行比对Diffing算法只更新需要更新的内容减少新建开销从而优化性能
以H5JS引入的原生方式开始React
依赖导入 既然是原生H5那么就要用script标签引入React的js依赖 介绍一下需要的js依赖这三个是非常基础的库而且一定要按图上固定的顺序导入
最后引入babel标签告诉编译器这里需要去从JSX转换成JS 注意script typetext/babel如果类型写错了会发生错误导致浏览器不认识标签因为JS中根本没有标签这一说
控制台信息
正常运行控制台会提示的信息
代码
!DOCTYPE html
html langenheadtitleHello React!/titlemeta charsetUTF-8!-- 动态适配 --meta nameviewport contentwidthdevice-width, initial-scale1link hrefcss/style.css relstylesheet/headbodydiv idtest/div!--真实DOM--script typetext/javascript src../js/react.development.js/script !--React核心的库--script typetext/javascript src../js/react-dom.development.js/script!--React操作Dom相关库--script typetext/javascript src../js/babel.min.js/script!--将JSX转换成JS用的依赖因为浏览器不认识JSX只认识JS--!-- 最后引入babel标签这里是告诉编译器这里是JSX需要用babel转换成JS文件如果不小心写成其他的类型那么浏览器就无法编译通过 --script typetext/babel// 虚拟DOM创建const virDomh1hello React/h1// 将虚拟DOM渲染到某个指定的真实DOM上面ReactDOM.render(virDom,document.getElementById(test))/script/body
/html用JS和JSX分别创建虚拟DOM
前置条件依旧是引入上面的三个依赖
用JS创建虚拟DOM
其实JS也可以做成类似于JSX的写法 首先回顾一下 传统创建真实DOM元素可以通过操作document对象来进行创建
document.createElement(div)而我们创建虚拟DOM因为我们引入了React依赖所以就可以通过React对象创建虚拟DOM。注意即使是JS创建也不可以想当然的用双引号把元素括起来因为React不认识这种写法
React.createElement(标签名,标签属性,标签内容)
例子
const virDomReact.createElement(h1,{id:title},这是内容)这样我们就通过JS创建了一个虚拟DOM元素但是这种创建方式创建单层元素还好一旦创建很多元素就会非常麻烦
比如我要在DIV里面套一个spanspan没属性就得这样
const virDomReact.createElement(h1,{id:title}, React.createElement(span,{},这是span内容))
如果元素过多就得层层套娃非常痛苦最后渲染指定真实DOM即可注意这里就有意思了因为是JS创建的所以标签类型指定了JS而不是Babel
script typetext/javascriptconst virDomReact.createElement(h1,{id:title}, React.createElement(span,{},这是span内容))// 虚拟DOM创建// 将虚拟DOM渲染到某个指定的真实DOM上面ReactDOM.render(virDom,document.getElementById(test))
/script测试肯定好用就不演示了
但这样非常麻烦一个元素就快累疯了所以引入了JSX
用JSX创建虚拟DOM
此时用JSX就非常容易标签套娃了 const定义的时候套一层括号代表是一个整体写完标签渲染到真实DOM上就可以了 script typetext/babel// 虚拟DOM创建JSX开始套娃const virDom(h1h2div123/div/h2/h1)// 将虚拟DOM渲染到某个指定的真实DOM上面ReactDOM.render(virDom,document.getElementById(test))/script这里需要注意因为JSX是JSXML所以如果不是单纯的标签语言混入了一些JS那么一定要用{}把JS代码括起来
const virDom(divh1前端js框架列表/h1ul{data.map((item,index){return li key{index}{item}/li})}/ul /div )JSX—JS原理
所以到这里大概就可以才出来babel的原理了 通过babel把写好的JSX一层一层标签去挨个套娃转换最终转换成这种React.createElement的JS创建形式。 const virDomReact.createElement(h1,{id:title}, React.createElement(span,{},React.createElement(...n层标签)))这也就是为什么前面控制台说不建议用生产环境用Babel转换这种转换的方式标签少的话还好如果大量去现场从JSX转换成JS那么会非常耗时用户一进来看见一个白画面等待从JSX转换成JS这是很不友好的。后面开发时会替代这种写法。
虚拟DOM和真实DOM比较
关于虚拟DOM本质就是Object即为一般对象所以相对于一个真实的DOM来说更轻。 虚拟DOM是React内部在处理无需真实DOM上的那么多属性。 但最后虚拟DOM还是会被转化为真实DOM最后呈现在画面上。
真实DOM具有很多的属性
JSX语法
定义JSX的时候不要写引号
JSX在创建虚拟DOM的时候不可以用字符串引号创建会导致无法识别
标签中混入JS表达式的时候要用{}
在JSX中想用JS必须要用{}套一下套完代码就会被认为是JS代码
比如给一个div标签设置id利用{}进行读取 运行代码则可以发现读取成功
样式类名
注意React标签中没有class属性因为如果写了class就与ES6的语法相冲突所以这里的class属性改名为className
如果React代码里写了class就会被控制台提示是否是写错了
注意class属性的话是不需要去用{}进行插值的这属于原生的代码
例子
在title属性中定义一个css样式准备在后面标签引用 在标签中直接以字符串的形式进行样式引用 样式生效 但是此时会被报错也就是要改为className标记样式 改为className就没有报错了
内联样式
所谓内联样式就是在标签上面直接标出css、 例子 span className sss style {{fontSize:50px; color:origin}}
React中如果使用内联样式则需要去用{{样式属性}}标记注意是两层花括号
外层花括号代表在JSX中引用JS内层花括号代表一个JS对象对象里描述了样式
则语法为style{{key1:value1 , key2:value2}}
只有一个根标签
这个不用多赘述定义的那个虚拟DOM只保持一个根标签图上多个就报错了
标签必须闭合
无论是单个或者多个标签JSX中必须保持闭合 单个标签不闭合报错 闭合了即正确2选1均可 单标签闭合 双标签闭合
标签首字母
小写字母开头
就将标签转化为html同名元素如果html中无该标签对应的元素就报错 随便定义一个标签 大写字母开头
react就去渲染对应的组件如果没有就报错 直接认为是React标签在React组件中找不到定义则直接报错
JSX小练习
JS表达式和JS语句的区别
关于JS表达式和JS语句分别是什么
JS表达式返回一个值可以放在任何一个需要值的地方 a ab demo(a) arr.map() function text(){}
JS语句if(){} for(){} while(){} swith(){} 不会返回一个值
这二者如何区分呢 就是用 一个变量去接这个代码看看有没有返回值
有返回值的就是JS表达式没有返回值的就是语句条件判断语句 转向语句循环执行语句… 为什么要说这个 是因为标签中混入JS表达式的时候要用{} 换句话说 就是{}中只能放入JS表达式
举例
放入JS表达式可能有返回值可以放入
放入JS语句没有返回值报错
用JSX循环显示数组 渲染出来的效果 但是控制台会有报错 意思这种循环出来的标签需要有自己的unique key因为diffing算法需要用这个key所以这里报错
稍加修改用遍历时自动生成的index作为unique key但是这种做法会有问题但是这里先不用处理后续学习中会说明
