Bileşen Türleri

Preact'te iki tür bileşen vardır:

• Hayat döngüsü yöntemlerine ve duruma sahip Klasik Bileşenler
• props kabul eden ve [JSX] döndüren Durumsuz Fonksiyonel Bileşenler

Bu iki tür içinde, bileşenleri uygulamanın birkaç farklı yolu da vardır.

---

---

Örnek

Bir örnek kullanarak: basit bir bileşeni, bir HTML öğesi oluşturur:

class Link extends Component {
    render(props, state) {
        return <a href={props.href}>{ props.children }</a>;
    }
}

Bu bileşeni şu şekilde oluşturabiliriz:

<Link href="http://example.com">Bazı Metin</Link>

Props ve State Ayıklama

Bu ES6 / ES2015 olduğu için, `bileşenimizirender()'ın ilk argümanı olan props`'tan yerel değişkenlere anahtarları eşleştirerek daha da basitleştirebiliriz, ayıklama kullanarak:

class Link extends Component {
    render({ href, children }) {
        return <a {...{ href, children }} />;
    }
}

Eğer bileşenimize geçirilen _tüm_ `props`'ları öğesine kopyalamak istersek, yayılma operatörü kullanabiliriz:

class Link extends Component {
    render(props) {
        return <a {...props} />;
    }
}

Durumsuz Fonksiyonel Bileşenler

Son olarak, bu bileşenin durumu tutmadığını görebiliriz - bileşeni aynı props ile render ettiğimizde her seferinde aynı sonucu alırız. Bu durumda, genellikle bir Durumsuz Fonksiyonel Bileşen kullanmak en iyisidir. Bunlar, props'ı bir argüman olarak kabul eden ve JSX döndüren yalnızca fonksiyonlardır.

const Link = ({ children, ...props }) => (
    <a {...props}>{ children }</a>
);

ES2015 Notu: yukarıdaki bir Ok Fonksiyonu'dur ve fonksiyon gövdesi için süslü parantezler yerine parantezler kullandığımız için, parantezlerin içindeki değer otomatik olarak döndürülür. Bunun hakkında daha fazla bilgi edinebilirsiniz burada.