进阶React

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

1. 都是react解决状态共享和逻辑复用的方法
2. 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, 只操作一次
箭头函数，每次都会重新生成