React Eğitimi: Nasıl Başlanır ve Nasıl Karşılaştırılır

Özellikle ön uç ve JavaScript garip bir dünyadır. Günlük olarak piyasaya sürülen yeni şeylerin miktarı, onlarla çalışmayan ve çalışan birçok kişi tarafından genellikle alay konusu olur. Yine de, bazen yeni bilgiler, kütüphaneler ve tartışmalar karşısında biraz bunalıyoruz ve gemiler için biraz daha uzun süre kalabileceğimiz güvenli bir sığınak gibi istikrarlı bir şey istiyoruz. Son zamanlarda, React dinamik bir JavaScript evrimi denizinde bu uysal liman gibi görünüyor.

Bunu göz önünde bulundurarak, yeteneklerini sergilemek ve Angular ve VueJS ile nasıl karşılaştırıldığını görmek için bu çok parçalı React öğreticisini oluşturmaya karar verdik.

Tabii ki, React kullanabileceğimiz tek liman değil, ancak şu anda en popüler, istikrarlı ve yenilikçi çözümlerden biri ve hala çok sayıda yükseltme almasına rağmen, iyileştirme için bir seçenek olmaktan çok bir seçenek. işlev için bir zorunluluktan daha fazlası.

2019'da Tepki Durumu

React, FaxJs adlı ilk prototipinin Facebook sayfasında göründüğü 2011 yılına kadar izleyebileceğimiz bir görüntüleme kitaplığıdır. 29 Mayıs 2013 ve 2 Temmuz 2013'te GitHub'da herkese açık hale getirildi.

React, topluluğu genişletmek ve React'i popülerleştirmek için konferansların görünmeye başladığı 2014 yılında popülerlik kazanmaya devam etti. Yine de benim açımdan 2015, React için bir dönüm noktası yılıydı; büyük şirketler (örneğin, Airbnb ve Netflix) React çözümlerini beğenmeye ve benimsemeye başladı. Ayrıca, React Native o yıl çıktı. React Native'in arkasındaki fikir tamamen yeni bir fikir değildi, ancak özellikle Facebook tarafından desteklendiği için izlemesi ilginçti.

Bir diğer büyük değişiklik, bir Flux uygulaması olan Redux'du. Bu, devlet yönetimini daha ulaşılabilir ve kolay hale getirerek bugüne kadarki en başarılı uygulama haline getirdi.

O zamandan bugüne, React araçları, bir çekirdek algoritma yeniden yazma, Fiber, anlamsal sürüm oluşturmada bir değişiklik vb. dahil olmak üzere birçok başka şey kullanılabilir hale geldi. Bugün 16.6.3'teyiz, muhtemelen Hooks'lu yeni sürümün kullanıma sunulmasından birkaç hafta önce (16.7.0 olması gerekiyordu, ancak bu, React.lazy için bazı düzeltmeler nedeniyle zaten yayınlandı). React iyi biliniyor ve istikrarlı ve harika görüşler alıyor.

Ama Tepki Nedir ?

Pekala, eğer ön uç geliştiriciyseniz ve bunu henüz duymadıysanız, o zaman tebrik etmeliyim ki, bu oldukça büyük bir başarı.

Şaka bir yana, React, kullanıcı arayüzü oluşturmanıza yardımcı olan bildirime dayalı bileşen tabanlı bir görünüm kitaplığıdır. Bu bir kütüphanedir, bir çerçeve değil, ancak ilk başta birçok kişi onu ikincisi olarak tanımladı.

Açıkçası, Redux, React Router ve benzerlerini ekleyeceksek, düzenli tek sayfalık bir uygulama yapmak için gerekli tüm şeylere sahip olmaya başlar, bu bazen bir kütüphane yerine bir çerçeve olarak yanlış karakterize edilmesinin bir nedeni olabilir. . Herhangi bir şey varsa, o ortamın tüm bileşenleriyle birlikte, "çerçeve" teriminin biraz uygun olduğu söylenebilir, ancak kendi başına React sadece bir kitaplıktır.

İsimlendirmeyi bırakalım ve React'te neyin farklı olduğuna, başlangıcından önce sahip olmadığımız şeylere odaklanalım. Her şeyden önce, React'i ilk düşündüğünüzde, koda baktığınızda gözünüze ilk gelen şey olduğu için JSX'i düşünüyorsunuz. JSX, HTML/XML'ye biraz benzeyen bir JavaScript sözdizimi uzantısıdır. React ve JSX söz konusu olduğunda, HTML'den birkaç farkımız var, örneğin, React'teki bir sınıf className , tabindex yoktur tabIndex , stil, camelCased özelliklerine sahip JavaScript nesnelerini kabul eder, vb.

Bazı küçük farklılıklar var, ancak herkes bunları hemen almalı. Olay işleme, örneğin olayları işlemek için bazı işlevler eklemek için kullanılabilen onChange ve onClick öznitelikleri aracılığıyla gerçekleştirilir. Ayrıca, bileşenler daha sonra sahne malzemeleri kullanılarak serbestçe yeniden kullanılabilir ve özelleştirilebilir, bu nedenle aynı kodu birkaç kez yazmak için hiçbir neden yoktur.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

Ancak, JSX aslında React'te kesinlikle gerekli değildir. Öğe oluşturmak için JSX kullanmadan normal işlevler yazabilirsiniz. Yukarıdaki kodun aynısı aşağıdaki gibi kullanılabilir.

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

Açıkçası, kullanışlı olabileceği durumlar olsa da (örneğin, gerçekten küçük bir şey tanıtmak istiyorsunuz ve yapı ortamını değiştirmek istemiyorsunuz) olsa da, böyle bir sözdizimi kullanmanızı önermiyorum.

Aslında yukarıdaki pasajı göstermemin başka bir nedeni daha var. Geliştiriciler genellikle aşağıdakileri neden yapmamız gerektiğini anlamazlar:

 import React from 'react';

Snippet kendini açıklayıcı olmalıdır. Component ayıklıyor olsak bile, hala React'e ihtiyacımız var, çünkü Babel JSX'in üstünden React.createElement altına React.createElement . Bu nedenle, React'i içe aktarmazsak, bizim için başarısız olur. Henüz JavaScript'te olmayan (veya daha doğrusu tarayıcılarda) veya bir şekilde onun uzantısı olan (veya Babel'in Babel 7'den desteklediği TypeScript gibi farklı dilleri) tanıtmamıza yardımcı olan bir araç olan Babel'den bahsettim. Babel'e teşekkürler:

• JSX, tarayıcı tarafından anlaşılan işlevlere dönüştürülecektir.
• Henüz tarayıcılarda olmayan yeni özellikleri kullanabiliriz (örneğin, sınıf özellikleri).
• Eski tarayıcı desteğini sürdürürken, daha yeni tarayıcılarda bulunan ancak eski tarayıcılarda bulunmayan özellikler ekleyebiliriz.

Kısacası, yarın JavaScript'te bugündür; bu muhtemelen kendi makalesini gerektirecek bir şeydir. React içe aktarmanın diğer bazı teknikler tarafından da atlanabileceğini belirtmekte fayda var (Webpack aracılığıyla ProvidePlugin'i tanıtmak vb.), ancak burada sınırlı alan nedeniyle, bundan kaçınacağız ve kullanıcının Create React App (React App Oluştur) kullanacağını varsayacağız. CRA) (bu araç hakkında daha fazla bilgi daha sonra verilecektir).

JSX'in kendisinden çok daha önemli olan ikinci önemli şey, React'in sanal DOM'a dayalı olmasıdır. Kısacası, sanal DOM, geliştiricinin yazdığı, daha sonra gerçek DOM ile karşılaştırılan ve mutabakat adı verilen bir süreçte onunla senkronize edilen JavaScript ile temsil edilen ideal bir ağacın belleğidir.

React, Angular ve Vue ile Nasıl Karşılaştırılır?

Özellikle armutları elmalarla karşılaştırmak zorunda kaldığımızda (kütüphanelere karşı çerçeveler vb.) Kitaplıkları karşılaştırmaktan hiç hoşlanmıyorum.

Bu nedenle, “X, Y'den daha iyidir çünkü şablonları değil, JSX'i kullandığından, teknik şeylerle pek ilgisi olmayan bir dizi kısa soru ve cevap kullanarak React'i Angular ve Vue ile karşılaştırmaya çalışacağım. ” Bunlar gibi noktalar genellikle kişisel tercihlerdir, kişinin öznel tercihleridir. Ayrıca hız, bellek tahsisi vb. React'te ve tüm büyük rakiplerinde oldukça benzerdir (Açısal ve Vue akla gelir). Konuyla ilgili gerçekten iyi bir rapor var, ancak lütfen şunu aklınızda bulundurun: Uygulamaların büyük çoğunluğu, 10k'lık bir tabloda satırları değiştiren gerçekten büyük tablolar gibi görünmüyor. Bu nedenle, bu sonuçlar aynı zamanda saf bir hız deneyidir. Gerçek dünyada, ilk etapta böyle bir şey yapmazdın.

O halde, React ile ilgili bazı sorulara ve rekabetle nasıl karşılaştırıldığına bir göz atalım:

Bir sürü iş fırsatım olsun istiyorum. React ne kadar popüler?

Bu yanıtlaması kolay bir soru - React'i seçin. Aslında, React'in Vue'dan yaklaşık 6-10 kat (oldukça büyük bir yayılma, ancak 1:50 ve bazılarında 1:6 olduğu bazı portallar var) Vue'dan daha fazla ve 2-4 kat daha fazla iş açıklığı olduğunu söyleyebilirim. Angular'dan daha fazla. React uzmanlarına talep güçlü, peki neden GitHub'da Vue bu kadar popüler (aslında React'ten daha fazla yıldızı var) ve daha az iş ilanı var? Hiç bir fikrim yok.

Büyük bir topluluk, bol miktarda kütüphane, ortaya çıkabilecek sorunlara hızlı çözümler istiyorum.

Tepki. Başka yerde arama.

Kullanımı kolay mı ve geliştirmeyi keyifli hale getiriyor mu?

2018 ve 2017 için State of JS raporlarına göre, hem React hem de Vue gerçekten iyi bir üne sahip ve çoğu geliştirici onları tekrar kullanacaklarını söylüyor. Öte yandan Angular, yıldan yıla daha fazla insanı bir daha kullanmayacaklarını söyleyerek gönderme eğilimindedir.

Yeni bir tek sayfalık uygulama oluşturmak istiyorum ama kitaplık aramak istemiyorum.

Muhtemelen Angular'ın daha iyi bir seçim olduğunu söyleyebileceğim tek yer burası.

Büyük şirketler yok. Mümkün olduğunca bağımsız olmak istiyorum, hangisini seçmeliyim?

Vue—büyük üçlümüzdeki tek bağımsız kişidir. (Google, Angular'ın arkasındayken, Facebook React'i destekliyor.)

En kolay başlangıç ​​ve en hızlı öğrenme eğrisi?

Vue/React. Burada Vue'ye doğru eğiliyorum, ama bu sadece benim kişisel görüşüm.

Niye ya? Çünkü JSX'i bilmenize bile gerek yok (isteğe bağlı) ve temelde sadece HTML + CSS + JavaScript.

React Eğitimi: İlk Uygulamanıza Başlarken

Günümüzde React ile başlamanın en kolay yolu, sizin için bir proje oluşturan ve Webpack/Babel ve daha fazlası için gerekli tüm ayarlardan kaçınmanıza yardımcı olan bir CLI aracı olan CRA'yı kullanmaktır. Bunun yerine, varsayılan olarak nasıl yapılandırıldığına ve zaman içinde nelerin dahil edildiğine güvenirsiniz. Bu sayede bazı kritik kütüphaneler için büyük güncellemeler ile ilgilenmenize gerek kalmaz.

Elbette, daha sonra, npm run eject kendinizi “çıkarabilir” ve her yönü kendi başınıza halledebilirsiniz. Bu yaklaşımın kendine has güçlü noktaları vardır, çünkü uygulamanızı başka türlü kullanılamayacak şeylerle (örn. dekoratörler) geliştirebilirsiniz, ancak aynı zamanda birçok ekstra dosya ve çok daha fazla zaman gerektirdiğinden bir baş ağrısı kaynağı olabilir.

Yani, yapılacak ilk şey şudur:

 npx create-react-app {app-name}

Sonra npm run start ve gitmeye hazırsınız.

Sınıf ve İşlev Bileşenleri

Bu bileşenlerin nasıl farklılaştığını açıklayarak başlamalıyız. Temel olarak, her bileşen bir işlev veya sınıf olabilir. Aralarındaki temel fark, birinci sınıfın, işlev bileşeninde kullanılamayan bazı özelliklere sahip olmasıdır: bir duruma sahip olabilirler ve referanslar, yaşam döngüsü, vb. daha önce bahsedilen değişiklikler nedeniyle çağrılabilir), kancalarımız da olacak, bu nedenle durum ve referanslar kancalarla mümkün olacak.

İki tür sınıf bileşeni vardır: Component ve PureComponent . İkisi arasındaki tek fark, PureComponent sahne ve durum arasında yüzeysel bir karşılaştırma yapmasıdır—bir bileşenin ve alt öğelerinin tamamen aynı durumda olduğu "boşa harcanmış" oluşturmalar yapmak istemediğiniz bir durumda kendi yararları vardır. bir renderdan sonra. Yine de, bu sadece yüzeysel bir karşılaştırmadır; Kendi karşılaştırmanızı uygulamak istiyorsanız (örneğin, karmaşık sahne öğelerini geçtiğiniz için), yalnızca Component kullanın ve shouldComponentUpdate (varsayılan olarak true döndürür) geçersiz kılın. 16.6+ sürümünden bu yana, benzer bir şey fonksiyon bileşenleri için de mevcuttur - daha yüksek dereceli bir bileşen olan ve varsayılan olarak PureComponent (sığ karşılaştırma) gibi davranan React.memo sayesinde, ancak kendi özel sahne karşılaştırmanızı iletebileceğiniz ikinci bir argüman alır .

Genel bir kural olarak, işlev bileşenini kullanabiliyorsanız (sınıf özelliklerine ihtiyacınız yok), o zaman kullanın. Yakında, 16.7.0'dan başlayarak, sınıf bileşenlerinin kullanılması yalnızca yaşam döngüsü yöntemleri nedeniyle gerekli olacaktır. İşlev bileşenlerinin daha şeffaf, akıl yürütmesi ve anlaşılması daha kolay olduğuna inanma eğilimindeyim.

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

Yapıcı(sahne)

• İsteğe bağlı, özellikle JavaScript için sınıf alanı bildirimlerinin varsayılan olarak dahil edildiği CRA bu kadar popüler olduğunda. Yöntemlerinizi sınıf gövdesindeki ok işleviyle bağlayıp bağlamadığınızı belirtmek anlamsızdır. Benzer bir durum, bir sınıf özelliği olarak da başlatılabilir.
• Yalnızca nesne için yerel durumu başlatmak ve ES6 sınıflarında bağlama yöntemleri için kullanılmalıdır.

bileşenDidMount()

• Burada Ajax aramaları yapın.
• Olay dinleyicilerine, aboneliklere vb. ihtiyacınız varsa, bunları buraya ekleyin.
• Burada setState kullanabilirsiniz (ancak bu, bileşenin yeniden oluşturulmasını sağlayacaktır).

componentWillUnmount()

• Hâlâ devam eden her şeyi temizler; örneğin, Ajax'ın kesintiye uğraması, abonelik aboneliğinin iptal edilmesi, zamanlayıcıların temizlenmesi vb.
• setState , çünkü bileşen bağlantısı kesilecektir (ve bir uyarı alacaksınız).

componentDidUpdate(prevProps, prevState, anlık görüntü)

• Bileşen güncellemeyi yeni bitirdiğinde gerçekleşir (ilk oluşturmada gerçekleşmez).
• Kullanımı isteğe bağlı olan üç parametreye sahiptir (önceki aksesuarlar, önceki durum ve yalnızca bileşeniniz getSnapshotBeforeUpdate görünecek bir anlık görüntü).
• Yalnızca shouldComponentUpdate true değerini döndürürse gerçekleşir.
• Burada setState kullanıyorsanız onu korumalısınız yoksa sonsuz bir döngüye girersiniz.

mustComponentUpdate(nextProps, nextState)

• Yalnızca performans optimizasyonu için.
• false döndürürse, bir oluşturma ÇALIŞTIRILMAYACAKTIR.
• Geçersiz kılınan SCO yalnızca sığ sahne/durum karşılaştırmasıysa bunun yerine PureComponent kullanılabilir.

getSnapshotBeforeUpdate()

• Geçerli DOM hakkında bazı bilgileri tutmak için kullanılabilir, örneğin, daha sonra componentDidUpdate içinde yeniden kullanılabilecek mevcut kaydırma konumu, kaydırma konumunu geri yüklemek için.

componentDidCatch(hata, bilgi)

• Günlüğe kaydetme hatalarının olması gereken bir yer.
• setState , ancak gelecekteki sürümlerde, durumu güncellemek için bir değer döndürerek durumu güncelleyecek olan getDerivedStateFromError(error) statik yönteminin lehine bırakılacaktır.

Her ikisi de static olan ve diğer açıklamalarda bahsedilen iki ekstra yöntem vardır.

statik getDerivedStateFromError(hata)

• Hata bilgileri burada mevcuttur.
• Hataları işlemek için kullanılabilecek (bir şey görüntüleyerek) durumu güncelleyecek bir nesne değeri döndürmelidir.
• Statik olduğundan, bileşen örneğinin kendisine erişimi yoktur.

statik getSnapshotBeforeUpdate(sahne, durum)

• Sahne öğelerinin zamanla değiştiği durumlarda kullanılmalıdır - örnek olarak, React belgelerine göre, bir geçiş bileşeni için yararlı olabilir.
• Statik olduğundan, bileşen örneğinin kendisine erişimi yoktur.

Not, bugün itibariyle kullanılabilecek birkaç yöntem daha var, ancak bunların React 17.0'da kaldırılması gerekiyor, bu yüzden burada bahsedilmedi.

Devlet ve Sahne

Açıklamaları daha kolay ve daha hızlı olduğu için Props ile başlayalım. Props, bileşene iletilen ve daha sonra bilgi/iş mantığını vb. görüntülemek için yeniden kullanılabilecek özelliklerdir.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

Yukarıdaki örnekte, name bir pervanedir. Aksesuarlar salt okunur öğelerdir ve doğrudan alt bileşenlerde değiştirilemez. Ayrıca, insanların sıklıkla yaptığı bir kötü uygulama vardır ve o da devlete kopya çekmek ve daha sonra devlet üzerinde işlem yapmaktır. Elbette, "gönderdikten sonra ana bileşeni güncelleyecek ilk durum" gibi bir şey yapmak istediğiniz durumlar vardır, ancak bu daha nadirdir - böyle bir senaryoda, ilk durum beslemesi mantıklı olabilir. Ayrıca, alt bileşenlere yalnızca dizeler gibi özellikler değil aynı zamanda sayılar, nesneler, işlevler vb. de iletilebilir.

Props ayrıca defaultProps adında bir başka kullanışlı şeye sahiptir; size bir bileşen için varsayılan propların ne olduğunu söyleyebilen statik bir alan (örneğin, bileşene aktarılmadığında).

Bir bileşenin (ebeveyn) daha sonra çocukları tarafından yeniden kullanılan bir duruma sahip olduğu “durumu yukarı kaldırma” durumunda (örn. ebeveynin yerel durumunu güncellememize izin veren ebeveyn.

State ise, değiştirilebilen, ancak this.setState kullanılarak dolaylı olarak değiştirilebilen yerel bir durumdur. Birisi durumu doğrudan değiştirecekse, bileşen değişikliğin farkında olmayacak ve söz konusu değişiklikleri duruma yansıtacak şekilde yeniden oluşturulmayacak.

SetState yerel durum nesnesini değiştirmek için bir yöntemdir (sığ bir birleştirme yaparak) ve bundan sonra bileşen buna kendini yeniden işleyerek yanıt verir. setState kullanıldıktan sonra, this.state özelliğinin işlevde bahsedilen değişiklikleri hemen yansıtmayacağını (eşzamansız bir yapıya sahip olduğunu) unutmayın, çünkü optimizasyon nedeniyle birkaç setState örneği birlikte toplu olarak gruplandırılabilir. Bu olasılıklardan birinin, durumu güncelledikten hemen sonra bileşenle bir şeyler yapmamıza izin verdiği durumlarda, çağrılmasının birkaç yolu vardır:

• setState({value: '5'})
• setState((state, props) => ({value: state.name + “'s”}))
• setState([object / function like above], () => {}) – bu form, durum sahip olmak istediğimiz verileri yansıttığında (ilk argümanda) çağrılacak olan callback aramayı eklememize izin verir.

 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

Tepki Bağlamı

React yakın zamanda stabilize edilmiş Context API (bu, bir süredir React'teydi, ancak Redux gibi en popüler kitaplıkların bazıları tarafından yaygın olarak kullanılmasına rağmen deneysel bir özellikti), bu da bir sorunu çözmemize yardımcı oluyor: sahne delme. Özetle detay detaylandırma, sahne detaylarını yapı içinde derinlemesine aktarmanın bir yoludur—örneğin, bileşenler için bir tür tema, belirli bir dil için yerelleştirme, kullanıcı bilgileri vb. olabilir. Bağlamdan Önce (ya da daha doğrusu deneysel olmayan hale gelmeden önce), ebeveynden çocuğa ve son yaprağa kadar özyinelemeli bir şekilde geçirilerek detaya inildi (tabii ki Redux da sorunu çözebilirdi). Bu özelliğin YALNIZCA sahne sondajını çözdüğünü ve Redux veya Mobx gibi şeylerin yerine geçmediğini unutmayın. Açıkçası, yalnızca bunun için bir devlet yönetimi kitaplığı kullanıyorsanız, onu özgürce değiştirebilirsiniz.

Toplama

Bu, React eğitimimizin ilk bölümünü tamamlıyor. Gelecek makalelerde, stil ve kontrol türlerinden üretim dağıtımına ve performans optimizasyonuna kadar daha gelişmiş konuları ele almayı umuyoruz.