虚拟dom的理解

虚拟dom的理解

1. 是什么 2. 能做什么 3. 如何做的 4. 做的怎么样

	虚拟dom 就是描述真实dom 的js对象
	
	优点：
		- 处理了浏览器兼容问题，避免用户操作真实dom
		- 内容经过了xss处理，可以防范xss攻击
		- 实现了跨平台开发android，ios等
		- 更新的时候可以实现差异更新，减少更新dom 的炒作
	缺：
		- 虚拟dom的构建需要消耗额外的内存
		- 首次渲染不一定更快
	

函数组件和类组件的相同不同点

	相同点
		- 都可以接受属性并且返回react元素
	不同点
		- 编程思想不同：类组件需要创建实例，是属于面向对象的方式编程，而函数组件不需要创建实例，接收输入，返回输出，是基础函数式编程的方式
		- 内存占用：类组件需要创建并保存实例，会占用一定内存，函数组件不需要创建实例，节约内存
		- 捕获特性：函数组件具有值捕获特性
		- 可测试性 函数组件更方便编写单元测试
		- 状态：类组建有自己的实例，可定义状态，而且可以修改状态更新组件，函数组件没有状态 ，可以使用useState使用状态
		- 生命周期：类组建有完整的生命周期，可以在生命周期中编写逻辑，函数组件没有生命周期，可以使用useEffect实现类似生命周期的功能
		- 逻辑服用：类组建高阶组件hoc的形式(复用性差)，函数组件 自定义hooks更加方便
		- 跳过更新：类组件可以通过shouldComponentUpdate和pureComponent等来跳过更新 而函数组件中，比如useMemo，useCallback，react.memo来跳过
		- 发展前景： 未来函数组件会成为主流，因为他可以更好的的屏蔽this指向问题，规范和逻辑复用，更高的适合时间封片和并发渲染
	

说一下react的渲染流程

• 思路 1. 设计理念 2. 关键原理清晰描述，抽象和具象相结合 3.结合工作实践跟工作成果

	- 设计理念
	- 跨平台渲染 => 虚拟dom
	- 快速响应 => 异步可终端 + 增量更新
	- 性能瓶颈     js执行任务时间过长
	  - 浏览器刷新频率为60hz，大概16.6ms(1秒/60)渲染一次，而js线程和渲染线程是互斥的，所以js线程执行任务时间超过16.6ms的话，就会导致掉帧，卡顿等。解决方案是react利用空闲的时间进行更新，不影响渲染进程  => 把一个耗时任务切分成一个个小任务，分布在每一帧的方式 ---- 时间切片

所以由于时间分片 componentWillmount  componentWillReceiveProps componentWillUpdate 会多次执行 ---> 废弃了

react dom-diff

react17+中dom-diff 就是根据老的fiber树跟 最新的jsx对比生成新的fiber树的过程

react 优化规则
	- 只对同级节点进行对比，如果dom节点夸层级移动，则react不会复用
	- 不同类型的元素会产生不同的结构，会销毁老结构，创建新结构
	- 可以通过key标识移动的元素