![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 71
fighting ~
这个作者很懒,什么都没留下…
展开
-
useEffect 和 useLayoutEffect 的区别
和组件渲染放在同一个任务调度函数中的,组件渲染完成后它会立刻开始同步进行effect的函数的执行,这样做的好处是可以实现一些需要立即执行的功能,但是会加长组件渲染的任务时间,会阻塞组件的渲染。在组件渲染任务调度函数结束后,在单独调用一次任务调度函数,所以effect的调用可以单独执行,不会和组件渲染任务调度放在一起,也就不会加长组件渲染的任务时间了,也就不会阻塞组件的渲染。由于 useLayoutEffect 的执行时机在浏览器绘制之前,所以如果在其中进行耗时操作或修改 DOM,可能会造成页面卡顿或闪烁。原创 2024-04-11 00:02:38 · 430 阅读 · 0 评论 -
React中 类组件 与 函数组件 的区别
默认情况下,自定义组件不会暴露它们内部 DOM 节点的 ref。像这样将自定义子组件包装在。原创 2024-03-23 19:17:19 · 1536 阅读 · 0 评论 -
React 的 diff 算法
总的来说,React 的 diff 算法在 React 16 之前使用的是 Reconciliation 算法,它通过递归比较新旧虚拟 DOM 树的节点来确定差异,并更新实际的 DOM。另外,如果组件之间的关系变得复杂,例如列表中的动态项目,Reconciliation 算法可能无法高效地确定节点的插入、移动和删除。Reconciliation 算法通过递归地比较新旧虚拟 DOM 树的每个节点,找出节点的差异,并将这些差异应用到实际的 DOM 上。然而,Fiber 架构引入了对任务优先级的考虑,并通过。原创 2024-03-17 19:10:11 · 508 阅读 · 0 评论 -
React理念——Fiber架构的主要原理
在渲染过程中根据优先级和时间片(Time Slicing)等策略,将任务分配到不同的时间片段中执行,而不是一次性将整个渲染过程执行完毕。返回副作用链表: 当遍历完成后,React Fiber 将最终形成的副作用链表返回,以便在提交阶段中执行实际的 DOM 更新操作。,计算出整个应用的新状态,并生成新的虚拟 DOM 树,最后将新旧虚拟 DOM 树进行对比,找出差异并进行更新。在传统的 React (React15及以前)渲染过程中,当进行组件的更新时,React 会从组件树的根节点开始。原创 2024-03-16 20:45:22 · 1310 阅读 · 0 评论