Académique Documents
Professionnel Documents
Culture Documents
Introdução
Vamos ver algumas diferenças entre as duas formas, e quando é o melhor momento para usar
um ou outro.
“The ratio of time spent reading versus writing (code) is well over 10 to 1 … making it easy to
read makes it easier to write.”
Vamos criar um componente apenas retornando uma mensagem, o famoso “Hello world”.
Vamos utilizar a sintaxe do ES6+.
Esse código simples, pode ser compreendido por qualquer desenvolvedor Javascript, aqui não
possui nada de React, apenas Javascript. Temos a definição da função e no final exportamos
ela como padrão. Isso é tudo que precisamos para criar o nosso primeiro componente
funcional.
Embora isso seja um componente React, na maioria das situações acabamos retornando JSX,
com base no que recebemos por parâmetro. Dessa forma, criamos componentes reutilizáveis.
A partir disso, vamos alterar nosso componente para quando receber uma entrada, gerar uma
saída JSX.
import React from "react"
const helloWorld = props => {
return (
<div>
<p><b>{props.name}</b> Hello World</p>
</div>
)
}
export default helloWorld
Agora podemos utilizar nosso componente dentro do React, passando nossa props da seguinte
maneira:
Desempenho, como não possui nenhum método de estado ou de ciclo de vida, não é
necessário alocar memória;
Então sempre devo criar componentes funcionais? Isso vai depender de cada caso. Mas, eles
são sempre um ponto de partida para criar componentes. Na próxima parte vamos observar
quando usamos componentes baseados em classes.
Basicamente é uma classe que estende de React.Component. Para você entender melhor como
funciona, veremos nosso mesmo código acima, mas em forma de componente em classe:
import React, { Component } from "react"
class helloWorld extends Component {
render() {
return (
<div>
<p><b>{this.props.name}</b> Hello World</p>
</div>
)
}
}
export default helloWorld
Em alguns casos você precisara acompanhar o estado do seu componente ou criar outras
funções, por exemplo, para saber se clicou em algum botão, ou fazer alguma ação e salvar o
estado. Nesse caso, componentes em classes é uma opção melhor. Geralmente, sempre começa
criando componentes funcionais, e com a necessidade podemos refatorar para classes.
Além disso, esses componentes possuem algumas funções de ciclo de vida, tais como
componentDidMount(). Após a tela ser renderizada essa função é chamada. Podemos utiliza-lá
consultando uma API. Sempre podemos e devemos separar nossa regra de negócio da nossa
apresentação, criando outras funções, além da render().
Resumo
Inicie com componentes funcionais e quando sentir a necessidade, altere para componentes
baseados em classes;
Ao usar o estado do componente, isso tornará ele mais lento. Use o componente adequado
para o problema que quiser solucionar.