Componentes do React - Suportes e estados no ReactJS com exemplos

“No React, tudo é um componente”

Se você está familiarizado com o React, deve ter ouvido ou lido essa frase muitas vezes. Mas você sabe o que significa exatamente e como é usado? Caso contrário, leia este blog para aprender tudo sobre os componentes do React e as diferentes fases do ciclo de vida. Eu tenho certeza quando você terminar lendo este blog, você terá um entendimento completo sobre os componentes do React e os conceitos que os envolvem. Mas antes de prosseguir, dê uma olhada rápida nos tópicos que irei discutir:

• O que são componentes React?
• Vantagens dos componentes React
• Adereços
• Estados
• Estados vs Props
• Ciclo de vida do componente React

O que são componentes React?

Anteriormente, os desenvolvedores tinham que escrever 1000 linhas de código para desenvolver um aplicativo simples de página única. A maioria desses aplicativos seguia a estrutura tradicional do DOM e fazer alterações neles era muito desafiador e uma tarefa tediosa para os desenvolvedores.Eles tiveram que procurar manualmente o elemento que precisava da mudança e atualizá-lo de acordo. Mesmo um pequeno erro pode levar à falha do aplicativo. Além disso, atualizar o DOM era muito caro. Assim, a abordagem baseada em componentes foi introduzida. Nessa abordagem, todo o aplicativo é dividido em blocos lógicos chamados de Componentes. React foi um dos frameworks que optou por essa abordagem.Se você está planejando construir sua carreira em desenvolvimento web, o início precoce abriria muitas oportunidades para você.

Agora vamos entender o que são esses componentes.

Os componentes do React são considerados os blocos de construção da interface do usuário. Cada um desses componentes existe no mesmo espaço, mas são executados independentemente um do outro. Os componentes React têm sua própria estrutura, métodos e APIs. Eles são reutilizáveis ​​e podem ser injetados em interfaces conforme a necessidade. Para entender melhor, considere toda a IU como uma árvore.Aqui, o componente inicial torna-se a raiz e cada uma das peças independentes torna-se ramos, que são posteriormente divididos em sub-ramos.

Isso mantém nossa IU organizada e permite que os dados e as mudanças de estado fluam logicamente da raiz para os ramos e depois para os sub-ramos. Os componentes fazem chamadas para o servidor diretamente do lado do cliente, o que permite que o DOM atualize dinamicamente sem atualizar a página. Isso ocorre porque os componentes de reação são criados com base no conceito de solicitações AJAX. Cada componente possui sua própria interface que pode fazer chamadas para o servidor e atualizá-los. Como esses componentes são independentes um do outro, cada um pode ser atualizado sem afetar os outros ou a IU como um todo.

Nós usamos React.createClass () método para criar um componente. Este método deve receber um argumento de objeto que definirá o componente React. Cada componente deve conter exatamente um render () método. É a propriedade mais importante de um componente responsável por analisar o HTML em JavaScript, JSX. este render () retornará a representação HTML do componente como um nó DOM. Portanto, todas as tags HTML devem ser colocadas em uma tag dentro do render () .

A seguir está um código de amostra para a criação de um componente.

tipos de funções em sql

importar React de 'react' importar ReactDOM da classe 'react-dom' MyComponent extends React.Component {render () {return (
Seu Id é {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Estados vs Props

Ciclo de vida do componente React

O React fornece vários métodos que notificam quando ocorre um determinado estágio no ciclo de vida de um componente. Esses métodos são chamados de métodos de ciclo de vida. Esses métodos de ciclo de vida não são muito complicados. Você pode pensar nesses métodos como manipuladores de eventos especializados que são chamados em vários pontos durante a vida de um componente. Você pode até adicionar seu próprio código a esses métodos para realizar várias tarefas. Falando sobre o ciclo de vida do componente, o ciclo de vida é dividido em 4 fases. Eles são:

1. Fase inicial
2. Fase de atualização
3. Fase de mudança de adereços
4. Fase de Desmontagem

Cada uma dessas fases contém alguns métodos de ciclo de vida que são específicos apenas para eles. Então, vamos descobrir o que acontece durante cada uma dessas fases.

uma. Fase inicial - A primeira fase do ciclo de vida de um componente React é a fase inicial ou fase de renderização inicial. Nesta fase,o componente está prestes a iniciar sua jornada e chegar ao DOM. Esta fase consiste nos seguintes métodos que são chamados em uma ordem predefinida.

1. getDefaultProps (): Este método é usado para especificar o valor padrão de this.props . Ele é chamado antes mesmo de seu componente ser criado ou qualquer adereço do pai é passado para ele.
2. getInitialState (): Este método é usado paraespecificamos o valor padrão de this.state antes de seu componente ser criado.
3. componentWillMount (): Este é o último método que você pode chamar antes que seu componente seja renderizado no DOM. Mas se você ligar setState () dentro deste método, seu componente não será renderizado novamente.
4. render (): º Este método é responsável por retornar um único nó HTML raiz e deve ser definido em cada um dos componentes. Você pode voltar nulo ou falso caso você não queira renderizar nada.
5. componentDidMount (): Depois que o componente é renderizado e colocado no DOM, este método é chamado. Aqui você pode realizar qualquer operação de consulta DOM.

b. Fase de atualização - Depois que o componente é adicionado ao DOM, eles podem ser atualizados e renderizados novamente apenas quando ocorre uma mudança de estado. Cada vez que o estado muda, o componente chama seu render () novamente. Qualquer componente que dependa da saída deste componente também chamará seu render () novamente. Isso é feito para garantir que nosso componente esteja exibindo a versão mais recente de si mesmo. Assim, para atualizar com êxito o estado dos componentes, os seguintes métodos são invocados na ordem indicada:

1. shouldComponentUpdate (): Usando este método, você pode controlar o comportamento de atualização de seu componente. Se você retornar um verdadeiro a partir deste método,o componente será atualizado. Caso contrário, se este método retornar umfalso, o componente irá ignorar a atualização.
2. componentWillUpdate (): To método dele é chamado japenas antes que seu componente esteja prestes a ser atualizado. Neste método, você não pode alterar o estado do componente chamando this.setState .
3. render (): Se você está retornando falso via shouldComponentUpdate () , o código dentro render () será chamado novamente para garantir que seu componente seja exibido corretamente.
4. componentDidUpdate (): Depois que o componente é atualizado e renderizado, este método é chamado. Você pode colocar qualquer código dentro desse método, que deseja executar assim que o componente for atualizado.

c. Fase de mudança de suporte - Depois de o componente foi renderizado no DOM, a única outra vez que o componente será atualizado, além da mudança de estado, é quando seu valor de propriedade muda. Praticamente essa fase funciona de forma semelhante à fase anterior, mas ao invés da estadual, trata dos adereços. Assim, esta fase possui apenas um método adicional da Fase de Atualização.

1. componentWillReceiveProps (): Este método retorna um argumento que contém o novo valor prop que está prestes a ser atribuído ao componente.
   O resto dos métodos do ciclo de vida se comportam de forma idêntica aos métodos que vimos na fase anterior.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. render ()
5. componentDidUpdate ()

d.A fase de desmontagem -Esta é a última fase do ciclo de vida dos componentes em que o componente é destruído e removido do DOM completamente. Ele contém apenas um método:

1. componentWillUnmount (): Depois que esse método é invocado, seu componente é removido do DOM permanentemente.Neste método, YVocê pode realizar qualquer tarefa relacionada à limpeza, como remover ouvintes de eventos, parar temporizadores, etc.

A seguir está o diagrama do ciclo de vida completo:

Isso nos leva ao final do blog sobre React Components. Espero que neste blog eu tenha conseguido explicar claramente o que são componentes React e como são usados. Você pode consultar meu blog em , caso você queira saber mais sobre o ReactJS.

Se você deseja ser treinado em React e deseja desenvolver interfaces de usuário interessantes por conta própria, verifique o pela Edureka, uma empresa de aprendizagem online confiável com uma rede de mais de 250.000 alunos satisfeitos espalhados por todo o mundo.

Tem alguma questão para nós? Mencione isso na seção de comentários e entraremos em contato com você.