TechCodeview

Gerçek/Tarayıcı DOM:

DOM'un açılımı 'Belge Nesnesi Modeli'. Web sayfası veya uygulamadaki HTML'nin yapılandırılmış bir temsilidir. Kullanıcı arayüzünün tamamını temsil eder (Kullanıcı arayüzü) arasında Ağaç veri yapısı olarak web uygulaması.

Bu bir HTML öğelerinin yapısal gösterimi basit kelimelerle bir web uygulamasının tanımı.

Herhangi bir değişiklik olduğunda uygulama kullanıcı arayüzünün durumu, DOM güncellenir ve değişikliği temsil eder. DOM, uygulamanın Kullanıcı Arayüzünü güncellemek için yapılan her değişiklikte oluşturulur ve değiştirilir; bu da performansı etkiler ve onu yavaşlatır.

Bu nedenle birçok UI bileşeni ve karmaşık yapısı ile DOM, Her değişiklikte yeniden oluşturulması gerektiğinden daha pahalı bir şekilde güncellenecektir.

DOM bir ağaç veri yapısı olarak oluşturulmuştur. Her biri için düğümden oluşur kullanıcı arayüzü öğesi Web belgesinde mevcut.

dizi listesi java sıralama

DOM'un güncellenmesi:

JavaScript hakkında biraz bilgimiz varsa, bunu kullanan kişileri görebilirsiniz. 'getElementById()' veya 'getElementByClass()' DOM içeriğini değiştirme yöntemi.

Uygulamanızın durumunda herhangi bir değişiklik meydana geldiğinde DOM, kullanıcı arayüzündeki değişikliği yansıtacak şekilde güncellenir.

Virtual DOM işleri nasıl hızlandırır:

Uygulamaya herhangi bir yeni şey eklendiğinde, bir ağaç olarak temsil edilen sanal DOM oluşturulur. Uygulamadaki her öğe ağaçtaki bir düğümdür.

Bu nedenle, bir öğenin konumunda değişiklik olduğunda yeni bir sanal DOM oluşturulur. Daha yeni sanal DOM ağacı, değişikliklerin not edildiği en son DOM ağacıyla karşılaştırılır.

Bu değişiklikleri gerçek DOM ile yapmanın olası yolunu bulur. Daha sonra güncellenen öğeler sayfada yeniden oluşturulur.

Virtual DOM, React'e Nasıl Yardımcı Olur:

React'ta her şey bir bileşen, bir işlevsel bileşen ve bir sınıf bileşeni olarak gözlemlenir. Bir bileşenin bir durumu vardır. JSX dosyasında bir şeyi değiştirdiğimizde, basitçe ifade etmek gerekirse, bileşenin durumu değiştiğinde, reaksiyon sanal DOM ağacını günceller.

React her seferinde iki sanal DOM tutar. Birincisi güncellenmiş sanal DOM'u içerir, diğeri ise güncellenmiş sanal DOM'un önceden güncellenmiş bir sürümüdür. Güncellenen sanal DOM'un önceden güncellenmiş sürümünü karşılaştırır ve DOM'da nelerin değiştiğini, hangi bileşenlerin değiştirileceğini bulur.

Her ne kadar etkisiz gibi görünse de sanal DOM'un güncellenmesi fazla zaman alamayacağından maliyeti artık yok.

Geçerli sanal DOM ağacını öncekiyle karşılaştırırken şu şekilde bilinir: 'meydan okuyan'. React neyin değiştiğini anladıktan sonra gerçek DOM'daki nesneleri günceller. React, gerçek DOM'u güncellemek için toplu güncellemeleri kullanır. Gerçek DOM'daki değişiklikler, bileşenin durumuna tek bir değişiklik için herhangi bir güncelleme göndermek yerine toplu olarak gönderilir.

Kullanıcı arayüzünü yeniden oluşturmak en pahalı kısımdır ve React, toplu güncellemeleri alan Gerçek DOM'un kullanıcı arayüzünü yeniden oluşturmasını sağlayarak en verimli şekilde bunu yapmayı başarır. Değişiklikleri gerçek DOM'a dönüştürme işlemine denir mutabakat.

Performansı artırır ve geliştiricilerin tepki vermeyi ve Sanal DOM'u sevmesinin ana nedenidir.

React'ın Sanal DOM'si nedir?

Sanal DOM kavramı, Gerçek DOM performansını daha iyi ve daha hızlı hale getirmek için geliyor. Sanal DOM, DOM'un sanal bir sembolüdür.

Ancak temel fark, her değişiklikte, gerçek DOM yerine sanal DOM'un güncellenmesidir.

Örneğin, gerçek Ve sanal DOM olarak temsil edilir ağaç yapısı. Ağaçtaki her öğe bir düğümdür. A düğüm Uygulama kullanıcı arayüzüne yeni bir öğe eklendiğinde ağaca eklenir.

Herhangi bir elemanın konumu değişirse, yeni sanal DOM ağacı oluşturulur. Sanal DOM minimum işlem sayısını hesaplar Gerçek DOM'da değişiklik yapmak için gerçek DOM'da. Verimlidir ve tüm gerçek DOM'un yeniden oluşturulmasının maliyetini ve işletimini azaltarak daha iyi performans gösterir.

Artık Gerçek ve Sanal DOM hakkında normal bir anlayışa sahibiz.

Hadi nasıl olduğuna bakalım Tepki kullanarak çalışır Sanal DOM.

• Her kullanıcı arayüzü bireyseldir bileşen, ve her bileşenin kendi durumu vardır.
• Tepki takip ediyor gözlemlenebilir modeller ve hallerdeki değişiklikleri gözlemler.
• Bileşenin durumunda herhangi bir değişiklik yapıldığında React sanal DOM ağacını günceller ama durumu değiştirmez gerçek DOM ağacı.
• Tepki karşılaştırır the şimdiki versiyonu arasında sanal DOM ile önceki versiyon sonrasında güncelleniyor.
• React, hangi nesnelerin değiştirildiğini biliyor sanal DOM. Nesnelerin yerini alır gerçek DOM , giden minimum manipülasyon operasyonlar.
• Bu süreç şu şekilde bilinir: 'farklılaşma'. Bu resim kavramı netleştirecektir.

Resimde, koyu mavi daireler bunlar düğümler bunlar değiştirildi. durum Bu bileşenlerin sayısı değişti. React, uygulamanın önceki ve mevcut sürümü arasındaki farkı hesaplar. sanal DOM ağacı, ve ana alt ağacın tamamı, değiştirilen kullanıcı arayüzünü gösterecek şekilde yeniden oluşturulur.

Güncellenen ağaç toplu güncelleme (gerçek DOM'a yapılan güncellemeler, her durum değişikliği için güncellemeler göndermek yerine toplu olarak gönderilir.) gerçek DOM'a.

Bu konuyu daha derinlemesine anlamak için şunu bilmemiz gerekiyor: Tepki oluşturma () işlev.

O zaman bazı önemli konuları bilmemiz gerekiyor. özellikler React'ın.

JSX

JSX anlamına gelir JavaScript XML'i. Bu bir sözdizimi uzantısı JS'den. JSX kullanarak şunu yazabiliriz: HTML yapıları içeren dosyada JavaScript kodu.

Bileşenler

Bileşenler bağımsız Ve yeniden kullanılabilir kod. React uygulamasındaki her kullanıcı arayüzü bir bileşendir. Tek bir uygulamanın birçok özelliği vardır bileşenler.

Bileşenler iki tiptir; sınıf bileşenleri Ve fonksiyonel bileşenler.

Sınıf bileşenleri durum bilgilidir çünkü kullanıcı arayüzünü değiştirmek için 'durumlarını' kullanırlar. İşlevsel bileşenler durum bilgisi olmayan bileşenlerdir. 'Props' adı verilen rastgele bir parametre alan bir JavaScript işlevi gibi davranırlar.

Tepki Kancaları işlevsel bileşenlere sahip erişim durumlarına sunulmuştur.

Yaşam Döngüsü Yöntemleri

Yaşam döngüsü yöntemleri önemli yöntemlerdir yerleşik DOM'daki süreleri boyunca bileşenler üzerinde çalışan tepki vermek. React'ın her bileşeni bir yaşam döngüsünden geçti.

Render() yöntemi, kullanılan maksimum yöntemdir yaşam döngüsü yöntemi .

İçindeki tek yöntem bu Reaksiyon sınıfı bileşenleri . Yani her sınıfta render() bileşeni çağrılır.

Render () yöntemi bileşenin kullanıcı arayüzü tarafından oluşturulmasını yönetir. Render (), ekranda görüntülenen tüm mantığı içerir. Aynı zamanda bir hükümsüz Ekranda hiçbir şey göstermek istemiyorsak değer.

Örnek aşağıda gösterilmiştir:

 class Header extends React.Component{ render(){ return React Introduction } } 

Örnek şunu gösterecek: JSX render() dosyasında yazılmıştır.

Zaman durum veya pervane bileşen içinde güncellenir, oluşturma() farklı bir React elemanları ağacı döndürecektir.

Kodu konsola veya JavaScript dosyasına yazarken şunlar gerçekleşir:

• Tarayıcı, kimliğe sahip düğümü bulmak için HTML'yi ayrıştırır.
• Elemanın alt elemanını kaldırır.
• Öğeyi günceller (DOM) ile 'güncellenmiş değer'.
• Yeniden hesaplıyor CSS ebeveyn ve alt düğümler için.
• Ardından düzeni güncelleyin.

Son olarak ekran görüntüsündeki ağacın üzerinden geçin.

Bildiğimiz kadarıyla güncelleme DOM içeriğin değiştirilmesini içerir. Ona daha çok bağlanır.

Performansı etkileyen CSS'nin yeniden hesaplanmasında ve düzenlerin değiştirilmesinde karmaşık algoritmalar kullanılır.

Dolayısıyla React, sanal DOM olarak bilinen bir şeyi kullandığından, bununla başa çıkmanın birçok yolu vardır.

alt dize java

reaksiyon kubbesi

React-dom paketi, gerektiğinde React modelinin dışına çıkmak için uygulamanın en üst düzeyinde DOM'a özgü yöntemler sağlar.

 import * as ReactDOM from 'react-dom'; 

ES5'i npm ile kullanıyorsanız şunu da yazmalısınız:

 var ReactDOM = require('react-dom'); 

tepki-dom paket ayrıca istemci ve sunucu uygulamalarına özel modüller de sağlar:

• tepki-dom/istemci
• tepki-dom/sunucu

Bu yöntemlerin react-dom paketinin dışa aktarımları:

• createPortal()
• floşSync()

Tepki-dom yöntemleri de dışa aktarılır:

• oluştur ()
• hidrat ()
• findDOMNode()
• unmountComponentAtNode ()

Not: Hem hidrat hem de işleme, daha yeni istemci yöntemleriyle değiştirildi.

Tarayıcı Desteği

React tüm modern tarayıcıları destekler ve eski sürümler için bazı çoklu doldurmalar gerekir.

Not: Internet Explorer gibi ES5 yöntemlerini desteklemeyen eski tarayıcıları destekleyemiyoruz. Sayfada es5-shim ve es5-sham gibi çoklu doldurmalar bulunursa uygulamaların en yeni tarayıcılarda çalıştığını görebilirsiniz, ancak yolu seçerseniz tek başınızasınız.

Referans

createPortal()

Portal Oluşturur () Portal, çocukları DOM bileşeni sıralamasının dışında bulunan DOM düğümüne okumanın yolunu sağlar.

floşSync()

Sağlanan geri aramada eşzamanlı olarak React güncellemelerini zorlayın. DOM'un anında güncellenmesini sağlar.

 // Force this state update to be synchronous. flushSync(() => { setCount(count + 1); }); // By this point, DOM is updated. 

Not:

• Tasarruflu kullanın. Flush Sync performansı önemli ölçüde olumsuz etkiler.
• FlushSync, beklemedeki sınırları geri dönüş durumunu göstermeye zorlayacaktır.
• Bekleyen efektleri çalıştırır ve geri göndermeden önce güncellemeleri aynı anda uygular.
• FlushSync, geri aramadaki güncellemeleri temizlemek için güncellemeleri geri aramanın dışına temizler. Örneğin, Bir tıklamayla ilgili bekleyen güncellemeler varsa React, geri aramada güncellemeleri temizlemeden önce bunu temizleyebilir.

Eski Referans

oluşturma()

Java liste düğümü

 render(element, container[, callback]) 

Not: Render, React'te Root oluşturmayla değiştirildi. Sağlanan kapsayıcıdaki DOM'a bir React öğesi işleyin ve bileşene bir referans ödeyin.

Bir React öğesi daha önce herhangi bir konteynere işlenmişse, üzerinde bir güncelleme gerçekleştirir ve en son React öğesini yansıtması gerekir.

İsteğe bağlı geri çağırma sağlanmışsa, bileşen oluşturulduğunda yürütülür.

Not:

Render () yöntemi, konteyner düğümünün geçtiği sırada içeriğini kontrol eder. Mevcut herhangi bir DOM öğesi değiştirilir.

Render (), kabın düğümünü değiştirmez (yalnızca kabın alt öğelerini değiştirebilir). Alt öğelerin üzerine yazmadan mevcut bir DOM düğümüne bir bileşen eklemek mümkün olabilir.

Render () şu anda ReactComponent'in kök örneğine referans veriyor.

Ancak dönüş değeri miras alınır ve bazı durumlarda React'ın gelecekteki sürümleri bileşenleri eşzamansız olarak oluşturabileceğinden bu değerden kaçınılabilir.

ReactComponent prototipine bir referansa ihtiyacınız varsa en iyi çözüm, öğeye bir geri çağırma referansı eklemektir.

Render (), işlenmiş bir kabı sunucuya hidratlamak için kullanılır, eskidir. Kullanmak hidratKök() onun yerine.

hidrat()

hidrat, hidrat Kökü ile değiştirilir.

Tam olarak render() işlevi gibidir ancak HTML içeriği ReactDOMServer tarafından oluşturulan bir kap için kullanılır. React, olay dinleyicilerini mevcut işaretlemeye bağlamaya çalışacaktır.

 hydrate(element, container[, callback]) 

Not:

React, oluşturulan içeriğin sunucu ve istemci arasında aynı olmasını bekler. Metnin içeriğini düzeltebiliriz ama tutarsızlıkları hata olarak değerlendirip düzeltmeliyiz. Geliştirme modunda React, hidrasyon sırasındaki tutarsızlık konusunda uyarır.

Tutarsızlıklar için belirli farklılıkların düzeltileceğine dair bir güvence yoktur.

Çoğu uygulamada performans nedenleriyle önemlidir ve tüm işaretlerin doğrulanması çok pahalı olacaktır.

Bir öğenin özniteliğinin veya metin içeriğinin sunucu ve istemci arasında kaçınılmaz olarak farklılık gösterdiğini varsayalım (örneğin, zaman damgası ). Bu durumda, şunu ekleyerek uyarıyı susturabiliriz: bastırmaHydrationWarning = {true} elemente.

Bir metin öğesi değilse, gelecekteki güncellemelere kadar tutarsız kalması için yama yapmayı deneyemez.

Sunucuda ve istemcide kasıtlı olarak farklı sağlamamız gerekiyorsa iki geçişli bir render gerçekleştirebilirsiniz. İstemcide bırakılan bileşenler this.state.isClient gibi durum değişkenlerini okuyabilir ve burada true olarak ayarlanacaktır. bileşenDidMount().

İlk oluşturma geçişi, tutarsızlıkları önleyerek sunucunun yaptığının aynısını yapacaktır, ancak ek geçiş, hidrasyondan sonra eşzamanlı olarak yapılacaktır.

Not: Bu yaklaşım, bileşenleri iki kez yaptıkları için daha yavaş hale getirecek, bu nedenle dikkatli kullanın.

 unmountComponentAtNode() unmountComponentAtNode(container) 

Not:

unmountComponentAtNode ile değiştirildi root.unmount() React'ta. Takılan React bileşenini DOM'dan siler ve olay işleyicilerini ve durumunu temizler.

Konteynere hiçbir bileşen monte edilmemişse hiçbir şey yapamaz. Hiçbir bileşen monte edilmemişse true değerini, çıkarılacak bileşen yoksa false değerini döndürür.

findDOMNode()

Not: findDOMNode, temeldeki DOM düğümüne erişmek için kullanılan bir kaçış kapısıdır. Bu kaçış yolu çoğu durumda bileşen soyutlamasını deldiği için önerilmez. StrictMode'da kullanımdan kaldırıldı.

findDOMNode(bileşen)

Bu bileşen DOM'a bağlanmışsa, bu, karşılık gelen yerel tarayıcı DOM öğesini döndürür. Bu yöntem DOM'dan form alanı değerleri gibi değerleri okumak ve DOM ölçümleri yapmak için kullanışlıdır. Çoğu durumda DOM düğümüne bir başvuru ekleyebilir ve findDOMNode'u kullanmaktan kaçınabilirsiniz.

Bir bileşen null veya false değerini döndürdüğünde findDOMNode null değerini döndürür. Bir bileşen bir dizeye dönüştürüldüğünde findDOMNode, bu değeri içeren bir metin DOM düğümü döndürür. FindDOMNode'un boş olmayan ilk çocuğa karşılık gelen DOM düğümünü döndürmesi durumunda bileşen, birden çok çocuğu olan bir parçayı döndürebilir.

Not:

findDOMNode yalnızca monte edilmiş bileşenlerde (yani DOM'a yerleştirilmiş bileşenler) çalışır. Bunu henüz monte edilmemiş bir bileşen üzerinde çağırmaya çalışırsanız (henüz oluşturulmamış bir bileşen üzerinde render() üzerinde findDOMNode() işlevini çağırmak gibi), bir istisna atılacaktır.

findDOMNode işlev bileşenlerinde kullanılamaz.

DOM öğeleri

React, performans ve tarayıcılar arası uyumluluk için tarayıcıdan bağımsız bir DOM sistemi uygular. Bu fırsatı, tarayıcının DOM uygulamasındaki bazı pürüzlü noktaları temizlemek için değerlendiriyoruz.

React'ta tüm DOM özellikleri ve nitelikleri (olay işleyicileri dahil) camelcase olmalıdır. Örneğin, HTML tabindex niteliği, React'teki sekme Index niteliğine karşılık gelir.

Küçük harf olması gereken aria-* ve data-* nitelikleri istisnadır. Örneğin, alan etiketi olarak bir alan etiketine sahip olabilirsiniz.

Niteliklerdeki Farklılıklar

React ve HTML arasında çeşitli özellikler farklı şekilde çalışacaktır:

kontrol

İşaretli öznitelik, bir onay kutusunun veya türündeki radyonun bileşenleri tarafından desteklenir. Kontrollü bileşenlerin imalatında kullanışlıdır. Bunu bileşenin kontrol edilip edilmediğini belirlemek için kullanabilirsiniz.

DefaultChecked, bileşenin ilk kez monte edildiğinde kontrol edildiğini belirleyen, kontrol edilmeyen karşılığıdır.

sınıf adı

CSS sınıfını belirtmek için className niteliğini kullanın. Aşağıdaki gibi tüm normal DOM ve SVG öğeleri için geçerlidir: , vesaire.

React'ı Web Bileşenleri ile kullanıyorsanız (yaygın değil), bunun yerine class niteliğini kullanın.

tehlikeli bir şekildeSetInnerHTML

Dangerously SetInnerHTML, React'ın DOM tarayıcısında innerHTML kullanmanın yerini almasıdır. HTML kodunu yapılandırmak risklidir çünkü kullanıcıları siteler arası komut dosyası çalıştırma (XSS) saldırısına maruz bırakmak kolaydır.

Yani HTML'yi doğrudan React'tan ayarlayabiliriz, ancak bunun tehlikeli olduğunu hatırlamak için tehlikeli bir şekilde SetInnerHTML yazmanız ve __html anahtarıyla bir nesneyi iletmeniz gerekir.

Örneğin:

 function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } htmlFor 

React elemanları bunun yerine htmlFor'u kullanır, çünkü for, JavaScript'te ayrılmış bir kelimedir.

onChange

onChange olayı beklendiği gibi davranır; etkinlik, bir form alanı her değiştirildiğinde tetiklenir.

Mevcut tarayıcı davranışını kasıtlı olarak kullanmıyoruz çünkü değişiklik, davranışı açısından önemlidir ve React, kullanıcı girişini gerçek zamanlı olarak işlemek için olaya güvenir.

seçilmiş

Seçili olarak işaretlemek istiyorsanız bunun yerine o seçeneğin değerine bakın. Ayrıntılı talimatlar için 'Etiket Seçin' konusuna bakın.

Not:

Çoğu durumda sınıf adları, harici bir CSS stil sayfasında tanımlanan sınıflara atıfta bulunur. Stiller, React uygulamalarında, oluşturma sırasında hesaplanan stilleri eklemek için kullanılır. Style özelliği, CSS dizesi yerine deve özelliklerine sahip JavaScript nesnesini kabul eder.

Java'da listede sıralama

Uygundur DOM stili JavaScript özellikleri daha verimlidir ve XSS güvenlik açıkları.

Örneğin:

 const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return Hello World! ; } 

Şunu unutmayın: stiller otomatik olarak ön eklenmez. Eski tarayıcıları desteklemek için stil özelliklerini sağlamamız gerekiyor:

 const divStyle = { WebkitTransition: 'all', // note capital 'W' here msTransition: 'all' // 'ms' is the lowercase vendor prefix }; function ComponentWithTransition() { return This should work cross-browser ; } 

Stil anahtarları, DOM düğümlerindeki özelliklere JS içinden erişmeye karşılık gelecek şekilde deve şeklindedir. Sağlayıcı önekleri MS büyük harfle başlar.

React, bazı satır içi sayı stili özelliklerine otomatik olarak bir 'px' son eki ekleyecektir. 'Px' dışında birimler kullanmak istiyorsak değeri istenen birimle birlikte bir dize olarak belirtin.

Örneğin:

 // Result style: '10px' Hello World! // Result style: '10%' Hello World! 

Ancak stil özelliklerinin tümü piksel dizelerine dönüştürülmez.

Düzenlenebilir İçerik Uyarısını Bastır

Bir öğenin çocuklara yönelik olarak düzenlenebilir içerik olarak işaretlenmesi durumunda işe yaramayacağına dair bir uyarı verilir. Özellik uyarıyı bastırır.

Bastırma Uyarısı

Sunucu tarafı React rendering kullanırsak, sunucu ve istemci farklı içerikle render aldığında bu bir uyarıdır. Ancak nadir durumlarda tam bir eşleşmeyi garanti etmek zordur. Örneğin, zaman damgalarının sunucuda veya istemcide farklı olması beklenir.

Bastırma uyarısını true olarak ayarlarsanız, öğenin özellikleri ve içeriği arasındaki uyumsuzluklar konusunda uyarı yapılmaz.

Yalnızca tek seviye derinlikte çalışıyordu ve kaçış olarak kullanılması gerekiyordu.

değer

Değer özelliği , ve bileşenleri tarafından tasarlanmıştır. Bileşenin değerini ayarlamak için bunu kullanabilirsiniz.

Kontrollü bileşenlerin imalatında kullanışlıdır. defaultValue ve equal to unchecked, seri olarak bağlandığında bileşenin değerini ayarlar.

Desteklenen tüm HTML özellikleri

Herhangi bir özel ve standart DOM özelliği desteklenir.

React, DOM'da JavaScript merkezli bir API sağladı. Ve React bileşenleri genellikle özel ve DOM ile ilgili donanımlar içerir ve React, DOM API ile aynı CamelCase kurallarını kullanır:

 // Just like node.tabIndex DOM API // Just like node.className DOM API // Just like node.readOnly DOM API