教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载导读本文基于 usePortal Hook 文档讲解如何用useState()、useCallback()与useEffect()三个基础 Hook 组合出usePortal自定义 Hook实现程序化创建 React Portal将子组件渲染到父组件 DOM 树之外的任意节点。读完本文你将掌握 Portal 的原理、动态挂载/卸载 DOM 节点的完整流程并能在弹窗、Tooltip、全局提示等场景中直接复用这段实现。一、为什么需要程序化的 PortalReact 官方提供的 Portal 能力ReactDOM.createPortal()可以把 JSX 渲染到指定的 DOM 容器中从而突破子组件只能渲染在父组件内部的层级限制。但常规用法需要在 JSX 中显式声明Portal并预先指定目标节点这在以下场景中不够灵活目标容器是动态创建的例如运行时才生成的div希望在 Hook 层面管理挂载与卸载的完整生命周期需要把渲染到何处的决策从组件 JSX 中抽离出来交给调用方。usePortal的设计目标正是解决这个问题它接收一个 DOM 元素el返回一个可直接在 JSX 中使用的渲染组件并负责在依赖变化时自动完成旧 Portal 的卸载与新 Portal 的创建。二、完整实现代码仓库文档给出的核心实现如下保存于 use-portal.mdconst usePortal el { const [portal, setPortal] React.useState({ render: () null, remove: () null, }); const createPortal React.useCallback(el { const Portal ({ children }) ReactDOM.createPortal(children, el); const remove () ReactDOM.unmountComponentAtNode(el); return { render: Portal, remove }; }, []); React.useEffect(() { if (el) portal.remove(); const newPortal createPortal(el); setPortal(newPortal); return () newPortal.remove(el); }, [el]); return portal.render; }; const App () { const Portal usePortal(document.querySelector(title)); return ( p Hello world! PortalPortalized Title/Portal /p ); }; ReactDOM.createRoot(document.getElementById(root)).render( App / );三、实现逐步拆解1. 用useState()保存 Portal 的渲染器与清理器const [portal, setPortal] React.useState({ render: () null, remove: () null, });初始状态下render与remove都是空函数返回null/ 无操作保证第一次渲染时 Hook 不会产生副作用。render是后续真正挂载到 DOM 的组件remove用于卸载 Portal。这种把一对函数作为状态保存的模式让 Portal 的创建逻辑对组件渲染过程完全透明。2. 用useCallback()记忆化createPortalconst createPortal React.useCallback(el { const Portal ({ children }) ReactDOM.createPortal(children, el); const remove () ReactDOM.unmountComponentAtNode(el); return { render: Portal, remove }; }, []);Portal组件内部调用ReactDOM.createPortal(children, el)把children渲染进目标节点elremove调用ReactDOM.unmountComponentAtNode(el)卸载该节点上的 React 树依赖数组为[]意味着createPortal的函数引用在整个组件生命周期内保持不变。这与仓库中 rendering.md 对 memoization 的论述一致useCallback专用于记忆化回调避免每次渲染都产生新引用从而防止不必要的子组件重渲染。3. 用useEffect()同步 DOM 挂载与卸载React.useEffect(() { if (el) portal.remove(); const newPortal createPortal(el); setPortal(newPortal); return () newPortal.remove(el); }, [el]);当el变化或首次挂载时若已有旧 Portal先调用portal.remove()清理旧节点再基于新的el调用createPortal(el)并setPortal(newPortal)更新状态cleanup 函数返回newPortal.remove(el)在el再次变化或组件卸载时卸载当前 Portal避免 DOM 节点泄漏。需要说明的是文档中的 cleanup 写作newPortal.remove(el)而remove的定义并不接收参数这里el参数实际上会被忽略纯属冗余传参按实现约定调用newPortal.remove()即可达到同等效果。4. 返回渲染器供 JSX 使用return portal.render;Hook 最终暴露的是portal.render即Portal组件。调用方可以像使用普通组件一样使用它例如示例中把它渲染进title元素——此时 Portalized Title 文本会脱离组件树结构直接出现在页面的title标签内部。四、使用方式与场景扩展示例中的用法非常直观const Portal usePortal(document.querySelector(title)); p Hello world! PortalPortalized Title/Portal /p虽然示例选择了title节点但usePortal可以传入任意已存在于页面中的 DOM 元素因此更典型的应用场景包括全局弹窗 / 遮罩层传入document.body让弹窗内容渲染到组件层级之外避免被祖先元素的overflow、z-index、transform等样式影响Tooltip / 下拉菜单渲染到 body 下规避父容器的overflow: hidden裁剪动态创建的容器先document.createElement(div)再传入实现完全的运行时挂载。注意传入的el必须是真实 DOM 节点且应在浏览器环境中存在在服务端渲染SSR场景下document不存在需要像仓库中的 useTitle Hook 那样先用typeof document ! undefined做环境守卫本文的实现本身并不包含这一步。五、测试 Portal仓库中的配套实践Portal 组件写好后如何测试仓库中的 testing-portals.md 给出了配套方案测试的核心只关心portalized 输出是否正确因此可以 mock 掉ReactDOM.createPortal让它在原地渲染子元素describe(MyComponent, () { beforeAll(() { ReactDOM.createPortal jest.fn((element, node) { return element; }); }); afterEach(() { ReactDOM.createPortal.mockClear(); }); it(should render correctly, () { const component renderer.create(MyComponentHello World!/MyComponent); expect(component.toJSON()).toMatchSnapshot(); }); });该文档同时指出这种 mock 的局限测试中的 DOM 与应用真实 DOM 不同可能降低测试的鲁棒性而portal 目标节点缺失这类与真实 DOM 相关的问题必须单独测试。这正是usePortal这类动态创建逻辑需要格外关注的边界情况。六、关键要点与注意事项依赖数组要完整useEffect的依赖为[el]若el来自 props 或 state需保证每次传入的是稳定引用否则会导致 Portal 被反复重建。cleanup 必须存在不清理旧 Portal组件卸载后会留下游离的 DOM 子树。createRoot与旧 API 的差异示例末尾使用ReactDOM.createRoot(...).render(...)这是 React 18 的并发渲染入口与仓库 React Hooks 集合 中为 React 18 提供可复用 Hooks的定位一致而ReactDOM.unmountComponentAtNode属于命令式卸载 API两者配套使用。挂载目标要有保证document.querySelector(title)这类查询如果返回nullcreatePortal(children, null)会抛出错误建议在实际项目中做空值校验。样式隔离Portal 将内容渲染到父组件树之外事件冒泡仍会沿 React 组件树传播React 18 中合成事件按真实 DOM 传播这是使用 Portal 时容易被忽视的行为差异。七、总结usePortal是一个精巧的 Hook 组合范例useState承载创建结果、useCallback保证工厂函数引用稳定、useEffect负责生命周期同步。它把 React Portal 从JSX 声明式用法升级为可编程、可复用、可清理的 Hook 能力是弹窗、提示层等脱离文档流的 UI 场景下的实用基础设施也是理解 React 组合式 API 如何协作的好案例。如需深入可继续阅读仓库内的 React Hooks 集合、Portal 测试实践 以及 React 渲染机制详解。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30-seconds-of-code React useTimeout Hook用自定义 Hook 声明式封装 setTimeout 定时器30 seconds of code React useTimeout Hook用自定义 Hook 声明式封装 setTimeout 定时器 setTimeo教程文档30 seconds of code 实战用 React useInterval 自定义 Hook 声明式封装 setInterval30 seconds of code 实战用 React useInterval 自定义 Hook 声明式封装 setInterval 定时器逻辑与 Reac教程文档RIOT 系统 ztimer_msg 测试应用深度解析从 xtimer 到 ztimer 的移植与时钟选择RIOT 系统 ztimer_msg 测试应用深度解析从 xtimer 到 ztimer 的移植与时钟选择 导读 本文围绕 RIOT 操作系统 tests/s教程文档上一篇YouMightNotNeedJS项目架构深度剖析Jade、Stylus和构建流程解析下一篇NDM (npm Desktop Manager) 安装与配置指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载导读本文基于 usePortal Hook 文档讲解如何用useState()、useCallback()与useEffect()三个基础 Hook 组合出usePortal自定义 Hook实现程序化创建 React Portal将子组件渲染到父组件 DOM 树之外的任意节点。读完本文你将掌握 Portal 的原理、动态挂载/卸载 DOM 节点的完整流程并能在弹窗、Tooltip、全局提示等场景中直接复用这段实现。一、为什么需要程序化的 PortalReact 官方提供的 Portal 能力ReactDOM.createPortal()可以把 JSX 渲染到指定的 DOM 容器中从而突破子组件只能渲染在父组件内部的层级限制。但常规用法需要在 JSX 中显式声明Portal并预先指定目标节点这在以下场景中不够灵活目标容器是动态创建的例如运行时才生成的div希望在 Hook 层面管理挂载与卸载的完整生命周期需要把渲染到何处的决策从组件 JSX 中抽离出来交给调用方。usePortal的设计目标正是解决这个问题它接收一个 DOM 元素el返回一个可直接在 JSX 中使用的渲染组件并负责在依赖变化时自动完成旧 Portal 的卸载与新 Portal 的创建。二、完整实现代码仓库文档给出的核心实现如下保存于 use-portal.mdconst usePortal el { const [portal, setPortal] React.useState({ render: () null, remove: () null, }); const createPortal React.useCallback(el { const Portal ({ children }) ReactDOM.createPortal(children, el); const remove () ReactDOM.unmountComponentAtNode(el); return { render: Portal, remove }; }, []); React.useEffect(() { if (el) portal.remove(); const newPortal createPortal(el); setPortal(newPortal); return () newPortal.remove(el); }, [el]); return portal.render; }; const App () { const Portal usePortal(document.querySelector(title)); return ( p Hello world! PortalPortalized Title/Portal /p ); }; ReactDOM.createRoot(document.getElementById(root)).render( App / );三、实现逐步拆解1. 用useState()保存 Portal 的渲染器与清理器const [portal, setPortal] React.useState({ render: () null, remove: () null, });初始状态下render与remove都是空函数返回null/ 无操作保证第一次渲染时 Hook 不会产生副作用。render是后续真正挂载到 DOM 的组件remove用于卸载 Portal。这种把一对函数作为状态保存的模式让 Portal 的创建逻辑对组件渲染过程完全透明。2. 用useCallback()记忆化createPortalconst createPortal React.useCallback(el { const Portal ({ children }) ReactDOM.createPortal(children, el); const remove () ReactDOM.unmountComponentAtNode(el); return { render: Portal, remove }; }, []);Portal组件内部调用ReactDOM.createPortal(children, el)把children渲染进目标节点elremove调用ReactDOM.unmountComponentAtNode(el)卸载该节点上的 React 树依赖数组为[]意味着createPortal的函数引用在整个组件生命周期内保持不变。这与仓库中 rendering.md 对 memoization 的论述一致useCallback专用于记忆化回调避免每次渲染都产生新引用从而防止不必要的子组件重渲染。3. 用useEffect()同步 DOM 挂载与卸载React.useEffect(() { if (el) portal.remove(); const newPortal createPortal(el); setPortal(newPortal); return () newPortal.remove(el); }, [el]);当el变化或首次挂载时若已有旧 Portal先调用portal.remove()清理旧节点再基于新的el调用createPortal(el)并setPortal(newPortal)更新状态cleanup 函数返回newPortal.remove(el)在el再次变化或组件卸载时卸载当前 Portal避免 DOM 节点泄漏。需要说明的是文档中的 cleanup 写作newPortal.remove(el)而remove的定义并不接收参数这里el参数实际上会被忽略纯属冗余传参按实现约定调用newPortal.remove()即可达到同等效果。4. 返回渲染器供 JSX 使用return portal.render;Hook 最终暴露的是portal.render即Portal组件。调用方可以像使用普通组件一样使用它例如示例中把它渲染进title元素——此时 Portalized Title 文本会脱离组件树结构直接出现在页面的title标签内部。四、使用方式与场景扩展示例中的用法非常直观const Portal usePortal(document.querySelector(title)); p Hello world! PortalPortalized Title/Portal /p虽然示例选择了title节点但usePortal可以传入任意已存在于页面中的 DOM 元素因此更典型的应用场景包括全局弹窗 / 遮罩层传入document.body让弹窗内容渲染到组件层级之外避免被祖先元素的overflow、z-index、transform等样式影响Tooltip / 下拉菜单渲染到 body 下规避父容器的overflow: hidden裁剪动态创建的容器先document.createElement(div)再传入实现完全的运行时挂载。注意传入的el必须是真实 DOM 节点且应在浏览器环境中存在在服务端渲染SSR场景下document不存在需要像仓库中的 useTitle Hook 那样先用typeof document ! undefined做环境守卫本文的实现本身并不包含这一步。五、测试 Portal仓库中的配套实践Portal 组件写好后如何测试仓库中的 testing-portals.md 给出了配套方案测试的核心只关心portalized 输出是否正确因此可以 mock 掉ReactDOM.createPortal让它在原地渲染子元素describe(MyComponent, () { beforeAll(() { ReactDOM.createPortal jest.fn((element, node) { return element; }); }); afterEach(() { ReactDOM.createPortal.mockClear(); }); it(should render correctly, () { const component renderer.create(MyComponentHello World!/MyComponent); expect(component.toJSON()).toMatchSnapshot(); }); });该文档同时指出这种 mock 的局限测试中的 DOM 与应用真实 DOM 不同可能降低测试的鲁棒性而portal 目标节点缺失这类与真实 DOM 相关的问题必须单独测试。这正是usePortal这类动态创建逻辑需要格外关注的边界情况。六、关键要点与注意事项依赖数组要完整useEffect的依赖为[el]若el来自 props 或 state需保证每次传入的是稳定引用否则会导致 Portal 被反复重建。cleanup 必须存在不清理旧 Portal组件卸载后会留下游离的 DOM 子树。createRoot与旧 API 的差异示例末尾使用ReactDOM.createRoot(...).render(...)这是 React 18 的并发渲染入口与仓库 React Hooks 集合 中为 React 18 提供可复用 Hooks的定位一致而ReactDOM.unmountComponentAtNode属于命令式卸载 API两者配套使用。挂载目标要有保证document.querySelector(title)这类查询如果返回nullcreatePortal(children, null)会抛出错误建议在实际项目中做空值校验。样式隔离Portal 将内容渲染到父组件树之外事件冒泡仍会沿 React 组件树传播React 18 中合成事件按真实 DOM 传播这是使用 Portal 时容易被忽视的行为差异。七、总结usePortal是一个精巧的 Hook 组合范例useState承载创建结果、useCallback保证工厂函数引用稳定、useEffect负责生命周期同步。它把 React Portal 从JSX 声明式用法升级为可编程、可复用、可清理的 Hook 能力是弹窗、提示层等脱离文档流的 UI 场景下的实用基础设施也是理解 React 组合式 API 如何协作的好案例。如需深入可继续阅读仓库内的 React Hooks 集合、Portal 测试实践 以及 React 渲染机制详解。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30-seconds-of-code React useTimeout Hook用自定义 Hook 声明式封装 setTimeout 定时器30 seconds of code React useTimeout Hook用自定义 Hook 声明式封装 setTimeout 定时器 setTimeo教程文档30 seconds of code 实战用 React useInterval 自定义 Hook 声明式封装 setInterval30 seconds of code 实战用 React useInterval 自定义 Hook 声明式封装 setInterval 定时器逻辑与 Reac教程文档RIOT 系统 ztimer_msg 测试应用深度解析从 xtimer 到 ztimer 的移植与时钟选择RIOT 系统 ztimer_msg 测试应用深度解析从 xtimer 到 ztimer 的移植与时钟选择 导读 本文围绕 RIOT 操作系统 tests/s教程文档上一篇YouMightNotNeedJS项目架构深度剖析Jade、Stylus和构建流程解析下一篇NDM (npm Desktop Manager) 安装与配置指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
