React日记(一)入门
创始人
2025-05-28 17:23:43
0

描述

用于动态构建用户界面的JavaScript库(只关注视图)、由Facebook开源

特点

1.采用组件化模式、声明式编码,提高开发效率及组件复用率。

2.在React Native中可以使用React语法进行移动端开发。

使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互。

前置知识

判断this指向、class(类)、ES6语法规范、npm包管理器、原型及原型链、数组常用方法、模块化。

官网:https://react.docschina.org/

React高效原因

1.使用虚拟DOM,不总是直接操作页面真实DOM。

2.DOM Diffing算法,最小化页面重绘。

相关js库

1.react.js:React核心库。

2.react-dom.js:提供操作DOM的react扩展库。

3.babel.min.js:解析JSX语法代码转为JS代码的库。

在线引入(需按序):



创建虚拟DOM的两种方式

1.js方式(一般不用)

2.jsx方式

hello react:

多级DOM:

const VDOM=(

虚拟DOM

1.本质是Object类型的对象(一般对象)。

2.虚拟DOM比较“轻”,真实DOM比较“重”。虚拟DOM是react在用,无需真实DOM上那么多的属性。

3.虚拟DOM最终会被react转化为真实DOM,呈现在页面上。

React JSX

1.全称:JavaScript XML

2.react定义的一种类似于XML的JS扩展语法

3.本质是React.createElement(component,props,...children)方法的语法糖

4.作用:简化创建虚拟DOM

写法:var ele=

hello jsx

注意:它不是字符串,也不是HTML/XML标签,它最终产生的就是一个JS对象。

5.标签名任意:HTML标签或其他标签

jsx语法规则

1.定义虚拟DOM时,不要写引号。

2.标签中混入JS表达式时要用{}(id={myId.toLowerCase()})。

3.样式的类名指定不要用class,要用className。

4.内联样式要写成style={{color:’white’}}形式。

5.创建虚拟DOM只能有一个根标签。

6.标签必须闭合(自结束在>内加/)。

7.引入自定义组件的标签首字母大写。

使用列表输出数组中的内容:


(B站尚硅谷)

相关内容

热门资讯

【美媒披露美军武器库存吃紧,政... 【美媒披露美军武器库存吃紧,政府拟动员车企增产武器】据美国《华尔街日报》4月15日披露,由于俄乌冲突...
“特朗普如此命令以色列停火,换... 【文/观察者网 熊超然】 虽然黎以为期10天的停火协议于当地时间4月16日生效,但美国方面一度“认...
停火前最后一刻,以色列炸死黎巴... 黎巴嫩和以色列之间达成的为期10天的停火协议已于当地时间4月17日零时生效。然而,据英国路透社报道,...
中东战火正在绞杀你的工资和饭碗 文︱陆弃 有个真相,没几个人敢明着说——中东那摊子事,早不是单纯的地区冲突了。 它就像一只隐形的手,...
霍尔木兹海峡对商船开放通行,国... 伊朗外长17日表示,霍尔木兹海峡在黎巴嫩与以色列停火期间对所有商船通行完全开放,国际原油期货价格受此...
巴西“选美皇后”竟是毒枭妻子!... (来源:现代快报) 豪车、游艇、音乐节、派对……一名经常在社交媒体上炫富的巴西选美皇后,竟然依靠贩毒...
美国又一艘核动力航母着火,三名... 继“福特”号航母发生火灾后,美国海军“艾森豪威尔”号航母也遭遇火灾。 “艾森豪威尔”号航母 据央视...
曼宁格驾车与火车相撞,不幸身亡 据体坛周报,4月16日,欧洲足坛传出噩耗:前奥地利“国门”亚历山大·曼宁格不幸因遭遇严重的交通事故去...
“特朗普不是世界皇帝” 当地时间4月16日,巴西总统卢拉重申美国总统特朗普“不是世界皇帝”,不能一直以战争威胁其他国家。他称...