Con la introducción de ganchos en React, la principal confusión ahora es cuándo usar componentes de función con ganchos y componentes de clase porque con la ayuda de los ganchos se pueden obtener ganchos de state y de lifecycle hooks de vida parcial incluso en componentes de función. Entonces, tengo las siguientes preguntas.
Por ejemplo, los componentes de función con ganchos no pueden ayudar en el rendimiento como lo hacen los componentes de clase. No pueden omitir las re-renderizaciones ya que no tienen implementado shouldComponentUpdate . ¿Hay más razones?
Gracias por adelantado.
La idea detrás de la introducción de Hooks y otras características como React.memo y React.lazy es ayudar a reducir el código que uno tiene que escribir y también agregar acciones similares.
Los documentos mencionan pocas razones realmente buenas para usar Hooks en lugar de clases.
Es difícil reutilizar la lógica con estado entre los componentes. Generalmente, cuando usa HOC o renderProps, tiene que reestructurar su aplicación con múltiples jerarquías cuando intenta verla en DevTools. Los ganchos evitan tales escenarios y ayudan en un código más claro.
Los componentes complejos se vuelven difíciles de entender A menudo con clases El código que no está relacionado entre sí a menudo termina junto o el código relacionado tiende a dividirse, se vuelve cada vez más difícil de mantener. Un ejemplo de tal caso son los detectores de eventos, donde agrega detectores en componentDidMount y los elimina en componentWillUnmount . Los ganchos te permiten combinar estos dos
Las clases confunden tanto a las personas como a las máquinas Con las clases, debe comprender el enlace y el contexto en el que se llaman las funciones, lo que a menudo se convierte en confusión.
los componentes de función con ganchos no pueden ayudar en el rendimiento como lo hacen los componentes de clase. No pueden omitir las re-renderizaciones ya que no tienen implementado shouldComponentUpdate.
El componente de función se puede memorizar de manera similar a React.PureComponent con clases haciendo uso de React.memo y puede pasar una función de comparación como segundo argumento a React.memo que le permite implementar un comparador personalizado
La idea es poder escribir el código que puede escribir usando el componente de clase React usando el componente de función con la ayuda de Hooks y otras utilidades. Los ganchos pueden cubrir todos los casos de uso de las clases al tiempo que brindan más flexibilidad para extraer, probar y reutilizar el código.
Dado que los ganchos aún no se envían por completo, se recomienda no usar ganchos para componentes críticos y comenzar con un componente relativamente pequeño, y sí, puede reemplazar completamente las clases con componentes de función.
Sin embargo, una de las razones por las que aún debe optar por los componentes de clase en lugar de los componentes de función con ganchos hasta que Suspense esté fuera de la búsqueda de datos. La obtención de datos con ganchos useEffect no es tan intuitiva como lo es con los métodos de ciclo de vida.
También @DanAbramov en uno de sus tweets mencionó que los ganchos están diseñados para funcionar con Suspenso y hasta que se acabe el suspenso, es mejor usar Clase.
¿Oficialmente parece que los ganchos reemplazarán por completo las clases? tal vez algún día, pero piénsalo; los anzuelos han existido durante 3 años (a partir de marzo de 2021), y adoptarlos tiene ventajas y desventajas (más ventajas que desventajas... no me malinterpreten)
Yo mismo tengo mucha más experiencia con la gestión estatal/clases y después de investigar y probar mucho, descubrí que necesitamos conocer muy bien tanto las clases como los ganchos. Los ganchos requieren una fracción del código para componentes simples y parecen excelentes para optimizar los HOC. Mientras tanto, las clases parecen mejores con enrutamiento, componentes de contenedores y programación asíncrona, por ejemplo.
Estoy seguro de que hay muchos más casos en los que cada tecnología es mejor, pero mi punto es que los programadores necesitan conocer muy bien tanto los ganchos como las clases, especialmente cuando trabajan en proyectos con más de 100,000 líneas de código y millones de usuarios . Lea más aquí: https://stackoverflow.com/a/60134353/11239755
Los ganchos reducen en gran medida la cantidad de código que necesita escribir y aumentan su legibilidad.
Sin embargo, vale la pena señalar que hay procesos ocultos detrás (al igual que el componente se montó, etc.), lo que significa que si no comprende lo que está sucediendo, puede ser difícil solucionarlo. Lo mejor es experimentar con ellos y leer los documentos por completo antes de implementarlos en un proyecto en vivo.
Además, todavía hay soporte/documentación limitados para probar ganchos en comparación con las clases. https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga
Actualización 28/08/2020 Use la biblioteca de prueba de ganchos de reacción con ganchos personalizados para probar https://github.com/testing-library/react-hooks-testing-library