Levantando o Estado: Como os Componentes Filhos do React se Comunicam com os Pais

O React usa um fluxo de dados unidirecional de pai para filho, nunca de filho para pai. Mas o que acontece quando uma criança precisa se comunicar com os pais?

Aprenda como aumentar o estado para permitir que um componente filho envie dados para um componente pai.

Componentes em React

O React organiza os componentes em uma hierarquia onde os componentes filhos se aninham dentro dos componentes pais. Essa hierarquia forma os blocos de construção da interface do usuário do aplicativo.

</ParentComponent>

Cada componente filho recebe dados, conhecidos como props, de seu componente pai. Os adereços React podem conter vários tipos de dados, como arrays, objetos, strings ou até mesmo funções. O componente filho não pode manipular diretamente esses dados.

Considere o seguinte componente, chamado Contra-botão:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

O componente mantém um valor de estado denominado contar que aumenta cada vez que um usuário clica no botão.

Suponha que você aninhou o componente CounterButton em outro componente chamado Home:

const Home = () => {
return (

 )
}

Se você quiser exibir o valor da contagem do Contra-botão componente dentro do componente Home, você encontrará um desafio.

Conforme mencionado, o React impõe um fluxo de dados unidirecional de pai para filho. Portanto, o componente CounterButton não pode compartilhar diretamente o valor do estado de contagem com o componente Home.

Para contornar isso, você precisa elevar o estado.

Como aumentar o estado para compartilhar dados entre componentes

O estado de elevação refere-se a mover o estado de um componente para um nível superior na árvore de componentes, para um componente pai. Depois de aumentar o estado, você pode transmiti-lo aos componentes filhos como valores prop.

No exemplo de contador anterior, você precisaria mover o estado de contagem e o manipularIncremento função para o componente Home. Você precisaria então passar a função handleIncrement para o componente CounterButton como um suporte.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Em seguida, você precisa modificar o componente CounterButton para aceitar a função handleIncrement e chamá-la quando um usuário clicar no botão.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

Levantar o estado centraliza os dados e transfere a responsabilidade de administrando o estado da criança para o pai.

Além de ajudar a exibir dados no componente pai, a elevação do estado pode ajudá-lo a sincronizar dados em vários componentes.

Suponha que você tenha um componente Cabeçalho e Rodapé aninhado dentro do componente pai e cada um desses componentes também exibe a contagem compartilhada. Para compartilhar esse valor, você pode passá-lo para esses componentes como acessórios.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

No entanto, é preciso ter cuidado ao levantar o estado para não acabar em uma situação conhecida como perfuração de hélice.

O Desafio da Perfuração Prop

À medida que seu aplicativo cresce, você pode descobrir que vários componentes mais profundos na árvore de componentes precisam de acesso a um estado compartilhado. Para disponibilizar esse estado compartilhado para os componentes aninhados, você precisaria passar props por meio de componentes intermediários. Este processo pode levar à perfuração de suporte.

A perfuração prop torna difícil rastrear como os dados fluem e pode levar a códigos difíceis de manter.

Para mitigar a perfuração de suporte, mas ainda compartilhar dados entre componentes, considere usar o contexto React. O contexto React permite centralizar o estado para que esteja disponível em todo o aplicativo.

Compartilhando dados no React usando acessórios

Quando você precisar compartilhar dados de um componente filho com seu componente pai, eleve o estado para o componente pai e depois passe a função que atualiza o estado para o componente filho como acessórios.

Nos casos em que o componente filho está profundamente aninhado na árvore de componentes, use uma ferramenta de gerenciamento de estado como React Context ou uma ferramenta de terceiros como React Redux para evitar perfuração de suporte.