javascript - insertar - ¿Cuándo utilizar los componentes React basados en la clase ES6 frente a los componentes funcionales ES6 React?

reactjs español

Question

Después de pasar un tiempo aprendiendo React, entiendo la diferencia entre los dos paradigmas principales de crear componentes.

Mi pregunta es cuándo debo usar cuál y por qué. ¿Cuáles son los beneficios / compensaciones de uno sobre el otro?

Clases de ES6:

import React, { Component } from ''react'';
export class MyComponent extends Component {
render() {
return (
<div></div>
);
}
}

Funcional:

const MyComponent = (props) => {
return (
<div></div>
);
}

Estoy pensando en funcional cada vez que no hay un estado para ser manipulado por ese componente, pero ¿es eso?

Supongo que si uso algún método de ciclo de vida, podría ser mejor ir con un componente basado en la clase.

Answer 1

A partir de React 16.8, el término Componentes funcionales sin estado es engañoso y debe evitarse porque ya no son apátridas ( React.SFC en desuso , Dan Abramov en React.SFC ), pueden tener estado, pueden tener ganchos (que actúan como el ciclo de vida métodos) también, se superponen más o menos con los componentes de la clase.

Componentes basados ​​en clase

• estado
• métodos de ciclo de vida
• memorización con https://reactjs.org/docs/react-api.html#reactpurecomponent

Componentes funcionales:

• estado ( useState , useReducer ganchos)
• métodos de ciclo de vida (a través de los ganchos useEffect , useLayoutEffect )
• memorización a través del https://reactjs.org/docs/react-api.html#reactmemo HOC

¿Por qué prefiero los componentes funcionales?

• React proporciona el gancho useEffect, que es una forma muy clara y concisa de combinar los métodos del ciclo de vida del componentDidMount , componentDidUpdate y componentWillUnmount
• Con los ganchos puede extraer la lógica que se puede compartir fácilmente entre los componentes y probar
• menos confusión sobre el alcance

Reaccione la motivation sobre por qué usar ganchos (es decir, componentes funcionales)

Answer 2

Siempre trate de usar funciones sin estado (componentes funcionales) siempre que sea posible. Hay escenarios en los que necesitará usar una clase React normal:

• El componente necesita mantener el estado.
• El componente se está volviendo a representar demasiado y debe controlarlo a través de shouldComponentUpdate
• Necesitas un componente contenedor

ACTUALIZAR

Ahora hay una clase React llamada PureComponent que puede extender (en lugar de Component ) que implementa su propia shouldComponentUpdate que se encarga de la comparación de accesorios poco profundos para usted. Lee mas

Answer 3

Tienes la idea correcta. Vaya con funcional si su componente no hace mucho más que tomar algunos accesorios y renderizar. Puedes pensar en estas como funciones puras porque siempre se renderizarán y se comportarán de la misma manera, dados los mismos accesorios. Además, no les importan los métodos del ciclo de vida o tienen su propio estado interno.

Debido a que son livianos, escribir estos componentes simples como componentes funcionales es bastante estándar.

Si sus componentes necesitan más funcionalidad, como mantener el estado, use clases en su lugar.

Más información: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Answer 4

ACTUALIZACIÓN Marzo 2019

https://overreacted.io/how-are-function-components-different-from-classes/

ACTUALIZACIÓN Febrero 2019:

Con la introducción de los ganchos React , parece que los equipos React quieren que usemos componentes funcionales siempre que sea posible (lo que sigue mejor la naturaleza funcional de JavaScript).

Su motivación:

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

Un componente funcional con ganchos puede hacer almost todo lo que un componente de clase puede hacer, sin ninguno de los inconvenientes mencionados anteriormente.

Recomiendo usarlos tan pronto como sea posible.

Respuesta original

Los componentes funcionales no son más livianos que los componentes basados ​​en clases, "funcionan exactamente como clases". - https://github.com/facebook/react/issues/5677

El enlace anterior está un poco anticuado, pero la documentación de React 16.7.0 dice que los componentes funcionales y de clase:

"son equivalentes desde el punto de vista de React". - https://reactjs.org/docs/components-and-props.html#stateless-functions

Esencialmente no hay diferencia entre un componente funcional y un componente de clase que solo implementa el método de representación, que no sea la sintaxis.

En el futuro (citando el enlace anterior) "nosotros [Reaccionar] podríamos agregar tales optimizaciones".

Si está tratando de aumentar el rendimiento eliminando renders innecesarios, ambos enfoques brindan soporte. memo para componentes funcionales y PureComponent para clases.

- https://reactjs.org/docs/react-api.html#reactmemo

- https://reactjs.org/docs/react-api.html#reactpurecomponent

Realmente depende de ti. Si desea menos repetitivo, vaya funcional. Si te encanta la programación funcional y no te gustan las clases, hazlo funcional. Si desea coherencia entre todos los componentes en su base de código, vaya con clases. Si está cansado de refactorizar de componentes funcionales a componentes basados ​​en clases cuando necesita algo como state , vaya a clases.