前言：
这是一篇自学笔记，帮助自己的React学习，此学习笔记中只记录教程中对我来说比较又触动的点。
观看的视频教程链接如下：
001_尚硅谷react教程_react简介_哔哩哔哩_bilibili，这位老师的讲解非常细致入微，一边学习react一边还能补充到自己之前漏掉的js相关知识，关于新知识的引导做的非常好，推荐各位想学习React的都可以去看看。
最后，小弟博客用的不熟，排版、字体看起来估计难以入目，多有担待。
注：笔记中的代码多为手敲，可执行性未知。
一、React中的虚拟DOM
react效率高的最大原因就是react有虚拟dom，能够通过自己优秀的diffing算法，计算每次需要渲染的元素，而不是一直重绘html，在jsx语法下使用虚拟dom需要注意以下问题：
1.虚拟dom中使用js表达式需要用花括号包围，例如<Person name={myName} />，要注意的是，花括号中包围的是js表达式 而不是任意的js代码如：<Person name={if(true){...}} />。
2.虚拟dom也支持像html标签传递class，以此将样式渲染在元素上，但是因为class是关键字，所以jsx中的虚拟dom的class需要使用className接收，例如：<h2 className="border"></h2>
3.虚拟dom中元素的自定义样式style不能像html标签一样使用字符串传递，而是采用传递对象的形式，例如：<h2 style={{color:'white',fontSize:'18px'}}></h2>，其中，第一层花括号表示接收的是js表达式，
第二层花括号表示的是，我们将对象传递给了style属性，也可以看到，需要对多单词的样式属性名进行小驼峰改写。
4.虚拟dom好在哪？
当我们在控制台中直接将虚拟dom打印出来的时候，我们可以看到，其中的属性相比与html元素大大减少了，如下图，因此在对虚拟dom的操作过程中，损耗是远小于直接操作真实dom的
输出的虚拟dom：
控制台捕捉到的真实dom：
二、this问题
1.基本知识：在js中，如果未开启严格模式，函数中的this是window对象，如果开启了严格模式，那么this就变成了undefined。
2.类式组件：react中有两种组件，一种是函数组件，另一种就是类式组件，该种组件适用于复杂组件的开发，其中的this问题需要搞懂了才算明白了类式组件的开发：
```
class Person{
constructor(name){
this.name = name;
}
render(){
return <h2 onClick={this.speak}>{this.name}</h2>;
}
speak(){
console.log("my name is :"+this.name);
}
}
ReactDOM.render(<Person name="jack" />,document.getElementById("app"));
```
我们需要知道在ReactDOM.render这行代码之后，react帮我们做了什么：
（1）react接收到了Person，发现它是类式组件。
（2）react创建了一个该类的实例，假设react创建出的实例叫做p1。
（3）创建该实例，先会进入构造器，此时构造器中的this，指向的就是组件的实例对象，也就是p1。
（4）创建实例之后，react核心方法需要将该组件转为虚拟dom，也就是类中需要固定的方法：render，react也是通过p1执行了render，所以render中的this也是p1。
（5）当用户点击这个标签的时候，会触发元素的onClick方法，也就是speak方法，因为此时我们是直接触发了onClick方法，没有经过p1，p1是react内部的，所以此时的this是undefined。
所以，当需要在speak中使用this的时候，需要用以下方法：
（1）把this绑定给speak方法：
constructor(name){
this.name = name;
this.speak = this.speak.bind(this);
}
要注意，this.speak.bind中的this.speak是读的到所写的speak方法的，此时输出this，可以看到原型链中有该方法（_proto_）,而此行代码，将该方法给到了该类的属性上，因此在后续调用中，onClick执行的就是实例对象中的speak，而不是直接执行speak方法。
(2)利用箭头函数：
speak = ()=>{
console.log("my name is :"+this.name);
}
因为箭头函数没有自身的this，所以this会向外找，也就是类本身，也就是类的实例对象，这种写法，也是将speak作为类的属性，让this.speak能够触发。
标签：欢迎批评,name,dom,react,虚拟,指正,组件,2022React,speak From： https://www.cnblogs.com/burselKuyan/p/17090547.html