创建网站的代码网站 关键词库

创建网站的代码,网站 关键词库,建造电商网站,电商型企业网站建设为避免层级、布局和事件体系导致的副作用#xff08;例如受父元素的CSS影响#xff09; 模态框通常挂在 document.body 或根节点下 直接 DOM 操作 首先我想的是 const modal document.createElement(div) modal.className modal document.body.appendChild(modal)然后配置 …为避免层级、布局和事件体系导致的副作用例如受父元素的CSS影响模态框通常挂在 document.body 或根节点下直接 DOM 操作首先我想的是const modal document.createElement(div) modal.className modal document.body.appendChild(modal)然后配置 z-index 置顶、 position: fixed 覆盖全页面但是直接原生 DOM 会导致 重排、重绘 性能耗散所以在 React 和 Vue 的框架层面做了处理需要让模态框挂载位置正确的同时能走diff判断进行性能优化防止重复 mount,unmount 导致的销毁与重建还会减少 CLS 提升 SEOReact - Portal传送门ReactDOM.createPortal( Modal /, document.body )在组件关系逻辑树 Fiber Tree 中管理组件关系和生命周期等等模态框作为一个组件即一个 Fiber 节点进行插入App └── Page └── Modal但是在 DOM 中模态框并不是Page的子组件而是直接挂在 body 下面的body ├── #root │ └── Page └── ModalPortal 改变了 DOM 的插入位置这样就实现了 模态框仍然会在 React Render 中进行 虚拟diff 进行性能优化Vue - Teleport瞬移直接写进了语法层Teleport tobody Modal v-ifopen / /Teleport本质和 React Portal 基本一致虚拟节点标记 teleportpatch 阶段插入到指定容器diff 范围仅限在 Teleport 子树中直接JS操作那么其实我们要优化的就是避免重复的创建所以可以通过单例模式在全局作用域下面进行 let 的内存管理防止重复的GC回收和创建导致的重排重绘let modalEl function getModal() { if (!modalEl) { modalEl document.createElement(div) modalEl.className modal document.body.appendChild(modalEl) } return modalEl }