React基础学习笔记（二）
一、基本概念：
什么是模块化：从代码角度分析，可复用的代码抽离成模块，便于项目维护和开发。
什么是组件化：从UI界面角度分析，可复用的UI元素，抽离成单独的组件。
二、在vue和react框架中分别是怎么实现组件化的？
Vue是如何实现组件化的：通过.vue文件（单文件组件）来创建对应的组件。
React是如何实现组件化的：react有组件化的概念，但是没有像vue这样的组件模板文件。React中，一切都是以JS来实现的。
三、什么是虚拟DOM？和DOM有什么区别？
首先我们来看一下DOM的本质。
DOM的本质是浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API。
虚拟DOM是框架中的概念，程序员用JS对象来模拟页面上的DOM和DOM嵌套关系，目的是为了实现页面元素的高效更新。
虚拟DOM：
1、本质是Object类型的对象（一般对象）
2、虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是react内部在用，无需真实DOM上那么多属性。
3、虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
四、class组件和函数组件有什么区别？
class组件有自己的私有数据和生命周期函数，函数组件组件只有props，没有自己的私有数据和生命周期函数（函数组件可以通过Hooks来解决，常用的Hooks有useState，useEffect，useSelector,useDispatch等）。
五、实现css样式的模块化
可以在css-loader之后通过？追加参数，其中有个固定的参数叫做modules，表示为普通的。
六、JSX语法规则：
1.定义虚拟DOM时，不要写引号
2.标签中混入JS表达式时要用{}
3.样式的类型指定不要用class，要用className
4.内联样式，要用style={{key:value}}的形式去写
5.虚拟DOM必须只有一个根标签
6.标签必须闭合
7.标签首字母
a:若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素，则报错。
b:若大写字母开头，react就去渲染对应的组件，若该组件没有定义，则报错。
七、执行ReactDOM.render(<MyComponent/>)...之后，发生了什么？
1、React解析组件标签，找到了MyComponent组件。
2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真是DOM，随后呈现在页面中。
八、类的基本知识：
1、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
2、如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
3、类中所定义的方法，都是放在了类的原型对象上，供实例去使用。
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点。
九、高阶函数：
如果一个函数符合下面2个规范中的任何一个，那么该函数就是高阶函数。
1、若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2、若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数：Promise、setTimeout、arr.map()..
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
ReactDOM.unmountComponentAtNode(document.getElementById(‘app’))
十、经典面试题：
React/vue中的key有什么作用？（key的内部原理是什么？）
为什么遍历列表是，key最好不要用index？
回答：
1.虚拟DOM中key的作用：
A.简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。
b.详细的说：当状态中的数据发生变化时，react会根据“新数据”生成“新的虚拟DOM”，
随后React进行“新的虚拟DOM”与“旧虚拟DOM”的diff比较，比较规则如下：
1、旧虚拟DOM中找到了与新虚拟DOM相同的key：
A.若虚拟DOM中内容没变，直接使用之前的真是DOM。
b.若虚拟DOM中内容变了，则生成新的真是DOM，随后替换掉页面中之前的真实DOM
2、 旧虚拟DOM中未找到与新虚拟DOM相同的key：
根据数据创建新的真实DOM，随后渲染到页面
2.用index作为key可能会引发的问题：
1.若对数据进行：逆序添加、逆序删除等破坏顺序操作；
会产生没有必要的真实DOM更新===》界面效果没问题，但效率低
2.如果结构中还包含输入类的DOM：
会产生错误DOM更新 ===》 界面有问题
3.注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
