O documento fornece uma introdução ao framework React, discutindo conceitos como JSX, fluxo de dados unidirecional, componentes, ciclo de vida e integração com Redux. O autor expressa suas primeiras impressões sobre React, incluindo dúvidas iniciais, e discute como entendeu melhor os conceitos à medida que aprendeu mais.
32. Sobre Fluxo de dados
Sem FrameWork: qualquer componente se
comunica com qualquer componente;
Backbone Pub-Sub: ao invés de ter fn nas
chamadas dos métodos, você tem classes
observando eventos.
Angular JS: 2-way data binding (View, scope,
Controller) e $digest loop
33. Sobre Fluxo de dados
ReactJS: 1-way data flow;
Check
Props
34. Sobre Fluxo de dados
ReactJS: 1-way reactive data flow;
Os dados são passados do elemento pai para o
elemento filho
35. Sobre Fluxo de dados
Props é acessado por this.props
Props
Check
36. Sobre Fluxo de dados
Props é acessado por this.props
Props
Check
37. Sobre Fluxo de dados
This.props é imutável
Apenas leitura cara!
61. VirtualDOM - Fist Render
t
Browser
<html>
<button>AdicionarTexto</button
>
<p></p>
</html>
User View
DOM
Processo Javascript
React V.DOM
62. VirtualDOM - Fist Render
t
Browser
<html>
<button>Adicionar
Texto</button>
<p></p>
</html>
<html>
<button>Adicionar
Texto</button>
<p></p>
</html>
O DOM real é preenchido pelo dom virtual.
User View
DOM
Processo Javascript
React V.DOM
63. VirtualDOM - Fist Render
t
Browser
<html>
<button>Adicionar
Texto</button>
<p></p>
</html>
<html>
<button>Adicionar
Texto</button>
<p>Novo texto adicionado</p>
</html>
O Usuário clica em Adicionar Texto
User View
DOM
Processo Javascript
React V.DOM
64. VirtualDOM - Fist Render
t
Browser
Processo Javascript
React V.DOM
<html>
<button>Adicionar
Texto</button>
<p>Novo texto adicionado</p>
</html>
User View
DOM
<html>
<button>Adicionar
Texto</button>
<p>Novo texto adicionado</p>
</html>
O DIFF é feito e o React adiciona as mudanças
65. E o VirtualDOM?
javascript na memória, simulando o DOM;
render() é disparado quando algo muda;
React faz o diff (DOM X VirtualDOM)
e muda apenas o que realmente mudou;
Rápido e preciso;
66. Ciclo de vida
(Component LifeCycle)
3 Partes principais
Mounting - Um componente irá ser inserido no DOM
Updating - Um componente está para ser renderizado novamente
Unmounting - Um componente está sendo removido do DOM.
+ Métodos interpretativos (Will);
67. Ciclo de vida
(Component LifeCycle)
getInitalState - retorna os dados iniciais do componente e é chamado
antes do componente ser montado.
componentWillMount - Chamado imediatamente antes do componente
ser montado;
componentDidMount - Chamado imediatamente depois do
componente ser montado; Se precisar alterar o DOM deve vir aqui.
Mounting
68. Ciclo de vida
(Component LifeCycle)
ComponenteWillReciveProps(nextProps) - chamado quando um
componente recebe novas propriedades;
shouldComponentUpdate(nextProps, nextState) - Deve retornar um
boolean se o componente deve ser atualizado ou não;
ComponenteWillUpdate(nextProps, nextState) - Chamado
imediatamente antes de uma atualização acontecer.
ComponenteDidUpdate(prevProps, prevState) - Chamado
imediatamente depois da atualização acontecer
Updating
69. Ciclo de vida
(Component LifeCycle)
ComponenteWillUnmount - Chamado imediatamente antes de um
componente ser desmontado e destruído. Limpezas devem ser feitas
aqui.
Unmounting
74. React + Redux
Redux utiliza os conceitos de programação funcional como
a imutabilidade, sempre que uma ação ocorre o estado
anterior recebe um novo estado e este é retornado.
77. “
O princípios básicos
#1 - Uma única fonte de verdade:
Todo o estado será organizado
em formato de árvore e estará
disponível em um único lugar na
sua aplicação.
78. “
O princípios básicos
#2 - O estado é somente leitura:
Ele só pode ser alterado através de uma ação que
envia qual dado deve ser modificado. Garantindo
que todas as mudanças sejam centralizadas em
um único lugar.
79. “
O princípios básicos
#3 - Modificações são feitas por funções
puras:
As ações para a alteração de um estado não
irão modificar o próprio objeto, serão os
reducers os responsáveis por sempre
retornar um novo estado atualizado.
