React'ta Shadow DOM mu var yoksa sadece Virtual DOM…

React'te varsayılan olarak Virtual DOM kullanılır. Shadow DOM, web bileşenlerinin ayrı bir teknolojisidir.

React, kullanıcı arayüzü güncellemelerinin performansını artırmak için Virtual DOM kullanır. Her durum değişikliğinde, React gerçek DOM'u doğrudan manipüle etmek yerine, hafif bir kopyasını (Virtual DOM) hafızada oluşturur. Değişikliklerde, React mevcut Virtual DOM ile önceki versiyonu karşılaştırır, en küçük farkları bulur ve yalnızca gerekli olan gerçek DOM parçalarını günceller.

Shadow DOM ise, web bileşenleri standardının bir parçasıdır ve stilleri ve yapıyı kapsüllemek için tasarlanmıştır. Bağımsız bir DOM ağacı oluşturur ve ana belgeyle izole olur.

React, Shadow DOM kullanan web bileşenleriyle birlikte kullanılabilir, ancak React varsayılan olarak Shadow DOM oluşturmaz veya kullanmaz.

// React'te Virtual DOM kavramına örnek
// Durum değiştiğinde, React VDOM'u karşılaştırır
// ve yalnızca değişen DOM parçalarını günceller
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
    // React, gerçek DOM'daki sayısal metin düğümünü güncelleyecektir
  }

  render() {
    return (
      <div>
        <p>Sayaç: {this.state.count}</p> {/* Bu bileşen kısmı sanallaştırılacaktır */}
        <button onClick={() => this.increment()}>Arttır</button>
      </div>
    );
  }
}

<!-- Shadow DOM kullanımı örneği -->
<my-custom-element></my-custom-element>

<script>
  customElements.define('my-custom-element', class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' }); // Shadow DOM oluştur
      shadowRoot.innerHTML = `
        <style>
          p { color: blue; } /* Shadow DOM'da kapsüllenmiş stil */
        </style>
        <p>Bu metin Shadow DOM'dadır</p>
      `;
    }
  });
</script>

Ana farklar:

Özellik	Virtual DOM	Shadow DOM
Bu nedir?	Bellekte konsept/desen	Tarayıcı teknolojisi
Amacı	UI güncellemelerini optimize etmek	Stil ve yapıyı kapsüllemek
Nerede kullanılır?	Frameworkler/Kütüphaneler (React, Vue)	Web bileşenleri
Nasıl çalışır?	Bellekte ağaç karşılaştırması yapar	İzole edilmiş DOM ağacı oluşturur

React'ta Shadow DOM mu var yoksa sadece Virtual DOM mu?