什么是fiber
fiber是react提供的一种新的调和机制。他实现了分片,可中断、执行组件的渲染和更新。 fiber有一个时间切片的概念,fiber将一个更新任务分成了多个小任务。这样的话就可以让任务以一帧一帧的方式去执行,执行完任务之后,将剩余的时间交给浏览器去渲染dom,或者动画等操作,避免长时间阻塞主线程。原来调和过程是同步的,不可中断。 如何实现:react使用了一个双缓存的更新机制,就是每次更新的时候都会生成一个新的fiber树,等fiber更新完成之后在commit阶段一次行替换整棵树。这个fiber是一个链表结构有return,child,sibling等指针代替了之前的虚拟dom,新的调和过程会遍历这个链表,实现可中断的更新渲染。他是react的一个最小工作单元,一个fiber对应一个组件类似虚拟dom,还有一些props,组件状态,优先级等属性。
拓展:16.8之后还有哪些更新
- 任务优先级的概念。比如在调和过程中用户做了一些交互操作,这时我们会优先完成用户交互的操作
- 增量渲染(Concurrent Rendering) Suspense
- Error Boundaries Error Boundaries
什么是react合成事件,和原生事件有何区别。
他是为了抹平各个浏览器的差异而提出的一种事件机制。通过在跟元素中统一代理合成事件,通过事件冒泡的机制来分发到具体的组件中。
区别:
react合成事件不用手动清除,组件卸载时会自动清除
合成事件是基于事件委托的
React 合成事件的 e.stopPropagation() 只能阻止 React 事件的冒泡,无法阻止原生事件的冒泡
- api:e.stopPropagation() e.preventDefault()
react事件机制是什么
- 绑定:在组件挂载阶段会在跟元素注册react事件
- 事件触发时,会根据e.target找到该组件元素,并执行callback
- 触发阶段分为事件捕获-目标阶段-事件冒泡
- react有一个合成事件池,会复用事件对象,回调结束之后会清空当前的事件对象属性。
useEffect的原理
react有个专门放effect的地方,他是一个链表结构,存储所有的 useEffect 回调。
每次useEffect调用都会维护一个effect对象,比如cb,清理cb,deps
在调和阶段,react会遍历所有的effect,并且会标记需要执行的effect。
在commit之前异步执行所有的effect回调。同时清理函数的话会在更新之前或者卸载时调用。
useEffect 与 useLayoutEffect
- useLayoutEffect执行 在 DOM 更新后,浏览器绘制前,useEffect执行绘制后。
- useEffect 是异步的,useLayoutEffect是同步的。
- useEffect一般处理一些数据请求,useLayoutEffect一般处理一些紧急任务,比如改dom样式,获取dom样式属性。
lazy实现原理
diff中 虚拟dom key是什么作用。index能使用index吗
diff算法
什么是虚拟dom
react高阶组件使用的什么设计模式
new :
1、创建实例 2、实例__proto__ === construct.prototype 3.apply改变this指向