如何在 useEffect 挂钩之外使用 Library Constructer？

Question

我在我的 React 应用程序中使用了一个库（它们没有节点包），我在 <head>.

的 CDN 上引入了这个库

我正在使用 useEffect 挂钩来防止它一遍又一遍地调用库构造函数，这只会破坏它。但是我无法让图书馆在钩子之外显示自己。

示例...

export default function ReactComponent(){
   let tdna = undefined;

   useEffect(() => {
        tdna = new TypingDNA();
        console.log(tdna)
    }, [])
    
    console.log(tdna)
}

第一个控制台日志显示了库，正如我预期的那样只有一次。但我试图在全球范围内定义它是徒劳的。

Answer 1

我能够使用 useRef 钩子找到一个解决方案，以获得在后续渲染期间不会改变的稳定值

export default function ReactComponent(){
   let tdna = useRef();

   useEffect(() => {
       if (!tdna.current) {
            tdna.current = new TypingDNA();
        }
    }, [tdna])
    
    console.log(tdna.current)
}

如何在 useEffect 挂钩之外使用 Library Constructer？

How do you use Library Constructer outside of a useEffect hook?

constructor

scope

cdn

reactjs