Son zamanlarda, işlevsellik ve Facebook JavaScript kitaplığı React.js'yi kullanma yolları hakkında çok şey çalıştım. JavaScript dünyasının geri kalanıyla olan farklılıklarından bahsederken genellikle iki programlama stilinden declarativeve bahsedilir imperative.
İkisi arasındaki fark nedir?
Yanıtlar:
React'in sahip olduğu gibi bildirimsel bir stil, "Şöyle görünmeli" diyerek uygulamanızdaki akışı ve durumu kontrol etmenize olanak tanır. Zorunlu bir stil bunu tersine çevirir ve "Yapmanız gereken budur" diyerek uygulamanızı kontrol etmenizi sağlar.
Bildirgenin yararı, eyaleti temsil etmenin uygulama ayrıntılarında takılıp kalmamanızdır. Uygulama görünümlerinizi tutarlı tutmanın kurumsal bileşenini yetkilendiriyorsunuz, bu nedenle yalnızca durum hakkında endişelenmeniz gerekir.
Bir çerçeve metaforu olan bir uşakınız olduğunu hayal edin. Ve akşam yemeği yapmak istiyorsun. Zorunlu bir dünyada, onlara adım adım nasıl akşam yemeği yapılacağını söylerdiniz. Bu talimatları sağlamanız gerekir:
Go to the kitchen
Open fridge
Remove chicken from fridge
...
Bring food to the table
Açıklayıcı bir dünyada, ne istediğinizi basitçe tarif edersiniz
I want dinner with chicken.
Uşağınız nasıl tavuk yapılacağını bilmiyorsa, açıklayıcı bir tarzda çalışamazsınız. Tıpkı Backbone'un belirli bir görevi yerine getirmek için kendisini nasıl değiştireceğini bilmemesi gibi, ona o görevi yapmasını söyleyemezsiniz. Örneğin React, "nasıl tavuk yapılacağını bildiği" için açıklayıcı olabilir. Yalnızca mutfakla nasıl etkileşim kuracağını bilen Backbone ile karşılaştırıldığında.
Durumu tanımlayabilmek, böcekler için yüzey alanını önemli ölçüde azaltır, bu da bir avantajdır. Öte yandan, durumu nasıl uygulayacağınızı yetkilendirdiğiniz veya soyutladığınız için olayların nasıl gerçekleştiği konusunda daha az esnekliğe sahip olabilirsiniz .
"Beğen" düğmesi gibi basit bir UI bileşeni düşünün. Dokunduğunuzda, önceden griyse maviye, önceden maviyse griye döner.
Bunu yapmanın zorunlu yolu şudur:
if( user.likes() ) {
if( hasBlue() ) {
removeBlue();
addGrey();
} else {
removeGrey();
addBlue();
}
}
Temel olarak, o anda ekranda ne olduğunu kontrol etmeli ve önceki durumdan değişiklikleri geri almak da dahil olmak üzere mevcut durumla yeniden çizmek için gerekli tüm değişiklikleri yapmalısınız. Gerçek dünya senaryosunda bunun ne kadar karmaşık olabileceğini tahmin edebilirsiniz.
Aksine, bildirimsel yaklaşım şöyle olacaktır:
if( this.state.liked ) {
return <blueLike />;
} else {
return <greyLike />;
}
Bildirim yaklaşımı endişeleri ayırdığı için, bu bölümün yalnızca kullanıcı arayüzünün belirli bir durumda nasıl görünmesi gerektiğini ele alması gerekir ve bu nedenle anlaşılması çok daha kolaydır.
Bu harika bir benzetmedir:
* Zorunlu bir yanıt : Otoparkın kuzey çıkışından çıkın ve sola dönün. Bangerter Otoyolu çıkışına ulaşana kadar I-15 güneye gidin. Ikea'ya gidiyormuş gibi çıkıştan sağa dön. Düz gidin ve ilk ışıkta sağa dönün. Bir sonraki ışıkta devam edin ve bir sonraki sola dönün. Evim # 298.
Açıklayıcı bir yanıt : Adresim 298 West Immutable Alley, Draper Utah 84020 *
https://tylermcginnis.com/imperative-vs-declarative-programming/
Farklılıkları göstermek için React (bildirimsel) ve JQuery'yi (zorunlu) karşılaştırmak en iyisidir.
React'te, render()önceki UI durumundan yeni UI durumuna nasıl geçeceğiniz konusunda endişelenmeden, yalnızca yöntemdeki UI'nizin son durumunu tanımlamanız gerekir . Örneğin,
render() {
const { price, volume } = this.state;
const totalPrice = price * volume;
return (
<div>
<Label value={price} className={price > 100 ? 'expensive' : 'cheap'} ... />
<Label value={volume} className={volume > 1000 ? 'high' : 'low'} ... />
<Label value={totalPrice} ... />
...
</div>
)
}
Öte yandan, JQuery, kullanıcı arayüzü durumunuzu zorunlu olarak değiştirmenizi gerektirir, örneğin, etiket öğelerini seçip metin ve CSS'yi güncellemenizi:
updatePrice(price) {
$("#price-label").val(price);
$("#price-label").toggleClass('expansive', price > 100);
$("#price-label").toggleClass('cheap', price < 100);
// also remember to update UI depending on price
updateTotalPrice();
...
}
updateVolume(volume) {
$("#volume-label").val(volume);
$("#volume-label").toggleClass('high', volume > 1000);
$("#volume-label").toggleClass('low', volume < 1000);
// also remember to update UI depending on volume
updateTotalPrice();
...
}
updateTotalPrice() {
const totalPrice = price * volume;
$("#total-price-label").val(totalPrice);
...
}
Gerçek dünya senaryosunda, güncellenecek çok daha fazla UI öğesi ve bunların özellikleri (örneğin, CSS stilleri ve olay dinleyicileri) vb. Olacaktır. Bunu zorunlu olarak JQuery kullanarak yaparsanız, karmaşık ve sıkıcı hale gelecektir; kullanıcı arayüzünün bazı kısımlarını güncellemeyi unutmak veya eski olay işleyicilerini kaldırmayı unutmak kolaydır (bellek sızıntısına veya işleyicinin birden çok kez ateşlenmesine neden olur) vb. sync.
Senkronize olmayan durumlar, React'in bildirimsel yaklaşımına asla gelmeyecektir, çünkü yalnızca model durumunu güncellememiz gerekir ve React, UI ve model durumlarını senkronize tutmaktan sorumludur.
Bildirime dayalı ve zorunlu programlama arasındaki fark nedir? İçin cevabımı da okuyabilirsiniz. .
Not: Yukarıdaki jQuery örneğinden, tüm DOM manipülasyonlarını bir updateAll()yönteme koyarsak ve model durumumuzdan herhangi biri değiştiğinde her seferinde çağırırsak ve kullanıcı arabirimi hiçbir zaman uyumsuz olmayacak diye düşünebilirsiniz . Haklısınız ve React'in yaptığı etkili bir şekilde bu, tek fark jQuery'nin updateAll()birçok gereksiz DOM manipülasyonuna neden olacağı, ancak React yalnızca Sanal DOM Ayırma Algoritmasını kullanarak değiştirilen DOM öğelerini güncelleyecektir .
Zorunlu kod, JavaScript'e her adımı nasıl gerçekleştirmesi gerektiği konusunda talimat verir. Bildirim kodu ile JavaScript'e ne yapmak istediğimizi söyleriz ve JavaScript'in adımları gerçekleştirmesine izin veririz.
React açıklayıcıdır çünkü istediğimiz kodu yazıyoruz ve React, beyan edilen kodumuzu almaktan ve bizi istediğimiz sonuca ulaştırmak için tüm JavaScript / DOM adımlarını uygulamaktan sorumludur.
Zorunlu dünyadaki gerçek hayattaki bir paralel, bir bira için bir bara girip barmene şu talimatları vermek olacaktır:
- Raftan bir bardak al
- Camı taslağın önüne koyun
- Cam dolana kadar kolu aşağı doğru çekin
- Camı bana ver.
Bildirim dünyasında bunun yerine, sadece "Bira, lütfen" diyeceksiniz.
Bir bira istemenin bildirimsel yaklaşımı, barmenin birini nasıl servis edeceğini bildiğini varsayar ve bu, bildirimsel programlamanın çalışma şeklinin önemli bir yönüdür.
Bildirim temelli programlamada, geliştiriciler yalnızca başarmak istediklerini açıklar ve işe yaraması için tüm adımları listelemeye gerek yoktur.
React'in bildirimsel bir yaklaşım sunduğu gerçeği, kullanımı kolaylaştırır ve sonuç olarak ortaya çıkan kod basittir, bu da genellikle daha az hataya ve daha fazla sürdürülebilirliğe yol açar.
React bildirimsel bir paradigma izlediğinden ve ona DOM ile nasıl etkileşim kuracağını söylemenize gerek yoktur; Sadece ekranda görmek istediklerinizi BİLDİRİRSİNİZ ve React işi sizin için yapar.
Bildirimsel programlama, bir hesaplamanın mantığını kontrol akışını açıklamadan ifade eden bir programlama paradigmasıdır.
Zorunlu programlama, bir programın durumunu değiştiren ifadeler kullanan bir programlama paradigmasıdır.
ref bağlantısı: - https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2
Bir benzetme ile başlayacağım: İki arabam var, iki arabamda arabamın içindeki sıcaklığın normal oda sıcaklığı ~ 72 ° F olmasını istiyorum. İlk (eski) arabada, sıcaklığı kontrol etmek için iki düğme vardır (sıcaklığı kontrol etmek için 1 düğme ve hava akışını kontrol etmek için 1 düğme). Çok ısındığında, sıcaklığı düşürmek ve belki hava akışını değiştirmek için ilk düğmeyi ayarlamam gerekiyor) ve eğer çok soğuksa tam tersi. Bu zorunlu bir iştir! Düğmeleri kendim yönetmeliyim. İkinci (daha yeni) arabamda sıcaklığı ayarlayabilir / beyan edebilirim. Bu da, arabamın bunu 72 ° F'ye ayarladığımı / ayarladığımı bildiği sıcaklığı ayarlamak için düğmelerle oynamama gerek olmadığı anlamına geliyor ve arabam bu duruma geçmek için zorunlu işi yapacak.
React aynıdır, biçimlendirmeyi / şablonu ve statü bildirirsiniz, ardından React DOM'u uygulamanızla senkronize tutmak için zorunlu olan işi yapar.
<button onClick={activateTeleporter}>Activate Teleporter</button>
.addEventListener()Olay işlemeyi kurmak için kullanmak yerine, istediğimizi bildiririz. Düğmeye tıklandığında activateTeleporterişlevi çalıştırır .
Imperative programming: telling the "machine" how to do something, and as a result what you want to happen will happen. Declarative programming: telling the "machine"1 what you would like to happen, and let the computer figure out how to do it.