react复习一

最新推荐文章于 2024-04-08 18:27:35 发布

聂一

最新推荐文章于 2024-04-08 18:27:35 发布

阅读量168

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/Nieyigo/article/details/114105656

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

虚拟DOM

原生js都是直接操控dom节点，如果改变样式等也是先获取节点再改变上面的样式，而react这是采用虚拟dom，就是在操作真实dom之前生成虚拟dom，比如一个数组你现在生成一个列表里面有两条数据，如果你现在有三条数据了你就要重新渲染，原生js不会引用重复的数据而是干脆直接重新渲染，这样很浪费性能，虚拟dom则会查看是否有相同的节点重复利用，再去添加真实的节点，这就是diffing算法，我们从头到尾也只需要操作虚拟dom即可，这就是react相对于传统js的优势

虚拟DOM的两种创建方式

注意jsx依赖babel才能翻译为js，上面这种方法翻译完就变成了下面那种了
jsx发明的目的就是使创建虚拟DOM更加便捷
jsx方法

<div id="root"></div>
const VDOM = <h1>Hello World</h1>
React.render(VDOM,getElementById('test'))

js方式

<div id="root"></div>
const VDOM = React.createElement('h1',{id:'title'},'Hello,React')
React.render(VDOM,getElementById('test'))

虚拟dom本质是一个js对象
虚拟dom的属性比较少，真实dom的属性多
虚拟dom最终会被react转化为真实dom呈现在页面上

JSX语法规则

key是每个元素的唯一标识用于diffing算法识别

定义虚拟DOM时不要写引号
标签中混入js表达式(js表达式与js语句或者代码不同，一个表达式会产生一个值，可以放在任何一个需要值得地方)时要用{}，表达式是数组他会自动帮你遍历并显示，对象的话就会报错
样式的类名指定用className（因为class是es6中类的关键字）
内联样式需要用style={{key:value}}，外面的括号表示jsx表达式，里面的括号表示是一个对象
虚拟Dom必须只有一个根标签
标签必须闭合
标签首字母如果小写，就将标签转化为html中的同名元素，若html中没有同名元素就报错。如果大写，react就去渲染对应的组件，组件未定义就报错

函数式组件

在这里插入图片描述
在看类组件之间复习一下类
定义类

class Person {
//要接受new时候传递过来的参数，就需要构造器
//构造器函数/方法
	constructor(name,age){
	//构造器中的this是类的实例对象
	this.name = name
	this.age = age
	}
	//也可在类中直接这样写，有点像给一个对象添加一个成员，这样每个实例都会带有这个成员变量
	a = 1
	//一般方法
	//方法在原型对象上，供实例使用
	speak(){
	console.log(`i am ${this.name}`)
	}
}
//创建一个Student类，继承于Person
class Student extends Person {
//这里继承Person的构造器了可以不用谢，但是如果要添加独有的属性，就需要写,并且构造器中需要super
constructor(name,age,grade){
//super必须放在最前面
	super(name,age)
	this.grade = grade
	}
}

实例化类