#前端 #React
在 设计/实现 复杂的 React 应用的时候，难免会发生 子组件（例如 Router 下的 Page）控制父组件（例如 Layout 或 Container）需要渲染的内容。一个最常见的例子是，在 Page 中声明 Global Layout 中的 Header 需要渲染什么 Page Title 或者 Breadcrumbs。但是，这极其容易违反 几乎所有前端框架「单向数据流」的铁律、使用 useEffect/useLayoutEffect 还会导致 double render、影响应用性能。
现在，foxact 封装了一个基于 React DOM createPortal API 的 Utiltity Function ——
https://foxact.skk.moe/magic-portal/
在 设计/实现 复杂的 React 应用的时候，难免会发生 子组件（例如 Router 下的 Page）控制父组件（例如 Layout 或 Container）需要渲染的内容。一个最常见的例子是，在 Page 中声明 Global Layout 中的 Header 需要渲染什么 Page Title 或者 Breadcrumbs。但是，这极其容易违反 几乎所有前端框架「单向数据流」的铁律、使用 useEffect/useLayoutEffect 还会导致 double render、影响应用性能。
现在，foxact 封装了一个基于 React DOM createPortal API 的 Utiltity Function ——
createMagicPortal`，允许你在 Page 等子组件中 直接声明 Layout/Container 等父组件 的渲染方式、并不违反 React「单向数据流」或 Rules of Hooks，并将额外的渲染次数减少到一次（仅在 Portal Target 首次挂载时会发生唯一一次自发 re-render，后续不会再导致多余的 re-render）。并且相比单纯的 React DOM createPortal API，`createMagicPortal 还通过 Suspense boundary 为 Server-side Rendering（服务端渲染）提供了 骨架屏、占位 的支持。https://foxact.skk.moe/magic-portal/
foxact - React Hooks/Utils library made by Sukka
React Hooks/Utils done right. For Browser, SSR, and React Server Components.
React Hooks/Utils done right. For browser, SSR, and React Server Components. Made by Sukka (https://skk.moe)