Ana içeriğe geç

Dış DOM Değişiklikleri

Genel Bakış​

Bazen, DOM'u serbestçe değiştirebileceği, içinde durumu sürdürebileceği veya hiç bileşen sınırları olmayan üçüncü taraf kütüphaneleri ile çalışmak gerekebilir. Bu tür çalışan birçok harika UI toolkitleri veya yeniden kullanılabilir öğe bulunmaktadır. Preact'te (ve benzer şekilde React'te), bu tür kütüphanelerle çalışmak, Bir Bileşen içinde gerçekleştirilen herhangi bir dış DOM değişikliğini geri almak için Sanal DOM render/dif algoritmasına bilgi vermenizi gerektirir.

bilgi

Dış DOM değişiklikleri yapmadan önce bileşenin doğru şekilde işlenmesi için dikkat edilmesi gereken bazı noktalar vardır.

Teknik​

Bu, bileşeninizde shouldComponentUpdate() metodunu tanımlayıp false döndürmek kadar basit olabilir:

class Block extends Component {
  shouldComponentUpdate() {
    return false;
  }
}

... veya kısaca:

class Block extends Component {
  shouldComponentUpdate = () => false;
}

Bu yaşam döngüsü kancası yerleştirildiğinde ve Preact'e değişiklikler VDOM ağacında yukarıya çıktığında Bileşeni yeniden render etmemesini söylediğinizde, Bileşeniniz artık Montajdan çıkarılana kadar statik olarak işlenebilecek bir kök DOM öğesine sahiptir.
— Preact Belgelendirmesi

Herhangi bir bileşende olduğu gibi, bu referans basit bir şekilde this.base olarak adlandırılır ve render()'dan dönen kök JSX Elemanına karşılık gelir.

Örnek İnceleme​

İşte bir Bileşen için yeniden render etmeyi "kapatan" bir örnek. render() yine de Bileşeni oluşturmak ve monte etmek için çağrılır, böylece başlangıçtaki DOM yapısını oluşturur.

class Example extends Component {
  shouldComponentUpdate() {
    // diff ile yeniden render etmeyin:
    return false;
  }

  componentWillReceiveProps(nextProps) {
    // ihtiyacınız olursa gelen props ile burada bir şey yapabilirsiniz
  }

  componentDidMount() {
    // şimdi monte edildi, DOM'u serbestçe değiştirebilir:
    let thing = document.createElement('maybe-a-custom-element');
    this.base.appendChild(thing);
  }

  componentWillUnmount() {
    // bileşen DOM'dan çıkarılmak üzere, herhangi bir temizlik yapın.
  }

  render() {
    return <div class="example" />;
  }
}
ipucu

Bileşeninizi yeniden render etmekten kaçınmak için shouldComponentUpdate yöntemini dikkatlice kullanın.

Demonstrasyon​

demo

Bu demo'yu Webpackbin'de görüntüle

Gerçek Dünya Örnekleri​

Alternatif olarak, bu tekniği preact-token-input içinde eylemde görebilirsiniz - bu, DOM'da bir tutunma noktası olarak bir bileşen kullanır, ancak ardından güncellemeleri devre dışı bırakır ve tags-input burada devralır. Daha karmaşık bir örnek olarak preact-richtextarea verilebilir, bu teknikle düzenlenebilir bir `` içinde yeniden render etmeyi önler.