React Redux'ta Bileşen ve Konteyner Arasındaki Fark

React redux'te bileşen ve konteyner arasındaki fark nedir?

ComponentReact API'nin bir parçasıdır. Bir Bileşen, bir React UI'nin bir bölümünü tanımlayan bir sınıf veya işlevdir.

Container , bir yeniden connectsatış mağazasına gönderilen React bileşeni için resmi olmayan bir terimdir . Kapsayıcılar, Redux durum güncellemelerini ve dispatcheylemlerini alır ve genellikle DOM öğelerini oluşturmazlar; onlar için render temsilci presentational çocuk bileşenleri.

Daha fazla ayrıntı için Dan Abramov tarafından sunulan sunum ve konteyner bileşenlerini okuyun .

Verilerin getirilmesinden ve görüntülenmesinden sorumlu olan bileşene akıllı veya kapsayıcı bileşenler denir. Veriler, redux'ten, herhangi bir ağ çağrısından veya üçüncü taraf aboneliğinden gelebilir.

Aptal / sunum bileşenleri, alınan sahne esasına göre görüş sunmaktan sorumlu olanlardır.

Burada örnek olan iyi makale

https://www.cronj.com/blog/difference-container-component-react-js/

Bileşenler görünümün bir bölümünü oluşturur, bu nedenle DOM öğelerini oluşturmalı, ekrana içerik koymalıdır.

Kaplar veri detaylandırmasına katılır, bu nedenle durumu değiştirmesi gerekeceği için redux ile "konuşmalıdır". Bu nedenle, bağlantıyı ne yaptığını connect (react-redux) ve mapStateToProps ve mapDispatchToProps işlevlerini eklemelisiniz :

.
.
.
import { connect } from "react-redux";

class myContainer extends Component {
}

function mapStateToProps(state) {
  // You return what it will show up as props of myContainer
  return {
    property: this.state.property
  };
}

function mapDispatchToProps(dispatch) {
  // Whenever property is called, it should be passed to all reducers
  return bindActionCreators({ property: property }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(myContainer);

Bileşenler

Bileşenler, kullanıcı arayüzünü bağımsız, yeniden kullanılabilir parçalara ayırmanıza ve her bir parçayı ayrı ayrı düşünmenize olanak tanır. Bazen "sunum bileşenleri" olarak adlandırılırlar ve asıl endişe, nesnelerin nasıl göründüğüdür

kaplar

Kapsayıcılar, kullanıcı arayüzü olmayan bileşenler gibidir ve Kapsayıcılar, işlerin nasıl çalıştığıyla ilgilenir .. Esas olarak verileri almak ve güncellemek için redux mağazasıyla konuşur

Redux doc'tan tablo karşılaştırmasına bakın

Ayrıntılı açıklama https://redux.js.org/basics/usage-with-react#presentational-and-container-components

İkisi de bileşen; kapsayıcılar işlevseldir, bu nedenle kendi başlarına herhangi bir html oluşturmazlar ve daha sonra gerçek html'yi yazdığınız sunum bileşenlerine de sahip olursunuz. Kabın amacı, durumu haritalamak ve sunum bileşeni için sahne donanımına göndermektir.

Daha fazla okuma: Bağlantı

React, Redux bağımsız kütüphanelerdir.

React, HTML belgeleri oluşturmak için size bir çerçeve sağlar. Bileşenler, bir şekilde belgenin belirli bir bölümünü temsil eder. Bir bileşenle ilişkili yöntemler daha sonra belgenin çok belirli bir bölümünü manipüle edebilir.

Redux, JS ortamlarında verileri depolamak ve yönetmek için belirli bir felsefeyi öngören bir çerçevedir. Belirli yöntemlerin tanımlandığı büyük bir JS nesnesi, en iyi kullanım durumu, bir web uygulamasının durum yönetimi biçiminde gelir.

React, tüm verilerin kökten yapraklara doğru akması gerektiğini öngördüğünden, tüm sahne öğelerini korumak, bileşenlerde sahne donanımlarını tanımlamak ve ardından nesneleri belirli donanımlara çocuklara aktarmak sıkıcı hale gelir. Ayrıca tüm uygulama durumunu savunmasız hale getirir.

React Redux, bağlı bileşeni başka bir React Bileşeninin (sizin Container) etrafına sararak sizi doğrudan Redux mağazasına bağlayan temiz bir çözüm sunar . Uygulamanızdan beri, uygulamanız tüm uygulama durumunun hangi parçasına ihtiyacınız olduğunu zaten tanımlamışsınızdır. Yaniconnect , bu verileri depodan çıkarır ve kendisini etrafına sardığı bileşene destek olarak aktarır.

Şu basit örneği düşünün:

 class Person extends Component {
  constructor(props){
   this.name = this.props.name;
   this.type = this.props.type;
  }

  render() {
     return <p> My name is {this.name}. I am a doctor { this.type } </p>
  }
}

 const connect = InnerComponent => { 

   class A extends Component{
     render() {
        return <InnerComponent {...this.props} type="Doctor"/>
     }
   } 
   A.displayName = `Connect(${InnerComponent.displayName})`
   return A
 }

connectişlevi bir prop iletir type.

Bu şekilde bir bağlantı, Kişi bileşeni için kapsayıcı görevi görür.

React'in iki ana bileşeni vardır, ilki akıllı bileşen (konteynerler) ve ikincisi aptaldır (sunum bileşeni). Konteynerler bileşenlere çok benzer, tek fark konteynerlerin uygulama durumunun farkında olmasıdır. Web sayfanızın bir kısmı yalnızca verileri görüntülemek için kullanılıyorsa (aptal), onu bir bileşen yapın. Akıllı olmanız ve uygulamadaki durumdan (veriler değiştiğinde) haberdar olmanız gerekiyorsa, onu bir kapsayıcı yapın.