我有一个应用程序，我需要使用样式组件的 createGlobalStyle 来执行一些 RTL css。

使用它的组件可能会在页面上多次呈现（例如，todo 应用中的 ListItem） 但如果可能的话，我不希望为它的每个实例重新创建样式，所以我想创建一个 单身。本质上，我需要一种机制来跟踪渲染了多少组件， 确保只有一个正在渲染样式 - 并且可以在一个渲染时与集合进行通信 已被移除（以便其他人可以捡起）。

我不确定如何实例化和验证这一点，因此感谢您提供任何帮助。

目前我的代码看起来像

import * as React from "react";
import { createGlobalStyle } from "styled-components";

type CreateGlobalStyleParams = Parameters<typeof createGlobalStyle>;

const createGlobalStyleSingleton = (...params: CreateGlobalStyleParams) => {
    const GlobalStyle = createGlobalStyle(...params);
    let instanceId = 0; 

    return () => {
        const [state] = React.useState({ instanceId: -1 }); 

        if (state.instanceId === -1) {
            state.instanceId = instanceId++;
        }

        React.useEffect(
            () => () => {
                --instanceId;
            },[],);

        return state.instanceId === 1 ? <GlobalStyle /> : <></>;
    };
};

export default createGlobalStyleSingleton;

然而，正如我所提到的，我不确定验证它的最佳方法实际上是创建一个单例（我可以使用 console.log 但有 可能是更好的方法）。它也不处理与其他人的跟踪通信风格 的集合，并处理引用集合组件被移除的情况，从集合中选择另一个项目作为引用。

我在谷歌上搜索了一些，但对这个特定任务的了解不多。

正在寻找有关如何完成此操作的参考资料、示例和/或指导...感谢您提供任何帮助:)