g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

React iletişimi için "Önerilen" Redux, ustalaşmak için bu makaleyi okuyun

arka fon

React bileşeni componentDidMount, Modeli başlatır ve Modelin değişim olayını dinler Model değiştiğinde, tüm bileşeni yeniden oluşturmak için React bileşeninin setState yöntemi çağrılır.Son olarak, bileşen componentWillUnmount olduğunda, izleme iptal edilir ve Model yok edilir.

Redux'un ortaya çıkışının ilk kısmı

Varoluş makul

Gibi Aşağıdaki resmin sol tarafı Gösterildiği gibi, React'in tek yönlü akış özellikleri, karmaşık durum yönetimi karşısında onu giderek daha sorunlu hale getirir. Redux'un ortaya çıkışı, eyaletteki veri sorununu çözmektir.

Gibi Aşağıdaki resmin sağ tarafı Gösterildiği gibi, redux tek bir durum kitaplığı sağlar.

Redux'un üç özelliği:

1 Benzersiz veri kaynağı

2 Salt okunur tut

3 Veri değişiklikleri yalnızca salt işlevler aracılığıyla gerçekleştirilebilir

Redux konseptinin ikinci kısmı

1. Kabaca bir anlayış

Öncelikle kitap ödünç almak için kütüphaneye gittiğinizde sahneyi + yukarıdaki resmin sağ tarafındaki ağaç şemasını hatırlayın.

sen kütüphaneye git;
Sor Yönetici "Batı Dünyası III" kitabına sahip mi;
yönetici Kontrol Stokta var;
geri bildirim İşte burada, çevrimiçi kaynakları bulun;
Kaynakları bulmak için çevrimiçi olursunuz.

Bu süreç aslında tüm Redux sürecini içerir.

Sorgulama + İnceleme = Geri Bildirim. Yani: eylem + durum = yeni durum

Bir sebep olmalı

İkincisi, özel konsept

React-Redux, tüm bileşenleri iki kategoriye ayırır: UI bileşenleri (sunum bileşenleri) ve konteyner bileşenleri (konteyner bileşenleri).

UI bileşenleri, UI'nin sunumundan sorumludur ve kapsayıcı bileşenleri veri ve mantığı yönetmekten sorumludur.

Ya bir bileşende hem kullanıcı arayüzü hem de iş mantığı varsa sorabilirsiniz. Cevap, onu aşağıdaki yapıya ayırmaktır: dış kısım bir konteyner bileşenidir ve iç kısım bir UI bileşenidir. İlki, dışarıyla iletişim kurmaktan, verileri ikincisine iletmekten sorumludur ve ikincisi, görünümü oluşturur.

React-Redux, tüm UI bileşenlerinin kullanıcılar tarafından sağlanmasını ve konteyner bileşenlerinin React-Redux tarafından otomatik olarak oluşturulmasını şart koşar. Başka bir deyişle, görsel katmandan kullanıcı sorumludur ve durum yönetimi tamamen ona bırakılmıştır.

Yukarıdakiler --- Ruan Yifeng'in web günlüğünden alınmıştır.Yeni başlayanların birkaç kez okumaları önerilir.

Aksiyon: Verileri uygulamadan mağazaya aktaran yük;
Mağaza : Verilerin kaydedileceği yer;
Sevk görevlisi : Eylemi yayınlamanın tek yolu;
Redüktör: Mağaza Eylemi aldıktan sonra, görünümün değişmesi için yeni bir durum vermesi gerekir. Redüktör, Eyleme göre durumu hesaplar;
Durum : Mağazada depolanan veriler.

Üç, örnek kod

Redux, eksiksiz bir süreci içeren basit bir ekleme işlemidir.

Hangi içerir

Redux kavramları;
UI bileşenleri ve kapsayıcı bileşenleri arasındaki ilişki;
Sağlayıcının Kullanımı

React'i içe aktar, {Component} "react" dan; PropTypes'i "prop türlerinden" içe aktarın; ReactDOM'u "react-dom" dan içe aktarın; "redux" den {createStore} öğesini içe aktarın; "react-redux" içinden {Provider, connect} içe aktarın; // Bileşenler oluştur class Counter Bileşeni genişletir { render () { const {değer, onIncreaseClick} = this.props; dönüş ( < div > < açıklık > {değer} < / span > < düğme onClick = {onIncreaseClick} > Artırmak < /buton > < / div > ); } } Counter.propTypes = { değer: PropTypes.number.isRequired, onIncreaseClick: PropTypes.func.isRequired }; // eylemi tanımlayın const arttırmaAction = {tür: "artış"}; / ** * Redüktör işlevi * @param {*} durum varsayılan değeri * @param {*} eylemi, eyleme dayalı olarak durumu hesaplar. * / function counter (state = {count: 0}, action) { const count = state.count; switch (action.type) { durum "artış": return {count: count + 1}; varsayılan: dönüş durumu; } } / ** * Mağaza oluştur- > Redüktöre ihtiyacınız var- > Varsayılan değer + eylem * / const store = createStore (sayaç); / ** * (Harici) durum nesnesinden (UI bileşeni) props nesnesine bir eşleme ilişkisi kurun. * @param {*} durumu * / function mapStateToProps (state) { dönüş { değer: state.count }; } / ** * Store.dispatch yöntemine UI bileşen parametrelerinin eşlemesini oluşturun * Hangi kullanıcının işlemlerinin Eylemler olarak ele alınması ve Mağazaya iletilmesi gerektiğini tanımlar. * Bir işlev veya nesne olabilir. * * 1. İşlev: * -Parametreler: * İki parametre gönderimi ve ownProps (konteyner bileşeninin props nesnesi) alabilirsiniz; * - geri dönüş değeri * Bir nesne, her anahtar / değer çifti bir eşlemedir, * UI bileşenlerinin parametrelerinin Eylemleri nasıl yayınladığını tanımlar. * 2. Hedef * Her bir anahtar adı aynı zamanda UI bileşenine karşılık gelen aynı ada sahip bir parametredir ve anahtar değeri bir işlev olmalıdır, * Eylem yaratıcısı olarak değerlendirilecek ve iade edilen Eylem Redux tarafından otomatik olarak yayınlanacaktır. * @param {*} gönderim * / function mapDispatchToProps (dispatch) { dönüş { // onIncreaseClick üzerinde aynı ada sahip işlev, bir eylem gönderin onIncreaseClick: () = > dispatch (boostAction) }; } / ** * connect, kapsayıcı bileşenlerini otomatik olarak oluşturur ve UI bileşenlerini bununla ilişkilendirir. * Sayaç: UI bileşeni * mapStateToProps: Giriş mantığı: harici verilerin (yani, durum nesnesi) UI bileşen parametrelerine nasıl dönüştürüldüğü * mapDispatchToProps: Kullanıcı tarafından gönderilen eylemin bir Action nesnesi haline gelmesi ve UI bileşeninden iletilmesi. * / const App = connect ( mapStateToProps, mapDispatchToProps ) (Sayaç); // React-Redux, Konteyner bileşenlerinin durum almasına izin veren Sağlayıcı bileşenleri sağlar. // Sağlayıcı, kök bileşenin dışında bir katmana sahiptir, böylece Uygulamanın tüm alt bileşenleri varsayılan olarak durum alabilir // İlke: React'teki bağlam niteliği, ReactDOM.render ( < Sağlayıcı mağazası = {mağaza} > < Uygulama / > < /Sağlayıcı > , document.getElementById ("kök") );

Anlamak için aşağıdaki şekli birleştirin

Resim kaynağı: https://juejin.im/post/5acdbe8f51882548fe4a7af1

sonuç olarak

Bu örnekte, en dıştaki sağlayıcı react-redux'te sağlayıcı bileşenini kullanır, Peki sağlayıcı bileşeni tam olarak ne yapıyor? Sağlayıcı alt bileşenlerinin bağlam öznitelikleri neden olabilir?

Önceki makale değerleri aktarmak için bağlam kullandı ve çok fazla açıklama yapmadı.

Sağlayıcının kendisi bir tepki bileşenidir, bu önce çözülmelidir. React'in bağlam özelliğini kullanarak uygulama prensibi çok basittir. Belge Context-React, en dıştaki bileşende bir getChildContext yöntemi uyguladığınız ve bir nesne döndürdüğünüz sürece, tüm dahili bileşenler bu nesneyi this.context aracılığıyla alabilir. Yani basit bir Sağlayıcı uygulaması şuna benzer:

class Provider, React.Component { getChildContext () { iade {store: this.props.store} } render () { this.props.children döndür } } // kullanım const store = createStore (); ReactDOM.render ( < Sağlayıcı mağazası = {mağaza} > < Uygulama / > < /Sağlayıcı > , document.querySelector ('# root'));

O zaman tüm sayfanın mantıksal akışı:

Mağaza Oluştur, createStore (), azaltıcıların varsayılan değerini kabul edin;

createStore, her düşürücüye bir action.type = @@ redux / INTT türü gönderir ve ardından durum varsayılan değerini döndürür;

Render (), oluşturma işlemini gerçekleştirir.Her alt bileşen, mapStateToProps yöntemine geçirilen this.context.store.getState () yöntemi aracılığıyla durum nesnesi + ownProps alır, props oluşturur ve bunları alt bileşenlere uygular;

UI bileşeni eylemi tetikler ve ardından mapDispatchToProps ilgili eylemi tetikler;

Strore, azaltma eylemini alır, yeni durumu alır ve ardından props oluşturmak için tüm alt bileşenlerin mapDispatchToProps'unu çağırır.

Son olarak, sağlayıcı güncellenmesi gereken bileşenleri yeniden işler.

üçüncü bölüm

react-redux örneği - TodoList demosu

Bu makaleyi daha derinlemesine anlamak için baştan bir tarafı uygulamaya çalışın. Yukarıda bahsedilen çok fazla kod anlayışının ışığında, sorun olmamalı, ancak fazla göze batmayın.

teşekkür

React-Redux ilkesini anlamak için bir resim Analiz: Redux ilkesini anlamanıza izin verin https://www.cnblogs.com/nayek/p/12369418.html https://www.processon.com/view/5db55958e4b0e433944fdc87 https://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

[Açık kaynak önerisi] Nightingale (Nightingale) kurumsal düzeyde izleme çözümü

Mart'taki Küresel Web Sunucusu Anket Raporu: nginx alan adı paylaşımı Apache'yi aşıyor