{"id":656,"date":"2020-01-08T18:30:49","date_gmt":"2020-01-08T21:30:49","guid":{"rendered":"https:\/\/micheladrianomedeiros.com.br\/blog\/?p=656"},"modified":"2020-01-08T18:30:51","modified_gmt":"2020-01-08T21:30:51","slug":"react-native-para-desenvolvimento-mobile-2","status":"publish","type":"post","link":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/","title":{"rendered":"React Native Para Desenvolvimento Mobile #2"},"content":{"rendered":"\n

Virtual DOM<\/strong><\/p>\n\n\n\n

Em todas aplica\u00e7\u00f5es web a\nopera\u00e7\u00e3o mais custosa \u00e9 quando uma aplica\u00e7\u00e3o sofre a muta\u00e7\u00e3o no DOM.<\/p>\n\n\n\n

Para resolver este problema, o\nReact mant\u00e9m uma representa\u00e7\u00e3o virtual do DOM (veja a imagem), o qual \u00e9 chamado\nde Virtual DOM (VDOM).<\/p>\n\n\n\n

Junto com a diferencia\u00e7\u00e3o de\nalgoritmos, React \u00e9 capaz de comparar os dados atuais do DOM e atualizar as\npartes do DOM que mudaram.<\/p>\n\n\n\n

Desta maneira a quantidade de\nmudan\u00e7a \u00e9 menor, isto torna a aplica\u00e7\u00e3o mais r\u00e1pida.<\/p>\n\n\n\n

No in\u00edcio da sua aplica\u00e7\u00e3o\nvoc\u00ea pode n\u00e3o notar a diferen\u00e7a, mas conforme a aplica\u00e7\u00e3o torna-se mais\ncomplexa (o que \u00e9 comum acontecer), voc\u00ea notar\u00e1 os benef\u00edcios que traz para os\nusu\u00e1rios.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Manipular manualmente o DOM \u00e9\numa bagun\u00e7a, e manter o controle do estado anterior do DOM \u00e9 muito dif\u00edcil.<\/p>\n\n\n\n

A imagem a seguir resolve o\nproblema mantendo duas c\u00f3pias do VDOM. A seguir, a diferencia\u00e7\u00e3o de algoritmo \u00e9\naplicada nesses dois VDOMs, o qual principalmente checa as mudan\u00e7as que\nocorreram e retorna opera\u00e7\u00f5es do DOM.<\/p>\n\n\n\n

Essas opera\u00e7\u00f5es do DOM s\u00e3o\nent\u00e3o aplicadas no DOM do navegador atual.<\/p>\n\n\n\n

Vamos entender como funciona\nos componentes do VDOM. No React, todo componente tem um estado, esse estado \u00e9\ncomo um observador.<\/p>\n\n\n\n

Sempre que uma mudan\u00e7a no\nestado acontecer, o React sabe que precisa fazer mudan\u00e7as e faz a renderiza\u00e7\u00e3o.<\/p>\n\n\n\n

Quando o estado da aplica\u00e7\u00e3o\nmuda, \u00e9 gerada uma nova VTree, mais uma vez a diferencia\u00e7\u00e3o de algoritmo\ncompartilha o DOM para pedir por mudan\u00e7as, como mostra na imagem. Desta maneira\na manipula\u00e7\u00e3o manual do DOM \u00e9 m\u00ednima.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Esse recurso do VDOM n\u00e3o \u00e9 s\u00f3\nimportante, mas \u00e9 o recurso que faz a diferen\u00e7a.<\/p>\n\n\n\n

O acesso ao DOM \u00e9 muito lento,\ne tem ficado cada vez mais lento nas maiorias das aplica\u00e7\u00f5es.<\/p>\n\n\n\n

Para a sua aplica\u00e7\u00e3o ser\nr\u00e1pida, voc\u00ea deve acessar o DOM o m\u00ednimo poss\u00edvel, e esta \u00e9 a beleza da\nimplementa\u00e7\u00e3o do VDOM.<\/p>\n\n\n\n

Voc\u00ea n\u00e3o vai notar isto em uma\naplica\u00e7\u00e3o pequena, mas quando a sua aplica\u00e7\u00e3o cresce e tem milhares elementos\nde DOM para atualizar, o React n\u00e3o deixar\u00e1 sua aplica\u00e7\u00e3o cair de performance.<\/p>\n\n\n\n

One-Way Data Flow<\/strong><\/p>\n\n\n\n

React \u00e9 o V do padr\u00e3o MVC, antes\nde falarmos do one-way data flow, voc\u00ea precisa entender os desafios dos\nframeworks MVC.<\/p>\n\n\n\n

Um dos grandes desafios de um\nframework MVC \u00e9 manipular a view. Como voc\u00ea sabe, o componente view do\nframework MVC \u00e9 principalmente a representa\u00e7\u00e3o do DOM.<\/p>\n\n\n\n

\u00c9 simples quando voc\u00ea escreve\num c\u00f3digo que interage com o DOM, mas \u00e9 muito complicado para o framework\nmanipular v\u00e1rios DOM.<\/p>\n\n\n\n

Tradicionalmente a view do MVC\ngeralmente abrange muitos UI, e com isto mudan\u00e7as acontecem mesmo para pequenos\nelementos, e isto faz a app ser renderizada novamente, e o ciclo continua.<\/p>\n\n\n\n

A raz\u00e3o dito \u00e9 que normalmente\na maioria dos frameworks MVC segue o two-way data binding.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

No JavaScript, as mudan\u00e7as dos\ndados na mem\u00f3ria est\u00e3o ligadas a view na UI, isto significa, quando os dados\ns\u00e3o modificados no JavaScript, que est\u00e3o na mem\u00f3ria, os dados ser\u00e3o mudados na\nUI tamb\u00e9m.<\/p>\n\n\n\n

No retorno, quando os dados\nmudam na UI (por exemplo, o DOM) por um clique em um bot\u00e3o ou qualquer outro evento,\neles s\u00e3o atualizados na mem\u00f3ria tamb\u00e9m, permanecendo os dois em sincronia.<\/p>\n\n\n\n

Em teoria, isto funciona muito\nbem e \u00e9 uma ideia perfeita. Contudo, nas aplica\u00e7\u00f5es do mundo real, os problemas\ncrescer\u00e3o quando voc\u00ea tiver uma aplica\u00e7\u00e3o complexa e grande com m\u00faltiplos views\nrepresentando dados em um dos seus models.<\/p>\n\n\n\n

Adicionando mais models e mais\nviews, neste two-way data binding mesmo que as vezes termine em um loop\ninfinito de evento quando uma view atualiza um model, e por sua vez atualiza uma\nview e assim por diante. Ficar\u00e1 como na imagem a seguir.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Outro problema com este\nsistema \u00e9 que as mudan\u00e7as t\u00eam um custo muito alto.<\/p>\n\n\n\n

Quando voc\u00ea introduz um novo\ndesenvolvedor em uma aplica\u00e7\u00e3o complexa desta, \u00e9 dif\u00edcil o entendimento do\nsistema e saber que uma mudan\u00e7a pode afetar v\u00e1rios locais do sistema. Este\nrelacionamento \u00e9 chamado: relacionamento espaguete.<\/p>\n\n\n\n

O React segue o one-way data\nque torna as coisas mais simples. \u00c9 baseado no conceito de separation of\nconcerns (SoC).<\/p>\n\n\n\n

Isto \u00e9 um princ\u00edpio de design\nna ci\u00eancia da computa\u00e7\u00e3o no qual uma aplica\u00e7\u00e3o ou programa \u00e9 dividido por\nse\u00e7\u00f5es distintas, cada um tem um simples endere\u00e7o ou uma refer\u00eancia espec\u00edfica.<\/p>\n\n\n\n

O valor desse princ\u00edpio de design\n\u00e9 simplificar o desenvolvimento na cria\u00e7\u00e3o de aplica\u00e7\u00f5es escal\u00e1veis e de f\u00e1cil manuten\u00e7\u00e3o.<\/p>\n\n\n\n

A vantagem de modularizar o\nc\u00f3digo onde uma se\u00e7\u00e3o individual pode ser reutilizada, desenvolvida e modificada\nindependentemente.<\/p>\n\n\n\n

Faz muito sentido e \u00e9 muito\n\u00fatil em um exemplo de intelligent thinking. https:\/\/www.quora.com\/What-is-intelligent-thinking<\/a><\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Fonte: React Native for Mobile Development: Harness the Power of React Native to Create Stunning iOS and Android Applications<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"

Virtual DOM Em todas aplica\u00e7\u00f5es web a opera\u00e7\u00e3o mais custosa \u00e9 quando uma aplica\u00e7\u00e3o sofre a muta\u00e7\u00e3o no DOM. Para resolver este problema, o React mant\u00e9m uma representa\u00e7\u00e3o virtual do DOM (veja a imagem), o qual \u00e9 chamado de Virtual DOM (VDOM). Junto com a diferencia\u00e7\u00e3o de algoritmos, React \u00e9 capaz de comparar os dados […]<\/p>\n","protected":false},"author":1,"featured_media":348,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reactnative"],"_links":{"self":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts\/656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/comments?post=656"}],"version-history":[{"count":1,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts\/656\/revisions"}],"predecessor-version":[{"id":662,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/posts\/656\/revisions\/662"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/media\/348"}],"wp:attachment":[{"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/media?parent=656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/categories?post=656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-json\/wp\/v2\/tags?post=656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}