Gancho de aceleración y antivibración de escritura a mano (versión ts)
Motivo del fallo: cada vez que se renderiza, la función interna se regenerará y vinculará al componente.
Solución: También es muy simple. Utilice useCallback y confíe en pasar una matriz vacía para garantizar que useCallback siempre devuelva la misma función.
Lo anterior es la oportunidad para este artículo.
En cuanto a la idea de estrangular la escritura a mano, personalmente creo que la clave está en la aplicación de cierres y funciones de orden superior. Si piensas desde este punto de vista, tu mente no estará en blanco cuando escribas.
Esta función solo se puede ejecutar una vez dentro de los n segundos posteriores a la activación del evento. Si el evento se activa nuevamente dentro de n segundos, se volverá a calcular el tiempo de ejecución de la función.
Esto funciona, pero no es lo suficientemente bueno. Si desea convertirse en ingeniero senior, debe pensar profundamente en los problemas y considerar situaciones más complejas para poder crecer.
Hay muchas versiones funcionales de la función anti-vibración. Puedes echar un vistazo a la función de-vibración de lodash.
El evento se activa continuamente, pero la función solo se ejecuta una vez cada n segundos.
En base a ambos, decidir según el escenario y las necesidades, y finalmente si el temporizador debe realizar esta función después de que el evento deje de dispararse.
Hay un lugar donde alguien puede tener preguntas, ¿por qué no usar useRef para guardar el tiempo de espera?
Algunas personas pueden pensar que hay un problema con esto: debido a que cada vez que se vuelve a renderizar un componente, se ejecutarán todos los enlaces, por lo que el tiempo de espera en la función de orden superior de useDebounce no puede desempeñar un papel de almacenamiento en caché. rol (la consola en useDebounce .log(timeOut) imprime nulo cada vez que se representa). Por lo tanto, el tiempo de espera no es confiable y el núcleo antivibración se destruye.
Pero si eliminas el rebote de la función, console.log(timeOut) encontrará que lo que se imprime es el tiempo de espera anterior, por lo que no hay problema.
Finalmente, durante el proceso de escritura, es donde realmente paso el tiempo pensando. Después de hacerlo, sentí una sutil sensación de satisfacción.