2.5 KiB
2.5 KiB
| title | localeTitle |
|---|---|
| Functional Components vs Class Components | Componentes Funcionais vs Componentes de Classe |
Componentes Funcionais vs Componentes de Classe
Existem basicamente dois componentes no React:
- Componentes Funcionais
- Componentes de Classe
Componentes Funcionais
- Componentes funcionais são funções básicas do JavaScript. Estas são tipicamente funções de seta, mas também podem ser criadas com a palavra-chave de
functionregular. - Às vezes, são chamados de componentes "burros" ou "sem estado", pois simplesmente aceitam dados e os exibem de alguma forma; ou seja, eles são os principais responsáveis pela renderização da interface do usuário.
- Os métodos de ciclo de vida de reação (por exemplo,
componentDidMount) não podem ser usados em componentes funcionais. - Não há nenhum método de renderização usado em componentes funcionais.
- Esses são os principais responsáveis pela interface do usuário e são normalmente apenas de apresentação (por exemplo, um componente Button).
- Componentes funcionais podem aceitar e usar adereços.
- Componentes funcionais devem ser favorecidos se você não precisar usar o estado Reagir.
import React from "react";
const Person = props => (
<div>
<h1>Hello, {props.name}</h1>
</div>
);
export default Person;
Componentes de Classe
- Componentes de classe fazem uso da classe ES6 e estendem a classe
Componentno React. - Às vezes chamados de componentes "inteligentes" ou "com estado", pois tendem a implementar lógica e estado.
- Os métodos de ciclo de vida de reação podem ser usados dentro de componentes de classe (por exemplo,
componentDidMount). - Você passa para os componentes da classe e acessa-os com
this.props
import React, { Component } from "react";
class Person extends Component {
constructor(props){
super(props);
this.state = {
myState: true;
}
}
render() {
return (
<div>
<h1>Hello Person</h1>
</div>
);
}
}
export default Person;