Yaşam Döngüsü Yöntemleri

Kullanım

Bileşenler ve sanal DOM düğümleri, bir DOM öğesinin yaşam döngüsü boyunca çeşitli noktalarda çağrılan hooks olarak da bilinen yaşam döngüsü metotlarına sahip olabilir.

// Bileşende örnek hook
var ComponentWithHook = {
  oninit: function (vnode) {
    console.log('initialize component');
  },
  view: function () {
    return 'hello';
  },
};

// vnode'da örnek hook
function initializeVnode() {
  console.log('initialize vnode');
}

m(ComponentWithHook, { oninit: initializeVnode });

Tüm yaşam döngüsü metotları, ilk argümanları olarak vnode'u alır ve this anahtar kelimesi vnode.state'e bağlanır.

Yaşam döngüsü metotları yalnızca bir m.render() çağrısının yan etkisi olarak çağrılır. DOM, Mithril dışında değiştirilirse çağrılmazlar.

DOM öğesi yaşam döngüsü

Bir DOM öğesi tipik olarak oluşturulur ve belgeye eklenir. Daha sonra bir kullanıcı arayüzü olayı tetiklendiğinde ve veriler değiştiğinde öznitelikleri veya alt düğümleri güncellenebilir; ve öğe alternatif olarak belgeden kaldırılabilir.

Bir öğe kaldırıldıktan sonra, geçici olarak bir bellek havuzunda tutulabilir. Havuzdaki öğe, sonraki bir güncellemede yeniden kullanılabilir ( DOM geri dönüşümü adı verilen bir işlemde). Bir öğeyi geri dönüştürmek, yakın zamanda var olan bir öğenin kopyasını yeniden oluşturmanın performans maliyetinden kaçınmayı sağlar.

oninit

oninit(vnode) hook'u, bir vnode sanal DOM motoru tarafından işlenmeden önce çağrılır. oninit, DOM öğesi belgeye eklenmeden önce çalışacağı ve üst vnode'larda çocuklarından önce çalışacağı garanti edilir, ancak ata veya torun DOM öğelerinin varlığına ilişkin herhangi bir garanti sunmaz. oninit metodundan asla vnode.dom'a erişmemelisiniz.

Bu hook, bir öğe güncellendiğinde çağrılmaz, ancak bir öğe geri dönüştürüldüğünde çağrılır.

Diğer hook'larda olduğu gibi, oninit geri çağrısındaki this anahtar kelimesi vnode.state'i işaret eder.

oninit hook'u, vnode.attrs veya vnode.children aracılığıyla iletilen argümanlara dayalı olarak bileşen durumunu başlatmak için kullanışlıdır.

function ComponentWithState() {
  var initialData;
  return {
    oninit: function (vnode) {
      initialData = vnode.attrs.data;
    },
    view: function (vnode) {
      return [
        // başlatma zamanındaki verileri görüntüler:
        m('div', 'Initial: ' + initialData),
        // mevcut verileri görüntüler:
        m('div', 'Current: ' + vnode.attrs.data),
      ];
    },
  };
}

m(ComponentWithState, { data: 'Hello' });

Bu metottan model verilerini eşzamanlı olarak değiştirmemelisiniz. oninit, diğer öğelerin durumuyla ilgili herhangi bir garanti vermediğinden, bu metottan oluşturulan model değişiklikleri, bir sonraki render döngüsüne kadar kullanıcı arayüzünün tüm bölümlerine yansımayabilir.

oncreate

oncreate(vnode) hook'u, bir DOM öğesi oluşturulduktan ve belgeye eklendikten sonra çağrılır. oncreate'in render döngüsünün sonunda çalışacağı garanti edilir, bu nedenle bu metottan vnode.dom.offsetHeight ve vnode.dom.getBoundingClientRect() gibi düzen değerlerini okumak güvenlidir.

Bu hook, bir öğe güncellendiğinde çağrılmaz.

Diğer hook'larda olduğu gibi, oncreate geri çağrısındaki this anahtar kelimesi vnode.state'i işaret eder. Vnode'ları bir oncreate hook'una sahip olan DOM öğeleri geri dönüştürülmez.

oncreate hook'u, bir yeniden çizimi tetikleyebilecek düzen değerlerini okumak, animasyonları başlatmak ve DOM öğesine bir referans gerektiren üçüncü taraf kitaplıklarını başlatmak için kullanışlıdır.

var HeightReporter = {
  oncreate: function (vnode) {
    console.log('Initialized with height of: ', vnode.dom.offsetHeight);
  },
  view: function () {},
};

m(HeightReporter, { data: 'Hello' });

Bu metottan model verilerini eşzamanlı olarak değiştirmemelisiniz. oncreate, render döngüsünün sonunda çalıştırıldığından, bu metottan oluşturulan model değişiklikleri, bir sonraki render döngüsüne kadar kullanıcı arayüzüne yansıtılmaz.

onupdate

onupdate(vnode) hook'u, bir DOM öğesi güncellendikten sonra, belgeye eklenmişken çağrılır. onupdate'in render döngüsünün sonunda çalışacağı garanti edilir, bu nedenle bu metottan vnode.dom.offsetHeight ve vnode.dom.getBoundingClientRect() gibi düzen değerlerini okumak güvenlidir.

Bu hook yalnızca öğe önceki render döngüsünde varsa çağrılır. Bir öğe oluşturulduğunda veya geri dönüştürüldüğünde çağrılmaz.

Vnode'ları bir onupdate hook'una sahip olan DOM öğeleri geri dönüştürülmez.

onupdate hook'u, bir yeniden çizimi tetikleyebilecek düzen değerlerini okumak ve model verileri değiştirildikten sonra üçüncü taraf kitaplıklarındaki kullanıcı arayüzünü etkileyen durumu dinamik olarak güncellemek için kullanışlıdır.

function RedrawReporter() {
  var count = 0;
  return {
    onupdate: function () {
      console.log('Redraws so far: ', ++count);
    },
    view: function () {},
  };
}

m(RedrawReporter, { data: 'Hello' });

onbeforeremove

onbeforeremove(vnode) hook'u, bir DOM öğesi belgeden ayrılmadan hemen önce çağrılır. Bir Promise döndürülürse, Mithril.js DOM öğesini yalnızca promise tamamlandıktan sonra ayırır.

Bu hook yalnızca parentNode'unu kaybeden DOM öğesinde çağrılır, ancak alt öğelerinde çağrılmaz.

Diğer hook'larda olduğu gibi, onbeforeremove geri çağrısındaki this anahtar kelimesi vnode.state'i işaret eder. Vnode'ları bir onbeforeremove hook'una sahip olan DOM öğeleri geri dönüştürülmez.

var Fader = {
  onbeforeremove: function (vnode) {
    vnode.dom.classList.add('fade-out');
    return new Promise(function (resolve) {
      setTimeout(resolve, 1000);
    });
  },
  view: function () {
    return m('div', 'Bye');
  },
};

onremove

onremove(vnode) hook'u, bir DOM öğesi belgeden kaldırıldıktan sonra çağrılır. Bir onbeforeremove hook'u da tanımlanmışsa, onremove hook'u onbeforeremove'dan döndürülen promise tamamlandıktan sonra çalışır.

Bu hook, doğrudan üst öğesinden ayrılmış olup olmadığına veya ayrılmış başka bir öğenin çocuğu olup olmadığına bakılmaksızın, belgeden kaldırılan herhangi bir öğede çağrılır.

Diğer hook'larda olduğu gibi, onremove geri çağrısındaki this anahtar kelimesi vnode.state'i işaret eder. Vnode'ları bir onremove hook'una sahip olan DOM öğeleri geri dönüştürülmez.

onremove hook'u, temizleme görevlerini çalıştırmak için kullanışlıdır.

function Timer() {
  var timeout = setTimeout(function () {
    console.log('timed out');
  }, 1000);

  return {
    onremove: function () {
      clearTimeout(timeout);
    },
    view: function () {},
  };
}

onbeforeupdate

onbeforeupdate(vnode, old) hook'u, bir vnode bir güncellemede farklılaştırılmadan önce çağrılır. Bu fonksiyon tanımlanmışsa ve false döndürürse, Mithril.js vnode'da ve dolayısıyla vnode'un çocuklarında bir farklılaştırmanın gerçekleşmesini engeller.

Bu hook tek başına, alt ağaç bir bileşen içinde kapsüllenmediği sürece bir sanal DOM alt ağacının oluşturulmasını engellemez.

Diğer hook'larda olduğu gibi, onbeforeupdate geri çağrısındaki this anahtar kelimesi vnode.state'i işaret eder.

Bu hook, çok büyük bir DOM ağacının olduğu durumlarda güncellemelerdeki gecikmeyi azaltmak için faydalıdır.

Anti-paternlerden kaçının

Mithril.js esnek olmasına rağmen, bazı kod paternleri önerilmez:

Erken optimizasyonlardan kaçının

Farklılaştırmayı atlamak için onbeforeupdate'i yalnızca son çare olarak kullanmalısınız. Belirgin bir performans sorununuz olmadığı sürece kullanmaktan kaçının.

Tipik olarak onbeforeupdate aracılığıyla düzeltilebilen performans sorunları, büyük bir öğe dizisine denk gelir. Bu bağlamda, "büyük" terimi, geniş bir yayılıma (ünlü 5000 satırlık tablo) veya derin, yoğun bir ağaca sahip olsun, çok sayıda düğüm içeren herhangi bir dizi anlamına gelir.

Bir performans sorununuz varsa, önce kullanıcı arayüzünün iyi bir kullanıcı deneyimi sunup sunmadığını düşünün ve sunmuyorsa değiştirin. Örneğin, bir kullanıcının 5000 satırlık ham tablo verisini elemesi yerine, yalnızca en iyi birkaç ilgili öğeyi döndüren bir arama özelliğini kullanması daha kolay olabilir.

Tasarıma dayalı bir çözüm mümkün değilse ve çok sayıda DOM öğesiyle bir kullanıcı arayüzünü optimize etmeniz gerekiyorsa, onbeforeupdate'i en büyük dizinin üst düğümüne uygulayın ve performansı yeniden değerlendirin. Vakaların büyük çoğunluğunda, tek bir kontrol yeterli olmalıdır. Nadir durumlarda yeterli değilse, yeniden değerlendirin ve gerekirse tekrarlayın, ancak her yeni onbeforeupdate bildirimi konusunda giderek daha temkinli olmalısınız. Birden çok onbeforeupdate, tasarım iş akışında önceliklendirme sorunlarını gösteren bir kod kokusudur.

Gerekli olmadıkça optimizasyonu uygulamanızın diğer alanlarına uygulamaktan kaçının. Genel olarak konuşursak, daha fazla kodun daha az koda göre daha yüksek bir bakım maliyetine neden olduğunu ve koşullu kontrolleri için nesne kimliğine güveniyorsanız, onbeforeupdate ile ilgili hataların giderilmesinin özellikle zor olabileceğini unutmayın.

Sonuç olarak, onbeforeupdate hook'u yalnızca son çare olarak kullanılmalıdır.