React’e Giriş, Bölüm 1
Bu blogda, hem platformun kendisi hem de şimdi yeni şeyler öğrenmek zorunda kalan geliştiriciler için yeni WordPress geliştirme yığını ve beraberindeki devrim hakkında konuştuk. Örneğin, uzun zaman önce, Gutenberg’i genişletmek ve UI’ye düğmeler eklemek için @wordPress/Scripts paketinin nasıl kullanılacağını açıklayan bir yazı yayınladım. Bir yazar olarak, bir öğretici yazmayı seviyorum çünkü iyi bildiğim bir şeyi paylaşabilirim ve birlikte öğrenebileceğimizi hissediyorum. Ne yazık ki, öğretici büyük bir sorunu gizliyor: Sonunda doğru sonuçları alsanız bile, birçoğunuz ne olduğunu gerçekten anlamadan körü körüne takip edin. Ancak çoğu öğreticinin “AHA anları”, her şeyin kafanıza nereye tıkladığı içgörü ve anlayış anları yoktur ve her şeyin neden böyle olduğunu anlarsınız.
Bu yüzden bugün biraz açıklamak için React’in tanıtımı ile bir dizi yazı başlatmak istiyorum. React’i ortaya çıkarmak ve hızlı bir şekilde daha iyi olmanıza yardımcı olmak istiyorum. React’in neden böyle olduğunu ve neden her şeyin böyle olduğunu anlamanızı istiyorum. React’in arkasındaki ilkeleri anlamanızı istiyorum. Daha iyi bir kod yazmanı istiyorum. Fonksiyonel Programlama React hakkında konuşmadan önce, işlevsel programlama hakkında konuşmak için birkaç dakika harcamanın iyi olduğunu düşünüyorum, çünkü bugün kullandığımız birçok çerçeve prensiplere bağlı. Ve React (Redux ile birlikte) bir istisna değildir.
Fonksiyonel programlama, programın işlevler uygulanması ve derlenmesi ile oluşturulduğu bir programlama paradigmasıdır. “Programlama” nın her zaman işlevleri inşa etmek ve yürütmekle ilgili olduğunu düşünebilirsiniz, değil mi? Tam olarak değil. Sabırlı ol bana. Örneğin, nesne yönelimli programlamayı düşünün. OOP’de program, özellikler veya alanlar ve kod şeklinde veri içerebilen nesneler oluşturarak ve derleyerek yöntem veya prosedürler şeklinde oluşturulur. Görmek? Bir işlev değil, bir nesne. Peki özel fonksiyonel programlama yapan nedir? Fonksiyonel programlamayı karakterize eden bazı yönler vardır: saf işlev, referans şeffaflık, sonsuzluk, birinci seviyenin bir vatandaşı olarak işlev, yüksek seviyeli işlev vb. Ve kendiniz öğrenmenizi öneririm (ya da beni isterseniz Bir sonraki yazıda tartışabiliriz). Bununla birlikte, bu yazıyı kısaltmak için, bugün sadece bir özelliğe odaklanacağız … saf işlev, fonksiyonel programlamayı diğer programlama paradigmasından farklı kılan şeylerden biri, işlevleri nasıl tanımladığı ve çalıştığıdır. FP’de işlev saftır, yani aşağıdaki iki koşulu karşılamak anlamına gelir:
Aynı argüman verildiğinde her zaman aynı sonuçları üretir
Yan etkisi yok
Örneğin, bu saf bir işlev değildir: daha önce David = ‘David’; İşlev selam (name) {if (öncekisname! == name) {console.log (‘merhaba, $ {name}!’); } else {console.log (‘tekrar hoş geldiniz, $ {name}!’); } öncesiSname = name; } çünkü birkaç yan etkisi var. Yani küresel değişkenin değiştirilmesi (yan etkiler 1) ve birkaç metni konsola serbest bırakma (yan etkiler 2).
Diğer saf olmayan işlevler aşağıdaki gibidir: CreateElement (name) işlevi {const id = math.random (); return {id, name}; } Çünkü gördüğünüz gibi, her zaman aynı sonuçları üretmez. CreateeMement’ı belirli bir adla her çağırdığında, elde edilen sonuçlar farklıdır. Sonuçta, kimlik özniteliği Math.random ile üretilir … saf işlev çeşitli nedenlerden dolayı çok iyidir: anlaşılması kolay ve sürprizler içermez. Onlara bazı girdiler veriyorsunuz, size belirli çıktılar döndürecekler. Ve bu iyidir, çünkü bu işlevi tanımlama yolu onları bir işlevin ne olduğuna dair matematiksel anlayışımıza yaklaştırır: Her girişi iyi tanımlanmış çıktıya eşleştirir. React’teki bileşenler saf fonksiyonlar ve yapılması gereken fonksiyonel programlamadır. ? Bakalım onların ilişkilerini alıp alamayacağımızı …
Belgelerde okuyabileceğiniz gibi React, “Bileşen” adlı küçük bir kod parçasıyla bir kullanıcı arayüzü oluşturmak için bir JavaScript kitaplığıdır. Bu, öğreticilerinde göreceğiniz ilk bileşendir: sınıf alışveriş listesi react.component {render () {return (
{this.props.name}
Instagram
whatsapp
occulus
); }} Oldukça basit ve hatta oldukça net, değil mi?
Ama bir dakika bekle! Bu “saf işlev” gibi görünmüyor. Aslında bu, nesne yönelimli programlama kullanılarak uygulanan bir sınıftır.
Evet, haklısın. Bu iyi görünmüyor … İşlevsel programlama hakkında konuşmak için zaman harcıyor muyuz? Önceki bileşeni tekrar görün. Şekil nasıl? İşlevi nedir? Bu, alışveriş listesini oluşturmak için birkaç HTML üreten tek bir yöntem (oluşturma) ile bir sınıftır. Bu alışveriş listesi her zaman aynıdır (evet, bu basit bir örnektir), ancak bir değişken kısmı vardır: sınıfın bu dahili mülkü kullandığı gibi başlık. Props.name. Yani, eğer hakkında hiçbir şey bilmiyorsak React ve sadece kodu görüyoruz ve hangi işlevleri sonlandırmaya çalışıyoruz, aşağıdakileri göreceğiz:
Bileşenler “isim” alabilir. Bu ismi nasıl aldığını tam olarak bilmiyoruz, ama bunu biliyoruz. Ancak, this.props.name oldukça iyi bir rehberdir.
Üretilen HTML% 100 statik değildir; Mülk değerine göre değişebilen bir “isim” kullanır.
Nereye gittiğimi gördün mü?
React’imizdeki bileşen işlevi saf işlevi açıklamıştır! Değerler (adlar) alan ve iyi tanımlanmış çıkışlar (HTML) üreten bileşenlerimiz var. Bu, OOP’den uzak durup önceki bileşenleri bir işlev olarak uygulayabileceğimiz anlamına mı geliyor?
Tabii ki! Az önce gördüğümüz çok karmaşık sınıflar, sahne alan ve geri yükleyen saf işlevler olarak daha basit ve daha kolay bir şekilde yeniden yazılabilir: const alışveriş listesi = (props) => (
{Props.name} için alışveriş listesi
Instagram
whatsApp
occulus
); Bu sahip olduğumuz şey, ama çok daha basit. Bir programcı olarak uygulayabileceğim en basit şey olduğunu söylemeye bile cesaret ediyorum: React bileşeni, birkaç sahne içeren ve HTML üreten bir işlevden başka bir şey değildir. Ve bu, öğrenmeniz gereken ilk derstir: React bileşeniniz Saf bir işlev: sahne, html çıkıyor. Bileşen, verileri almak için eşzamansız işlevi yerine getiremeyebilir (çünkü bir yan etkidir). Bir bileşen aldığı mülkü değiştiremez (sonsuzluk). Yani, bir kez daha: bileşen sadece birkaç sahne alır ve HTML çıkışı üretir. Dönem. Ama bekleyin, eğer bileşen bu kadar basitse, onunla nasıl yararlı bir şey yapabiliriz? Pekala, izlemeye devam edin, çünkü bir sonraki yazıda bunun hakkında konuşacağız! Josiah Weiss tarafından Üstün Görüntü Unplash.
