尚硅谷2021版React技术全家桶全套完整版(零基础入门到精通/男神天禹老师亲授)_哔哩哔哩_bilibili
代码:
资料:
虚拟DOM没放在页面上是放在电脑的内存中的。
组件化所有的。
模块化js。
虚拟DOM对应真实的DOM。放在内存里的,虚拟DOM在内存中比较。新的DOM只是肖战20。
虚拟dom比较,比较出有差异的地方再去更新界面。
--01---
babel是es6转es5的。jsx转为js的。
第一个react的项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 先引入的-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" > /* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
可以看到:
注意的地方:
1.改为babel
2.不要写单引号
不是追加是替换的操作。
---02---
使用jsx创建虚拟DOM:
虚拟dom就是一个一般的js对象。
和真实的dom区别是,比较轻量化,虚拟dom是react内部用的。
虚拟dom最终会被转化为真实的dom。
---03-04---
jsx的意义。
注意两个大括号,第一个是代表的是js,第二个是对象,内部不加引号就是变量了。
jsx语法规则:
1.定义虚拟DOM时,不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class,要用className。
4.内联样式,要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
html标签都是小写的,注意只是一个简单的标签,组件是大写的,主键还没讲呢。
component组件的意思。
---05---
关于什么是表达式和什么是语句:
js表达式用{}
表达式:一个表达式会产生一个值,可以放在任何需要值得地方,一个函数就是一个表达式返回的是函数本身。
这里面只能写js的表达式。
js语句:代码,就是
---06---
模块与组件,模块化和组件化。
模块化,组件化,工程化。
---07---
调试的工具就是就是为了组件化的。
无法打应用商店。
手动安装。
---08---
函数定义主键的话想都不用想,首字母必须大写。
函数组件的this是是谁呢?
这里的this是undefind。因为bable开启了严格模式。
严格模式的定义就是禁止自定义的函数指向window
---09---
类的基本知识:
代表输出的是实例对象,这个对象是Person去new出来的。
call的作用就是更改函数的this指向。
类的继承的概念:
继承父类必须有super的。
---10---