进阶React

hoc, render porps, hooks 的对比和用处

都是react解决状态共享和逻辑复用的方法
hooks 是16.8后推出的，不用嵌套，不用修改组件层级，简单易用

虚拟dom是什么

什么是vdom？
vdom是用js对象来描述真实dom 结构，是对真实dom的映射
有什么用？
操作真实dom 是耗性能的，vdom用来减少dom的操作，是对渲染的抽象，可以用于多端
怎么用？
每次修改状态，组件会生成新的vdom，新旧vdom进行diff算法对比，最终生成新的vdom, 视图更新

diff算法？

新旧vdom tree对比
遵循三个原则

同层对比
将传统的树节点的对比的时间复杂度从o(n^3)降为o(n)
对比父节点的tag, type
如果不是相同的父节点，则销毁重建
同层子节点使用key标记，来进行匹配复用
子节点上标记唯一的key, 根据key来匹配相同的子节点，进行位移复用，若无匹配，则新建，若匹配完成后，旧节点还有剩余子节点，则销毁

jsx原理

实际调用了react.createElement(type, props, ...children)
用来生成vnode
createElement根据type，如果是class，则createComponent, 继承copponent,合并配置，生成vnode

自定义的react组件为何必须大写

用来区别原生标签，便于浏览器识别解析
babel在编译过程中判读组件的首字母，如果小写则为原生dom标签，编译为字符串，如果大写则判读为自定义组件，编译为组件

setState是同步还是异步？

这里的异步不是指异步代码实现，指的是先收集变更，放入队列中，然后统一进行批量更新

异步合成事件和钩子函数中
调用this.updater.enqueue
就是将回调事件放到updteQueue中，
判断isbathupdates 是否批量更新
bathupdates 通过 transcation(事务)机制来完成
事务机制类似一个黑盒子，在开始和结束阶段来添加逻辑
init中初始化updatequeue,
setstate将事件放入updatequeue中
close阶段将updatequeue进行flush
---- vue通过js eventloop实现
同步
放在setTimeout中活着原生dom通过addeventListener绑定的事件中

react 如何实现自己的事件机制？

注册事件事件依赖关联，形成map
合成事件绑定事件 document.addEventlister, 收集事件回调函数
触发事件 dispatchEvent, 内部模拟了事件触发
动画浅析REACT事件系统和源码

聊聊fiber架构

为什么引入？
渲染线程和js引擎线程互斥
15及以前版本渲染采用同步，碰到嵌套过深或渲染耗时的组件，页面会卡顿阻塞，用户体验差
fiber架构，让渲染有优先级，可中断，
利用时间片的概念，每个任务上携带expirestime(过期时间),通过expirestime 对比判断任务的优先级，如何碰到优先级高的任务，组件暂停渲染，将执行栈交给优先级高的任务先执行，执行完后，在暂停渲染的组件处重新开始渲染，利用来浏览器api requesIdleCallback(利用浏览器空闲时间来处理任务)来实现

react事件中为什么要绑定this或者要用箭头函数

this指向的问题
this指向不是定义时的环境，而是执行时绑定环境，指向underfind（严格模式下）
绑定this指向组件实列
constructor中 bind this, 只操作一次
箭头函数，每次都会重新生成