Una vez que salí de los ámbitos, de los eventos, debo seguir haciendo referencia a las variables que se declararon en el ámbito principal. En el siguiente código, fitAddon . Para evitar que el GC de JS limpie mi variable, ¿debo mantenerlo global como se muestra a continuación? esto no me queda muy claro.
// do I need to keep this to use in handleResize() event or // it would be fine if it was local, ie, same scope as // it was initialized? let fitAddon: FitAddon; export const Terminal = () => { const id = 'xterm-container'; useEffect(() => { const terminal = new TerminalType({ cursorBlink: true, cursorStyle: window.api.isWindows ? "bar" : "underline", cols: DefaultTerminalSize.cols, rows: DefaultTerminalSize.rows, }); fitAddon = new FitAddon(); terminal.loadAddon(fitAddon); terminal.open(document.getElementById(id) as HTMLElement); fitAddon.fit(); function handleResize() { fitAddon.fit(); } window.addEventListener('resize', handleResize); return () => { return window.removeEventListener('resize', handleResize); } }, []); return ( <div id={id}></div> ) }No, no lo haces.
Mientras exista el oyente:
window.addEventListener('resize', handleResize); la devolución de llamada no se recolectará como basura. Dado que la devolución de llamada hace referencia fitAddon , fitAddon tampoco se recolectará como basura, sin importar dónde se declare. Por lo tanto, no dude en declararlo dentro de la devolución de llamada del efecto.
const fitAddon = new FitAddon(); terminal.loadAddon(fitAddon); // ...