Article image
Rebecca Ignacio
Rebecca Ignacio16/06/2022 01:31
Compartilhe

Saiba qual a diferença entre Function Component e Class Component em Reactjs

  • #React

Você já se perguntou Qual a diferença entre Function Component e Class Component?

Um functional component é o método mais comum de criar um componente em Reactjs que basicamente é uma função em JS e segue uma abordagem funcional. Também conhecido como Componentes Stateless, por simplesmente aceitar um dado, sem necessidade de ter lógica nele.

image

Já o Class component é uma maneira mais sofisticada para criar componentes, com ela se segue o principio de orientação e objetos, é necessário o método render para retornar o html. Conhecido também como Stateful Components, visto que é implementado lógica e estados.

image

Quais as principais diferenças?

image

Existe vantagem em usar um ou outro?

Anterior a introdução dos hooks, a maior diferença entre um componente que estende React.Component (classe) e um stateless component (função) era a possibilidade de manter um estado interno apenas no primeiro. Após a adição dos hooks, temos a possibilidade de utilizar estado em ambos, então em prática não existe vantagem entre um em outro. Mas você pode decidir o que é melhor para você e seu projeto.

Algumas referencias:

https://pt.stackoverflow.com/questions/418340/existe-desvanatgens-de-criar-um-componente-no-react-por-fun%C3%A7%C3%A3o-ao-inv%C3%A9s-de-class

https://backefront.com.br/diferenca-class-component-function-component-react/

https://cursos.alura.com.br/forum/topico-qual-a-diferenca-entre-function-e-class-component-107140#:~:text=Hoje%20a%20diferen%C3%A7a%20basicamente%20%C3%A9,usar%20o%20componente%20de%20classe.

Compartilhe
Comentários (1)
Raphael Pascon
Raphael Pascon - 16/06/2022 02:50

Muito bom! só não uso o Class component pq não sei mesmo, então faço funçãozinha simples :(