{"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<p><strong>Virtual DOM<\/strong><\/p>\n\n\n\n<p>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<p>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<p>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<p>Desta maneira a quantidade de\nmudan\u00e7a \u00e9 menor, isto torna a aplica\u00e7\u00e3o mais r\u00e1pida.<\/p>\n\n\n\n<p>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 class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"815\" height=\"621\" src=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/diffingalgorithm.png\" alt=\"\" class=\"wp-image-657\" srcset=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/diffingalgorithm.png 815w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/diffingalgorithm-300x229.png 300w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/diffingalgorithm-768x585.png 768w\" sizes=\"auto, (max-width: 815px) 100vw, 815px\" \/><\/figure>\n\n\n\n<p>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<p>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<p>Essas opera\u00e7\u00f5es do DOM s\u00e3o\nent\u00e3o aplicadas no DOM do navegador atual.<\/p>\n\n\n\n<p>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<p>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<p>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<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"832\" height=\"400\" src=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/vdom.png\" alt=\"\" class=\"wp-image-658\" srcset=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/vdom.png 832w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/vdom-300x144.png 300w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/vdom-768x369.png 768w\" sizes=\"auto, (max-width: 832px) 100vw, 832px\" \/><\/figure><\/div>\n\n\n\n<p>Esse recurso do VDOM n\u00e3o \u00e9 s\u00f3\nimportante, mas \u00e9 o recurso que faz a diferen\u00e7a.<\/p>\n\n\n\n<p>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<p>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<p>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<p><strong>One-Way Data Flow<\/strong><\/p>\n\n\n\n<p>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<p>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<p>\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<p>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<p>A raz\u00e3o dito \u00e9 que normalmente\na maioria dos frameworks MVC segue o two-way data binding.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"808\" height=\"242\" src=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/two-Way-Data-binding.png\" alt=\"\" class=\"wp-image-659\" srcset=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/two-Way-Data-binding.png 808w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/two-Way-Data-binding-300x90.png 300w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/two-Way-Data-binding-768x230.png 768w\" sizes=\"auto, (max-width: 808px) 100vw, 808px\" \/><\/figure><\/div>\n\n\n\n<p>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<p>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<p>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<p>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 class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"801\" height=\"775\" src=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/complexapplication.png\" alt=\"\" class=\"wp-image-660\" srcset=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/complexapplication.png 801w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/complexapplication-300x290.png 300w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/complexapplication-768x743.png 768w\" sizes=\"auto, (max-width: 801px) 100vw, 801px\" \/><\/figure>\n\n\n\n<p>Outro problema com este\nsistema \u00e9 que as mudan\u00e7as t\u00eam um custo muito alto.<\/p>\n\n\n\n<p>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<p>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<p>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<p>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<p>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<p>Faz muito sentido e \u00e9 muito\n\u00fatil em um exemplo de intelligent thinking. <a href=\"https:\/\/www.quora.com\/What-is-intelligent-thinking\">https:\/\/www.quora.com\/What-is-intelligent-thinking<\/a><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"529\" src=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/reactnativeonewaydataflow.png\" alt=\"\" class=\"wp-image-661\" srcset=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/reactnativeonewaydataflow.png 798w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/reactnativeonewaydataflow-300x199.png 300w, https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2020\/01\/reactnativeonewaydataflow-768x509.png 768w\" sizes=\"auto, (max-width: 798px) 100vw, 798px\" \/><\/figure><\/div>\n\n\n\n<p> Fonte: <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/www.amazon.com.br\/gp\/offer-listing\/1484244532\/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1484244532&amp;linkCode=am2&amp;tag=blackzig0b-20&amp;linkId=6ae6b6d172a986e2ba18ec661202ab3b\">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":"<p>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 [&hellip;]<\/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"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>React Native Para Desenvolvimento Mobile #2 - Viciados em Aprender<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native Para Desenvolvimento Mobile #2\" \/>\n<meta property=\"og:description\" content=\"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 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Viciados em Aprender\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-08T21:30:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-08T21:30:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2019\/08\/2qewx-racueff35wi0bfi5xsops.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"blackzig\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"blackzig\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/\"},\"author\":{\"name\":\"blackzig\",\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/687a6d17428a0f0e040aefbd858ebc1e\"},\"headline\":\"React Native Para Desenvolvimento Mobile #2\",\"datePublished\":\"2020-01-08T21:30:49+00:00\",\"dateModified\":\"2020-01-08T21:30:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/\"},\"wordCount\":853,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/687a6d17428a0f0e040aefbd858ebc1e\"},\"image\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/2qewx-racueff35wi0bfi5xsops.jpeg\",\"articleSection\":[\"React Native\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/\",\"url\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/\",\"name\":\"React Native Para Desenvolvimento Mobile #2 - Viciados em Aprender\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/2qewx-racueff35wi0bfi5xsops.jpeg\",\"datePublished\":\"2020-01-08T21:30:49+00:00\",\"dateModified\":\"2020-01-08T21:30:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/2qewx-racueff35wi0bfi5xsops.jpeg\",\"contentUrl\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/2qewx-racueff35wi0bfi5xsops.jpeg\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/react-native-para-desenvolvimento-mobile-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Native Para Desenvolvimento Mobile #2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/\",\"name\":\"Viciados em Aprender\",\"description\":\"Queremos aprender tudo o que for poss\u00edvel nesta vida.\",\"publisher\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/687a6d17428a0f0e040aefbd858ebc1e\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/687a6d17428a0f0e040aefbd858ebc1e\",\"name\":\"blackzig\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/a7e4b18a2d7254b5cf6da7ca7f92dc71da86905bd1de486e98e3a98664e058f2.jpg\",\"url\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/a7e4b18a2d7254b5cf6da7ca7f92dc71da86905bd1de486e98e3a98664e058f2.jpg\",\"contentUrl\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/a7e4b18a2d7254b5cf6da7ca7f92dc71da86905bd1de486e98e3a98664e058f2.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"blackzig\"},\"logo\":{\"@id\":\"https:\\\/\\\/micheladrianomedeiros.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/a7e4b18a2d7254b5cf6da7ca7f92dc71da86905bd1de486e98e3a98664e058f2.jpg\"},\"sameAs\":[\"http:\\\/\\\/www.micheladrianomedeiros.com.br\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Native Para Desenvolvimento Mobile #2 - Viciados em Aprender","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/","og_locale":"pt_PT","og_type":"article","og_title":"React Native Para Desenvolvimento Mobile #2","og_description":"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 [&hellip;]","og_url":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/","og_site_name":"Viciados em Aprender","article_published_time":"2020-01-08T21:30:49+00:00","article_modified_time":"2020-01-08T21:30:51+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2019\/08\/2qewx-racueff35wi0bfi5xsops.jpeg","type":"image\/jpeg"}],"author":"blackzig","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"blackzig","Tempo estimado de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/#article","isPartOf":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/"},"author":{"name":"blackzig","@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/#\/schema\/person\/687a6d17428a0f0e040aefbd858ebc1e"},"headline":"React Native Para Desenvolvimento Mobile #2","datePublished":"2020-01-08T21:30:49+00:00","dateModified":"2020-01-08T21:30:51+00:00","mainEntityOfPage":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/"},"wordCount":853,"commentCount":0,"publisher":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/#\/schema\/person\/687a6d17428a0f0e040aefbd858ebc1e"},"image":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/#primaryimage"},"thumbnailUrl":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2019\/08\/2qewx-racueff35wi0bfi5xsops.jpeg","articleSection":["React Native"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/","url":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/","name":"React Native Para Desenvolvimento Mobile #2 - Viciados em Aprender","isPartOf":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/#primaryimage"},"image":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/#primaryimage"},"thumbnailUrl":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2019\/08\/2qewx-racueff35wi0bfi5xsops.jpeg","datePublished":"2020-01-08T21:30:49+00:00","dateModified":"2020-01-08T21:30:51+00:00","breadcrumb":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/#primaryimage","url":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2019\/08\/2qewx-racueff35wi0bfi5xsops.jpeg","contentUrl":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2019\/08\/2qewx-racueff35wi0bfi5xsops.jpeg","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/react-native-para-desenvolvimento-mobile-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/micheladrianomedeiros.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"React Native Para Desenvolvimento Mobile #2"}]},{"@type":"WebSite","@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/#website","url":"https:\/\/micheladrianomedeiros.com.br\/blog\/","name":"Viciados em Aprender","description":"Queremos aprender tudo o que for poss\u00edvel nesta vida.","publisher":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/#\/schema\/person\/687a6d17428a0f0e040aefbd858ebc1e"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/micheladrianomedeiros.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":["Person","Organization"],"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/#\/schema\/person\/687a6d17428a0f0e040aefbd858ebc1e","name":"blackzig","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2025\/07\/a7e4b18a2d7254b5cf6da7ca7f92dc71da86905bd1de486e98e3a98664e058f2.jpg","url":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2025\/07\/a7e4b18a2d7254b5cf6da7ca7f92dc71da86905bd1de486e98e3a98664e058f2.jpg","contentUrl":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2025\/07\/a7e4b18a2d7254b5cf6da7ca7f92dc71da86905bd1de486e98e3a98664e058f2.jpg","width":1920,"height":1080,"caption":"blackzig"},"logo":{"@id":"https:\/\/micheladrianomedeiros.com.br\/blog\/wp-content\/uploads\/2025\/07\/a7e4b18a2d7254b5cf6da7ca7f92dc71da86905bd1de486e98e3a98664e058f2.jpg"},"sameAs":["http:\/\/www.micheladrianomedeiros.com.br\/"]}]}},"_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}]}}