Fluxo de dados no React
o básico do fluxo de dados para aprender React.
Usar o react nos dá muitas vantagens: componentização e a mágica da reutilização de código é uma das suas ferramentas mais atrativas. Mas entender o fluxo de dados entre esses componentes pode deixar a gente muito confuso até pegarmos o ‘jeito’ e é muito fácil se perder nessas informações, dependendo do tamanho da sua aplicação.
Explicando de uma forma bem básica, imaginemos dois componentes: um componente ‘pai’, que seria o componente central, que renderiza todos os nossos componentes na DOM e um componente ‘filho’ que é renderizado por esse pai. Vejam essa árvore de de componentes, para uma melhor visualização:
Nessa imagem conseguimos visualizar o fluxo das informações. Aqui temos os componentes mapeados à esquerda e na direita podemos ver a árvore de dados.
Mas antes de avançarmos, vamos entender o que são duas propriedades muito importantes para o aprendizado do React: State e Props.
state
Segundo a documentação “State é gerenciado de dentro do componente, como variáveis declaradas dentro da função”
É o tipo de informação que vive localmente no nosso componente. Podemos dizer que é o principal do React. É um dado que pode ser passado de um componente pai para um componente filho (na imagem acima, por exemplo, do componente 1 para o 2) através de props.
props
Essa informação, diferentemente do state, é imutável. São passados para o como parâmetros de funções. São passados de componente pai para componente filho.
É importante frisar que qualquer dado deve respeitar a hierarquia dos componentes. O que quero dizer é, se o componente 1 (referenciado na imagem acima) deseja passar algo para o componente 4, ele obrigatoriamente deve passar por todos os outros componentes (2 e 3) primeiro
RESUMINDO
- passagem de dados de componente pai para componente filho é através das props
- o componente filho renderiza dados usando o this.props
Passando ações de um componente filho para um componente pai:
- Um usuário interage com algum elemento da sua aplicação (um click em um botão, por exemplo)
- Um event listener em um elemento da sua aplicação é disparado ( onClick)
- um handler é disparado (handleClick)
- Uma função callback dentro do handler é disparado (onHandlerClick)
- A logica do call back é executada dentro do componente pai
- O state é atualizado
- O dado é mandado de volta e a DOM renderiza novamente
Para finalizar, um pequeno diagrama para melhor visualizar:
referências:
https://pt-br.reactjs.org/docs/faq-state.html
https://medium.com/@aghh1504/2-increment-and-decrease-number-onclick-react-5767b765103c
https://medium.com/swlh/understanding-information-flow-in-react-data-down-action-up-b6c792a8b010
