面试笔记:框架

87 阅读3分钟

什么是fiber

fiber是react提供的一种新的调和机制。他实现了分片,可中断、执行组件的渲染和更新。 fiber有一个时间切片的概念,fiber将一个更新任务分成了多个小任务。这样的话就可以让任务以一帧一帧的方式去执行,执行完任务之后,将剩余的时间交给浏览器去渲染dom,或者动画等操作,避免长时间阻塞主线程。原来调和过程是同步的,不可中断。 如何实现:react使用了一个双缓存的更新机制,就是每次更新的时候都会生成一个新的fiber树,等fiber更新完成之后在commit阶段一次行替换整棵树。这个fiber是一个链表结构有return,child,sibling等指针代替了之前的虚拟dom,新的调和过程会遍历这个链表,实现可中断的更新渲染。他是react的一个最小工作单元,一个fiber对应一个组件类似虚拟dom,还有一些props,组件状态,优先级等属性。

拓展:16.8之后还有哪些更新

  1. 任务优先级的概念。比如在调和过程中用户做了一些交互操作,这时我们会优先完成用户交互的操作
  2. 增量渲染(Concurrent Rendering) Suspense
  3. Error Boundaries Error Boundaries

什么是react合成事件,和原生事件有何区别。

他是为了抹平各个浏览器的差异而提出的一种事件机制。通过在跟元素中统一代理合成事件,通过事件冒泡的机制来分发到具体的组件中。 区别: react合成事件不用手动清除,组件卸载时会自动清除 合成事件是基于事件委托的 React 合成事件的 e.stopPropagation() 只能阻止 React 事件的冒泡,无法阻止原生事件的冒泡

  • api:e.stopPropagation() e.preventDefault()
react事件机制是什么
  1. 绑定:在组件挂载阶段会在跟元素注册react事件
  2. 事件触发时,会根据e.target找到该组件元素,并执行callback
  3. 触发阶段分为事件捕获-目标阶段-事件冒泡
  4. 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指向

react19新功能

  • useAcitonState 他是一个乐观更新,在调用promise这种操作时,可以直接使用 const pedding = useAcitonState(promise)

  • use 以读取类似于 Promisecontext 的资源的值。

  • ref 可以直接通过props传递,用来访问父组件,代替forwardRef