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？

1 个答案: