Mithril.js State Nedir?

Nitelikler POJO(Eski JavaScript Nesnesidir.) içerisinde tanımlanan değişkenlerdir. Nesne içerisinde kullanıldıklarından dolayı nitelik ismini almışlardır. Çünkü değişkenler Nesne içerisinde o nesnenin bir özelliği kabul edilir. Bunu bir insanın boyu, bir sınıfın mevcudu gibi düşünebilirsiniz.

State bulunduğu Mithril.js componentine özgü değerleri yazdırmak ile yükümlüdür. Bu tutulan değerler, fonksiyon, string, integer, array, object olabilir.

POJO component state

Genellikle bileşen durumunu yönetmek için kapak(closure) kullanmanız önerilir. Bununla birlikte, bir POJO'da durumu yönetmek için bir nedeniniz varsa, bir bileşenin durumuna üç yolla erişilebilir: başlangıçta bir plan olarak, bileşen yöntemlerinde anahtar kelime aracılığıyla vnode.state ve this aracılığıyla.

Aşağıdaki örnekte Deneme bileşenin data Niteliği vnode.state nesnesinin bir özelliği haline gelir.

var Deneme = {
    data: "javascript Ders",
    
    view: function(vnode) {
        return m("div", vnode.state.data)
    }
}

m.render(document.body,m(Deneme));

//HTML çıktı
//<div>javascript Ders</div>

ÇIKTI:

Vnode.state hakkında

Gördüğünüz gibi, duruma vnode.state tüm view bileşenlerin yönteminin yanı sıra tüm lifecycle methods(yaşam döngüsü yöntemlerinde) kullanılabilen özellik üzerinden de erişilebilir.

var Test = {

    oninit: function(vnode) {
        vnode.state.data = vnode.attrs.text
    },
    view: function(vnode) {
        return m("h2", vnode.state.data)
    }
}

m.render(document.body,m(Test, {text: "Hello"}));

// Equivalent HTML
// <h2>Hello</h2>

This Keyword(Anahtar) Kelime ile

Duruma ayrıca , tüm yaşam döngüsü metotlarında view ve bir bileşenin metodunda mevcut olan this anahtar kelimeyle erişilebilir.

var Test = {

    oninit: function(vnode) {
        this.data = vnode.attrs.text
    },
    
    view: function(vnode) {
        return m("h3", this.data)
    }
}

m.render(document.body,m(Test, {text: "Hello"}));

// Equivalent HTML
// <h3>Hello</h3>

ES5 fonksiyonları kullanırken this, iç içe geçmiş anonim fonksiyonların değerinin bileşen örneği olmadığını unutmayın.

Classes

Gereksinimlerinize uygunsa (nesne yönelimli projelerde olduğu gibi), bileşenler sınıfları kullanarak da yazılabilir:

class Test {
    constructor(vnode) {
        this.kind = "class component"
    }
    view() {
        return m("div", `Hello from a ${this.kind}`)
    }
    oncreate() {
        console.log(`A ${this.kind} was created`)
    }
}

m.render(document.body, m(Test))

Sınıf bileşenleri , ağacın oluşturmasını sağlamak için view() algılanan bir yöntem tanımlamalıdır. prototype.view

Normal bileşenlerin Aşağıdaki şekilde çalıştırılabilirler.

// EXAMPLE: m.render yöntemi
m.render(document.body, m(Test))

// EXAMPLE: m.mount yöntemi ile
m.mount(document.body, Test)

// EXAMPLE: m.route yöntemi
m.route(document.body, "/", {
    "/": Test
})

// EXAMPLE: component bileşim yöntemi
class AnotherClassComponent {
    view() {
        return m("main", [
            m(Test)
        ])
    }
}