javascript - 如何创建逆向 react 门户

Question

React portals让您将 React 子元素渲染到不同的 DOM 元素中，在页面上完全独立的某个位置。

我想做相反的事情:我想在页面的其他地方渲染一次 DOM 元素，然后根据我的 React 树将其拉入我的 React DOM 输出。

具体用例是Monaco Editor 。它是一个复杂的组件，从头开始渲染成本高昂，但更新成本低廉。在我的应用程序中，当用户打开/关闭不同的内容时，编辑器会出现/消失。这意味着每次打开新内容时，React 都会从头开始创建组件，而创建新编辑器的延迟使得该操作比我想要的要慢。

我想渲染它一次，将其隐藏在某个地方，然后在需要的时间和位置将其显示在 DOM 中的正确位置。我知道我任何时候只需要一个实例。

Answer 1

最后我自己建了一个库:https://github.com/httptoolkit/react-reverse-portal .

在一个地方一次性渲染您的内容，然后将其传递并将其插入到其他位置的 DOM 中，而无需重新渲染。

示例:

import * as portals from 'react-reverse-portal';

const MyComponent = (props) => {
    const portalNode = React.useMemo(() => portals.createPortalNode());

    return <div>
        <portals.InPortal node={portalNode}>
            <MyExpensiveComponent
                myProp={"defaultValue"}
            />
        </portals.InPortal>

        { props.componentToShow === 'component-a'
            ? <ComponentA portalNode={portalNode} />
            : <ComponentB portalNode={portalNode} /> }
    </div>;
}

const ComponentA = (props) => {
    return <div>
        A:
        <portals.OutPortal node={props.portalNode} />
    </div>;
}

const ComponentB = (props) => {
    return <div>
        B:
        <portals.OutPortal
            node={props.portalNode}
            myProp={"newValue"}
            myOtherProp={123}
        />
    </div>;
}