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站尚硅谷)

相关内容

热门资讯

并购重组风起云涌,2025券商... 2025年,中国资本市场正屹立于改革开放深化与高质量发展的历史交会点。全球经济格局的深刻重塑与国内战...
罕见基石出手,MiniMax这... 最近的港交所是越来越热闹了。沐曦上市的余温还在,壁仞、天数智芯接连IPO的动作也在持续引爆市场。另外...
紫金矿业预计2025年净利润超... 中经记者 陈家运 北京报道2025年12月30日晚间,紫金矿业(601899.SH、02899.HK...
陈立武的无限战争 如果要复盘中国半导体产业的崛起之路,“陈立武”这个名字完全值得单开一个章节。在业务层面,他是华人世界...
中国两个小城,靠画画年入90亿... 作 者:正理 正和岛案例研究中心特约研究员来 源:正和岛(ID:zhenghedao)笼天地于形内,...
一家不做“风口猪”的车企,如何... 作 者:豆汁儿来 源:正和岛(ID:zhenghedao)过去十年,中国新能源汽车的故事,堪称速度与...
财报造假被罚7620万元后,诺... 一个谎言开始往往需要用另一个谎言弥补。文/每日财报 宋思时隔一年,诺泰生物(688076.SH)...
一款9分甜脆的超大新品蓝莓,为... 导语:京东七鲜超市石家庄首店开业近半个月后,当地的消费者仍热情不减地排着购物长队,尤其在一个货架前,...
黄金投资全景指南 作者:烟雨导语:对普通投资者而言,黄金投资品类繁杂,从实物黄金到黄金ETF再到黄金期货交易,风险与门...
亮剑了,震撼台海军演,三大意外... 作者 | 子期智谷趋势出品 | ID:zgtrend这么近那么美,随时到台北?没想到2025年的最后...