Ana içeriğe geç

Dış DOM Mutasyonları

Bazen, DOM'u özgürce değiştirmeyi, içinde durumu korumayı bekleyen veya hiç bileşen sınırı olmayan üçüncü taraf kütüphaneleri ile çalışmak gerekebilir. Bu şekilde çalışan birçok harika UI araç seti veya yeniden kullanılabilir öğe bulunmaktadır.

Preact (ve benzer şekilde React) ile bu tür kütüphanelerle çalışmak, belirli bir Bileşen içinde gerçekleştirilen dış DOM mutasyonlarını geri almaması için Sanal DOM render/diff algoritmasına bilgi vermenizi gerektirir.

Teknik​

Bu, bileşeninizde shouldComponentUpdate() yöntemini tanımlamak ve false döndürmesini sağlamak kadar basit olabilir:

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

... veya kısaca:

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

Bu yaşam döngüsü kancası uygun bir şekilde ayarlandığında ve Preact’a değişiklikler meydana geldiğinde Bileşeni yeniden render etmemesi talimatı verildiğinde, Bileşeniniz artık, Bileşen kaldırılana kadar sabit olarak muamele görecek bir referansa sahiptir.

Herhangi bir bileşen gibi bu referansa basitçe this.base denir ve render() işlevinden dönen kök JSX Elemanına karşılık gelir.

Örnek Geçiş​

Bileşen için yeniden render etmeyi "kapama" örneği burada. render() işlevinin hala Bileşeni oluşturma ve monte etme sürecinin bir parçası olarak çağrıldığını unutmayın, başlangıçtaki DOM yapısını oluşturmak için.

class Example extends Component {
  shouldComponentUpdate() {
    // diffe göre yeniden oluşturma:
    return false;
  }

  componentWillReceiveProps(nextProps) {
    // burayı kullanarak gelen özelliklerle bir şey yapabilirsiniz.
  }

  componentDidMount() {
    // şimdi monte edildi, DOM'u özgürce değiştirebiliriz:
    let thing = document.createElement('maybe-a-custom-element');
    this.base.appendChild(thing);
  }

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

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

Unutulmamalıdır ki, bileşeninizin davranışlarını kontrol etmek için, gizli bileşen referansı vasıtasıyla DOM üzerinde değişiklikler yapabilirsiniz.

Demonstrasyon​

demo

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

Gerçek Dünya Örnekleri​

Alternatif olarak, bu tekniği preact-token-input içinde eylemde görebilirsiniz - DOM’da bir tutacak olarak bir bileşen kullanır, ancak güncellemeleri devre dışı bırakır ve tags-input ‘in devralmasına izin verir. Daha karmaşık bir örnek preact-richtextarea olur, bu teknikle düzenlenebilir bir ``’in yeniden render edilmesini önler.