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, 只操作一次
箭头函数，每次都会重新生成
网友评论