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