Yanıtlar:
React'in ana görevi, ekranda görüntülenmesini istedikleri bileşenlerle eşleşecek şekilde DOM'un nasıl değiştirileceğini bulmaktır.
React, bunu "bağlama" (DOM'a düğüm ekleme), "bağlantı kesme" (bunları DOM'den kaldırma) ve "güncelleme" (zaten DOM'da bulunan düğümlerde değişiklik yapma) yoluyla yapar.
Bir React düğümü bir DOM düğümü olarak nasıl temsil edilir ve DOM ağacında nerede ve ne zaman görüneceği, üst düzey API tarafından yönetilir . Neler olduğu hakkında daha iyi bir fikir edinmek için mümkün olan en basit örneğe bakın:
// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);
Öyleyse nedir foove onunla ne yapabilirsiniz? foo, şu anda, kabaca şöyle görünen düz bir JavaScript nesnesidir (basitleştirilmiş):
{
type: FooComponent,
props: {}
}
Şu anda sayfanın herhangi bir yerinde değil, yani bir DOM öğesi değil, DOM ağacının herhangi bir yerinde bulunmuyor ve React öğesi düğümü olmasının yanı sıra, belgede başka anlamlı bir temsili yok. Bu sadece ne tepki söyler ihtiyacı ekranda olmak eğer bu eleman render alır tepki. Henüz "monte edilmedi".
Aşağıdakileri arayarak React'e onu bir DOM kapsayıcısına "bağlamasını" söyleyebilirsiniz:
ReactDOM.render(foo, domContainer);Bu, React'e foosayfada gösterme zamanının geldiğini söyler . React, FooComponentsınıfın bir örneğini oluşturacak ve renderyöntemini çağıracaktır . Diyelim ki bir oluşturuyor <div />, bu durumda React bunun için bir divDOM düğümü oluşturacak ve bunu DOM konteynerine ekleyecektir.
React bileşenlerine karşılık gelen örnekler ve DOM düğümleri oluşturma ve bunları DOM'a ekleme işlemine bağlama denir.
Normalde yalnızca ReactDOM.render()kök bileşenlerini bağlamak için çağrı yapacağınızı unutmayın . Alt bileşenleri manuel olarak "bağlamanıza" gerek yoktur. Bir üst bileşen her çağırdığında setState()ve renderyöntemi belirli bir çocuğun ilk kez işlenmesi gerektiğini söylediğinde, React otomatik olarak bu çocuğu ana bileşenine "bağlar".
findDOMNode, React elementleri üzerinde koşamazsınız).
React, izomorfik / evrensel bir çerçevedir. Bu, UI bileşen ağacının sanal bir temsili olduğu ve bunun tarayıcıda çıkardığı gerçek işlemeden ayrı olduğu anlamına gelir. Belgelerden:
React çok hızlıdır çünkü DOM ile asla doğrudan konuşmaz. React, DOM'un hızlı bir bellek içi temsilini korur.
Bununla birlikte, bu bellek içi temsil, tarayıcıdaki DOM'a doğrudan bağlı değildir (bu, evrensel uygulamalar çerçevesi için talihsiz ve kafa karıştırıcı bir ad olan Sanal DOM olarak adlandırılmasına rağmen ) ve yalnızca DOM benzeri bir veridir. tüm UI bileşenleri hiyerarşisini ve ek meta verileri temsil eden yapı. Sanal DOM yalnızca bir uygulama ayrıntısıdır.
"React'in gerçek temellerinin basitçe bileşenlerin ve öğelerin fikirleri olduğunu düşünüyoruz: render etmek istediklerinizi açıklayıcı bir şekilde tanımlayabilmek. Bunlar, tüm bu farklı paketler tarafından paylaşılan parçalardır. React'in belirli renderlara özgü bölümleri Hedefler genellikle React'i düşündüğümüzde düşündüğümüz gibi değildir. " - React js Blog
Dolayısıyla, sonuç şu: React agnostik oluyor , bu da nihai çıktının ne olduğu umurunda olmadığı anlamına geliyor. Tarayıcıda bir DOM Ağacı olabilir, XML, Yerel bileşenler veya JSON olabilir.
"React-native, react-art, react-canvas ve react-three gibi paketlere baktığımızda, React'in güzelliğinin ve özünün tarayıcılar veya DOM ile hiçbir ilgisi olmadığı anlaşılıyor." - React js Blog
Artık React'in nasıl çalıştığını bildiğinize göre sorunuzu yanıtlamak çok kolay :)
Montaj , bir bileşenin sanal temsilini nihai UI gösterimine (ör. DOM veya Yerel Bileşenler) çıkarma işlemidir.
Bir tarayıcıda, bu, bir React Öğesini DOM ağacındaki gerçek bir DOM öğesine (örneğin bir HTML div veya li öğesi) çıkarmak anlamına gelir . Yerel bir uygulamada bu, bir React öğesini yerel bir bileşene çıkarmak anlamına gelir. Ayrıca, cesaretiniz varsa kendi oluşturucunuzu yazabilir ve React bileşenlerinin çıktısını JSON veya XML veya hatta XAML olarak yapabilirsiniz.
Bu nedenle, işleyicilerin takılması / sökülmesi bir React uygulaması için kritik öneme sahiptir, çünkü bir bileşenin yalnızca monte edildiğinde çıktısının / oluşturulduğundan emin olabilirsiniz . Bununla birlikte, componentDidMountişleyici yalnızca gerçek bir UI temsiline (DOM veya Yerel Bileşenler) dönüştürülürken çağrılır, ancak kullanarak sunucudaki bir HTML dizesine oluşturma yapıyorsanız renderToStringbu mantıklı değildir, çünkü bileşen, tarayıcı ve içinde çalıştırır.
Ve evet, bana sorarsan , Mounting de talihsiz / kafa karıştırıcı bir isim. IMHO componentDidRenderve componentWillRenderçok daha iyi isimler olurdu.
componentDidRenderbir ikame olduğunu sanmıyorum componentDidMountçünkü bileşen, bir kez monte edildikten sonra sahne değiştiğinde birden çok kez işleyebiliyor.
(id === that.id) ? <Component /> : null| /app/items/:id| this.setState(...).
/react-js-the-king-of-universal-apps/( düzenleme-yorumlarda bunun bozuk bir bağlantı olduğunu açıkça belirtmesi ile ), ancak eşler düzenlemeyi her iki kez de reddetti . Biri bir cevabı düzenlemede ve bozuk bir bağlantıyı kaldırmada neyin yanlış olduğunu bana yönlendirebilir mi?
Montaj, React'teki (oluşturulan DOM düğümleri) belgenin bir kısmına eklenen bileşene atıfta bulunur. Bu kadar!
React'i göz ardı ederek, bu iki yerel işlevi montaj olarak düşünebilirsiniz:
React'in dahili olarak monte etmek için kullandığı en yaygın işlevler hangileridir.
Şunu düşünün:
componentWillMount === montajdan önce
Ve:
componentDidMount === montaj sonrası
appendChildise rendernedir?
rendermontajı kendi başına yapacak gerçek yöntem diyebilirsiniz . Yani componentWillMount== önce, render== DOM eklemeyi yapar ve componentDidMount== sonra bağlamayı yapar (veya renderbileşeni eklemek için bir DOM API çağırır ve bu eşzamansız işlem tamamen tamamlanır)
https://facebook.github.io/react/docs/tutorial.html
Burada, componentDidMount, bir bileşen işlendiğinde React tarafından otomatik olarak çağrılan bir yöntemdir.
Buradaki konsept, ReactJS'e "lütfen bu şeyi, bu yorum kutusunu veya dönen resmi veya tarayıcı sayfasında istediğim her şeyi alın ve devam edin ve aslında tarayıcı sayfasına koyun. Bu bittiğinde, arayın componentDidMountdevam edebilmek için bağlı olduğum işlevim. "
componentWillMounttam tersi. Bileşeniniz oluşturulmadan ÖNCE hemen ateşlenecektir.
Ayrıca buraya bakın https://facebook.github.io/react/docs/component-specs.html
Son olarak, "bağlama" terimi react.js'ye özgü görünmektedir. Bunun genel bir javascript kavramı veya hatta genel bir tarayıcı konsepti olduğunu düşünmüyorum.
componentDidUpdateyerine denir.
Montaj, React bileşeniniz ilk oluşturulduğunda ilk sayfa yüklemesini ifade eder. Montaj için React belgelerinden: componentDidMount:
Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).
Bunu, React'in her işleyişinde çağrılan componentDidUpdate işleviyle karşılaştırabilirsiniz (ilk bağlama hariç).
React js'nin temel amacı, yeniden kullanılabilir bileşenler oluşturmaktır. Burada bileşenler, bir web sayfasının ayrı ayrı parçalarıdır. Örneğin, bir web sayfasında üstbilgi bir bileşendir, altbilgi bir bileşendir, bildirim bildirimi bir bileşendir vb. "Bağla" terimi bize bu bileşenlerin DOM'da yüklendiğini veya işlendiğini söyler. Bunlar birçok üst düzey API ve bununla ilgilenen yöntemlerdir.
İşi basitleştirmek için mount, bileşenin DOM'a yüklendiği ve çıkarılmadığı anlamına gelir, bileşenlerin DOM'dan kaldırıldığı anlamına gelir.
React.createElement(FooComponent)bir örnek oluşturmuyorsunuzFooComponent. React öğesi olarak da bilinenfoosanal DOM temsilidirFooComponent. Ama belkiFooComponentReact türü ile kastettiğin budur . Ne olursa olsun, size sırayla hangi kılmak diyoruz Tepki bileşenleri monte yok olabilir gerçek bir DOM düğümü ihtiyaçları DOM ağacındaki bileşeni temsil etmek oluşturulacak eğer bileşeni monte. Gerçek montaj, bunun ilk kez gerçekleştiği olaydır.