基本知识

虚拟DOM

React本身只是一个DOM的抽象层，使用组件构建虚拟DOM

他的本质是一个描述DOM节点的js对象

用js对象表示DOm信息和结构，当状态变更的时候，重新渲染这个js对象结构，我们将这个对象结构称为VDOM

DOM操作很慢，轻微的操作可能都会导致页面重新排版，非常消耗性能，相比于DOM对象，JS处理起来会更快，而且更简单，通过diff算法对比新旧vdom之间的差异，可以批量的、最小的执行dom操作，从而提升性能

React中用JSX来生成VDOM虚拟对象，JSX是react.createElement的一个语法糖，React17之前是用babel-loader将JSX进行转译，React17之后是在package中引入新的入口函数并调用

首次调用的时候，容器中的所有DOM节点都会被替换，后续的调用则会使用diff算法进行高效的更新

react的初次更新采用的非批量更新

后续更新采用的是批量更新的方法

不同的组件会有不同的数字标识常见的组件类型有文本节点，HTML标签节点，函数组件和类组件

根据节点的type类型和节点上的key属性是否发生了变化来确定是否是同一个节点，不是同一个节点将不进行复用，同一层级的节点可以进行复用， react在进行比较的时候会按照深度优先的情况进行比较

fiber是一个链式结构，用来进行任务分解增量渲染

对于大型项目，组件树会很大，递归遍历的成本过高，会造成主线程被持续占用，出现卡顿的情况，fiber可以进行任务分解，将渲染任务拆分为多块，给不同类型的更新赋予优先级，让任务可以做的暂停终止复用渲染从而解决刚刚提到的问题

fiber上会记录child（第一个子节点）sibling（兄弟节点）return（可能是父节点）

1、复用状态逻辑 2、提高复用性 3、组件变简单，没有复杂的this指向问题

hooks在挂载在链表上的时候是没有名字的，只有顺序，如果有if等循环会导致顺讯混乱

hooks都是保存到全局的，由全局进行分发给函数组件来进行使用