Fandom Developers Wiki
Advertisement

Preact, reaktif bir programlama modeliyle etkileşimli kullanıcı arayüzleri oluşturmanıza izin veren bir JavaScript kitaplığıdır. MediaWiki kancaları ve bileşenleri ve kancaları ES3 kullanarak fazla güçlük çekmeden yazıp kullanmanıza izin veren bazı yardımcı kodlarla, bu kitaplık yeni Geliştirici betiklerinde kullanılabilir.

Belgeyi güncellemenin birden çok ince yolu olan etkileşimli bir arayüzle belgenin bir parçasının tam kontrolünü ele alan betikleri için idealdir. Dahili duruma sahip bildirimsel bileşenler, arayüzün betiğinizin dahili verileriyle güncel tutulmasını kolaylaştırır.

Çok fazla etkileşime sahip olmayacak ve DOM ögelerini oluşturmanın yalnızca basit bir yolunu gerektirecek betikleri için Dorui veya UI-js'ye bakabilirsiniz. Yine de, Preact ve öge oluşturan kitaplıkların rekabet etmediğini unutmayın; basit ögeler oluşturmanız gerekiyorsa (örneğin, araç çubuğuna ekleme) ve arayüz için her ikisini de kullanabilirsiniz. Yalnızca onları aynı ağaçta karıştırmamaya dikkat etmelisin.

İçe aktarma[]

importArticle({
    type: 'script',
    article: 'u:dev:MediaWiki:Preact.js'
});

mw.hook('dev.preact').add(function(preact) {
    // Kodunuz buraya
    // `preact`, `window.dev.preact` için bir takma addır
    // Muhtemelen `preact` nesneden bir avuç yöntem ve özellik takma adı alacaksınız.
    // Bunun daha fazlası örnekler bölümünde tartışılacaktır.
});

Preact ve React[]

React ve Preact büyük ölçüde birlikte çalışabilir olan çok benzer kitaplıklardır. Bu betik, daha az yer kaplaması nedeniyle ikincisini kullanır ve HTML özniteliklerine daha ve varsayılan olarak özelliklerde varargs yerine bir children dizisi kullanmak yakındır (htmlFor yerine for, className yerine class vb.).

React ögrenme[]

React ve Preact arasında bilgi ve deneyim büyük ölçüde değiştirilebilir. gerçek farklar nispeten azdır ve çoğu bu kitaplığın düzenli kullanımı için hiçbir fark yaratmaz. Ancak, yine de onlara biraz aşina olun.

Daha önce bir React uygulamasıyla çalışma deneyiminiz yoksa, bu betik muhtemelen sizin için çok yararlı olmayacaktır. Önce bir kılavuza veya belgelere bakmanız önerilir.

  • Burada, bir tic-tac-toe uygulaması oluşturduğunuz React öğreticisi bulunmaktadır. Bu öğreticiyi önermiyorum ve bunun yerine ana kavramların tanıtımıyla başlamanızı tavsiye ediyorum:
  • React ana kavramlar kılavuzu, sizi en küçük merhaba dünya bileşeninden işlemin birden çok kez çağırarak arayüzü yerinde güncellemeye, form yönetimi gibi durum ve karmaşık problemler. Bu, durum bilgisi olan kullanıcı arayüzleri için büyük ölçüde sınıf bileşenleri kullanmasına rağmen, React ile tanışmanın ideal yoludur. Bunu kancalara giriş ile tamamlamalı ve başlamak için sağlam bir temele sahip olmalısınız.
  • İşte React belgelerinin dizini, burada kitaplıkla ilgili her şey bulunabilir. Resmi belgelerine bakarak bu kitaplıkta sunulan özellikler hakkında daha fazla bilgi edinebilirsiniz.
  • İşte Preact için başlangıç kılavuzu, ancak çok fazla yararlı bilgi içermiyor. Bileşenler, Kancalar, Formlar, Referanslar ve Bağlam gibi özelliklerin açıklandığı "Temel Bilgiler" bölümüne atlamayı seçebilirsiniz. Sınıf bileşenlerinin kesinlikle tavsiye edilmediğini ve bunun yerine kancaları tercih etmeniz gerektiğini unutmayın.

Dev betiklerinde React veya Preact kullanmanın, ResourceLoader tarafından uygulanan kısıtlamalar nedeniyle farklı olacağını bilin. betiğinizin tüm bileşenlerin bulunduğu tek bir dosyaya sahip olması muhtemeldir ve ES3 özellikleriyle sınırlısınız, dolayısıyla bir aktarıcı (webpack, rollup, vb.) olmadan JSX'i, ok işlevlerini veya yok etmeyi kullanamazsınız. Ancak, kaldırmak için en yaygın kullanımlar (useState ve useReducer) herhangi birine ihtiyaç duymayan alternatiflere sahiptir. Bunlar, takip eden belgelerde Kancalar altında ele alınacaktır.

Belgelendirme[]

Bu bölüm, kitaplığın dışa aktardığı tüm özellikleri belgeleyecektir. Yalnızca özelliklerin üstünkörü açıklamalarını sunacak, resmi belgelere bir bağlantı sağlayacak ve orijinalinden farklıysa veya yeni bir eklentiyse ayrıntılara girecek.

Özellikler, kitaplığın sunduğu her özellik için açıklanacaktır. Kitaplığın window.dev.preact konumunda olduğunu ve dev.preact MW kancasının bağımsız değişkeni olarak tetiklendiğini unutmayın.

.render(element, container)[]

Belgelendirme: render

Bu yöntem, bir React ağacını bir kapsayıcı ögeye dönüştürür. İlk parametre, bir Component veya etiket adıyla h() çağrılarak oluşturulan bir React ögesi olmalıdır.

preact.render(
    h(App),
    document.getElementById('content')
);

.createElement(element, props)[]

Belgelendirme: createElement
Diğer adıyla: .h(element, props)

Bir etiket adından veya bir Component işlevinden bir öğe oluşturur. Bunun yerine daha kısa olan .h() varyantını kullanmanız ve öğe oluşturmanın çok kısa olması için ona başvuran bir değişken tutmanız önerilir.

Tür imzası, React'te kullanılandan farklıdır. Vararg altları çalışırken, 3. bağımsız değişkeninden itibaren, bu kesinlikle önerilmez. children ögesini doğrudan props nesnesine bir dizi olarak iletmelisiniz. Yalnızca tek bir alt öge geçirecekseniz child ögesini de kullanabilirsiniz.

Alt olarak iletmeniz gerekenlerin, Node nesneleri veya Component işlevleri değil, React ögeleri olduğunu unutmayın. Yine de dizeleri iletebilirsiniz ve bunlar belgede bir metin düğümüne dönüştürülür.

İlk bağımsız değişken olarak bir dize geçirerek normal etiketler oluşturmak size çirkin geliyorsa, kestirme .tags nesnesini kullanmayı düşünün. Bunu tercih edebilirsiniz ve bu kitaplıkla ögeler oluşturmanın önerilen yolu budur. Bununla birlikte, bileşenlerin yine de createElement aracılığıyla oluşturulması gerekir.

preact.render(
    // Bir div etiketi oluşturma
    h('div', {
        // Bir öznitelik verme
        class: 'my-app',
        children: [
            // Özelliklerle bir bileşen oluşturma
            h(Component, {
                // Bileşenler istedikleri donanımları alabilir
                value: 27,
                // Altları bile alabilirler
                // Bu özellik `child` olarak geçirilmeyecek,
                // ancak tek öğeli bir dizi olarak `child` geçirilcek
                child: 'Metin düğümleri için dizeler çalışıyor!'
            })
        ]
    })
    container
);

.cloneElement(element, props)[]

Belgelendirme: cloneElement
Belgelendirme: cloneElement (preact)

Bir React ögesini klonlar. Bu, mevcut bir ögeyi alıp kendi donanımlarınızla genişletmenize veya alt ögelerini değiştirmenize olanak tanır. Üçüncü bağımsız değişken yerine altları değiştirmek için props.children kullanmalısınız. Aksi takdirde orijinalden önemli bir değişiklik yoktur.

.createContext(defaultValue)[]

Belgelendirme: createContext

MyContext.Provider ile bileşen ağacınıza ekleyebileceğiniz ve useContext ile tüketebileceğiniz bir Context nesnesi oluşturur. Orijinalden önemli bir değişiklik yok.

.toChildArray(children)[]

Belgelendirme: toChildArray (preact)

props.children ögesini düz bir alt öge dizisine dönüştürmenizi sağlayan yardımcı işlev. Bu, tek altları bir diziye saracak ve içinde olabilecek sonsuz yuvalanmış dizileri düzleştirecektir. Orijinalden önemli bir değişiklik yok.

Parça[]

Belgelendirme: Parçalar

Bileşenlerden birden çok öge döndürmek veya tepki ögelerini başka bir şekilde gruplandırmak için Fragment sınıfı. Muhtemelen bunun yerine .frag yardımcısını kullanmalısınız. Bunun dışında orijinalinden önemli bir değişiklik yok.

.frag(children)[]

Bu yardımcı işlev, h(Fragment, { children: [...] }) yazmaktan kaçınmanızı sağlar. JSX mevcut olmadığı için, parçalar için <> kullanamazsınız, bu yüzden bu umarız kullanmak için makul bir alternatiftir.

function MyComponent() {
    return preact.frag([
        'Hello there',
        h(SubComponent)
    ]);
}

.tags[]

Bu, size HTML etiketleri oluşturmak için kısayollar sağlayan özel bir nesnedir. Bu bir 🗲「Proxy」🗲'dir ve içinde erişeceğiniz özellikler, eriştiğiniz özelliğin adını taşıyan bir öge oluşturan işlevler olacaktır Örneğin, tags.div(props), h('div', props) ögesini çağırmanın eşdeğeri olacaktır.

tags.div({
    child: 'Bu gerçekten o kadar garip değil, söz veriyorum'
});

.memo(Component, cmp)[]

Belgelendirme: memo

İşlev bileşeninizi sarar ve yalnızca karşılaştırma işlevi true değerini döndürdüğünde onu yeniden işler. Karşılaştırma işlevi sağlanmadığında, sığ bir donanım karşılaştırması yapılır ve önceki ve mevcut donanımlar arasında herhangi bir özellik farklı veya eksikse, true değerini döndürür ve bileşeni yeniden oluşturur.

React belgelerinde performansı optimize etme bölümüne ve ne zaman yapılacağı hakkında bu blog gönderisine bakın.

Kancalar[]

Kancalar, işlev bileşenlerinize durum ve yan etkileri nasıl eklediğinizdir. Kütüphane ile kullanılabilir bir arayüz oluşturmak için zorunludurlar. useState ve useReducer kancalarının standart sürümlerinden farklı olduğunu unutmayın. Diğer kancalar alternatiflere eşdeğerdir.

Bahsetmeye değer başka kancalar da var: useImperativeHandle ve useDebugValue. Bunlar, dahili olarak mevcut olmalarına rağmen kitaplık tarafından gösterilmez. Bunun nedeni, kitaplığın birlikte verilmediği özelliklere bağlı olmalarıdır. useImperativeHandle, preact/compat ögenin bir özelliği olan forwardRef ögeyi gerektirir ve useDebugValue ögenin kullanışlı olması için bir preact dev derlemesi gerekir.

useErrorBoundary başka bir ilginç kancadır. Bunun nedeni, Preact'e özgü olmasıdır, bunun için React kancası yoktur çünkü React'te sınıflarla yapılmalıdır. Bu kitaplıkta sınıflar büyük ölçüde önerilmez, bu nedenle bu, Preact için son derece uygun olur.

useState(initialState)[]

Belgelendirme: useState

useState kancası. Buna çok aşina olmalısınız. Ancak, geliştirme betiklerinde yapıyı kullanamazsınız. Bu nedenle, bu kitaplık tarafından sunulan useState işlevi biraz farklıdır.

useState, iki özelliğe sahip bir nesne döndürür: value ve set. Sırasıyla useState içinde döndürülen dizinin birinci ve ikinci değerinin eşdeğeridirler.

Bu, iki değişkene ayırmak yerine, yalnızca bir ayarlayıcı ve bir değer özelliğine sahip bir durum değişkenine sahip olduğunuz anlamına gelir. Her zaman olduğu gibi, ayarlayıcı işlevinin kimliği ve ayarlayıcı işleviyle güncellenmemişse durum değeri de sabittir.

'Ancak, nesnenin kendisi kimliği sabit değildir. Bunu, örneğin useEffect içindeki bağımlılık bağımsız değişkeni için kullanmamalısınız. Bunun yerine state.value kullanmalısınız, çalışacaktır.

function MyComponent() {
    var counter = useState(0);

    // {Bağımlılık listesinde counter.value nesneyi nasıl kullandığımıza dikkat edin, counter ögeyi değil
    // Her zaman olduğu gibi, ayarlayıcı işlevinin kimliği sabittir,
    // böylece kullansanız bile bağımlılık listesinden çıkarabilirsiniz.
    useEffect(function() {
        console.log('Sayacın değeri değişti!');
        console.log('Yeni değer şudur: ' + counter.value);
    }, [counter.value]);

    return ui.span({
        child: 'Geçerli sayı ' + counter.value + ' şeklindedir. Arttırmak için beni tıklayın!',
        onClick: function() {
            counter.set(counter.value + 1);

            // Geri çağrı yöntemini de kullanabilirsiniz.
            // Bu, yeni durum önceki duruma bağlı olduğunda tercih edilir
            // Bu durumda, durumu ayarlamanın daha uygun yolu budur
            // Ancak bu kadar küçük bir örnekte, her ikisi de gayet iyi çalışıyor
            // Yalnızca burada gösterildiği gibi ikisini aynı anda yapmayın!
            counter.set(function(count) {
                return count + 1;
            });
        }
    });
}

useReducer(reducer, initialArg, init)[]

Belgelendirme: useReducer

useReducer kancası. Yukarıdaki belgelerde bununla ilgili daha fazla bilgi edinebilirsiniz.

Tıpkı useState gibi, kaldırma erişiminiz yoktur, bu nedenle bu işlev bunun yerine bir nesne { state, dispatch } döndürür. state ve dispatch, normal useReducer ile aynı kararlılık vaatlerine sahiptir, ancak nesnenin kendisi bunu yapmaz. Aklınızda bulundurun ve bu konuda sorun yaşamayacaksınız.

useEffect(effect, deps)[]

Belgelendirme: useEffect

Bileşenlerin işlenmesine yan etkiler eklemenin ana yolu olan useEffect kancası. Bunlarda veri alma, aralıklar, abonelikler veya başka herhangi bir şey ayarlayabilirsiniz. Temizleme olarak adlandırılacak bir işlev de döndürebilirsiniz. Belgeleri okuduğunuzdan emin olun, bu çok önemli bir kancadır.

useMemo(fn)[]

Belgelendirme: useMemo

useMemo kancası. Orijinalden önemli bir değişiklik yok.

useCallback(fn)[]

Belgelendirme: useCallback

useCallback kancası. Alt bileşenlerde yeniden oluşturmayı önlemek için kullanışlıdır! Orijinalden önemli bir değişiklik yok.

useRef(initialValue)[]

Belgelendirme: useRef

useRef kancası. Bileşenleriniz tarafından döndürülen dahili DOM düğümlerine erişmek veya güncellemeler için bileşeninizin yeniden işlenmesine ihtiyaç duymadığınız herhangi bir durumu korumak için çok kullanışlıdır. Orijinalden önemli bir değişiklik yok.

useContext(fn)[]

Belgelendirme: useContext

useContext kancası. Durumu çok fazla delmekten kaçınmak için. Üzgünüz, henüz redux kullanamazsınız! Orijinalden önemli bir değişiklik yok.

useLayoutEffect(fn)[]

Belgelendirme: useLayoutEffect

useLayoutEffect kancası. DOM mutasyonları belgenin kendisine aktarıldıktan sonra eşzamanlı olarak çağrılır. Bu kancayı, belgeyi güncellemek, yeni belgeye dayalı olarak bazı değerleri yeniden hesaplamak (örneğin, kaydırma konumunu güncellemek için bir öğenin yeni kaydırma yüksekliği) ve efektin içinde eşzamanlı olarak yeniden oluşturmak için kullanabilirsiniz. Bu, tarayıcı ekranı boyamadan önce yapılır, böylece kullanıcı aradaki tutarsız durumu fark etmez. Bu, Preact'in oluşturma ardışık düzenine daha fazla müdahale etme ve kodunuzu ne zaman çalıştıracağı konusunda ona daha az özgürlük verme, potansiyel olarak önemsiz ekleme veya arayüzünüzü yavaşlatma pahasına gelir. Orijinalden önemli bir değişiklik yok.

useErrorBoundary(callback)[]

Belgelendirme: useErrorBoundary

useErrorBoundary kancası. Bu, React hata sınırlarının yerini alan ve bunları kancalardan kullanmanıza izin veren, Preact'ten özel bir kancadır. Bir bileşen üzerinde kullanıldığında, alt ağacındaki hatalar hata sınırına kadar yayılır ve bu sınır tarafından yakalanır. Sağlanırsa, geri çağrı hatayla çağrılacaktır.

Orijinal kanca bir çift [error, resetError] döndürür, bu da bu kancanın da bunun yerine bir nesne döndürmek üzere değiştirildiği anlamına gelir. Şimdi { error, reset } şeklinde bir nesne döndürür.

function MyErrorBoundary(props) {
    var boundary = useErrorBoundary(function(error) {
        console.error('Ah hayır, bir hata oluştu!');
        console.error('Bir yere kaydedin');
        console.error(error);

        const reset = confirm('Uygulamada bir hata atıldı. Kararsız arayüzle devam etmek istiyor musunuz?');

        if (reset) {
            boundary.reset();
        }
    });

    if (boundary.error) {
        return tags.div({
            child: 'Bir hata oluştu. ' + boundary.error.message
        });
    }

    return props.children;
}

Örnekler[]

Örnek bileşen betiği[]

Bu, Preact kullanan bir betiğin yapabilecekleri hakkında size kabaca bir fikir verecek kısa bir programdır. Bir IIFE tarafından sarılacak, kısaltmalar olarak birkaç yer tutucu değişkene sahip olacak (preact, h, tags ve useState). Ayrıca bir App bileşeniyle preact.render ögeyi çağıracak ve dev.preact MW kancasını dinleyecektir. Son olarak, kitaplığın kendisini içe aktarır.

(function() {
    // Kısa yollarımızı `dev.preact` nesnesine bildirin
    var preact;
    var h;
    var tags;
    var useState;

    // Sayaç bileşenimiz!
    // Sayacın başlayacağı yer olan bir `start` özelliği alır,
    // ve kullanıcı "Sıfırla" düğmesini tıkladığında nerede sıfırlanacağı
    function Counter(props) {
        var count = useState(props.start);

        return tags.div({
            children: [
                'Sayaç şurada: ' + count.value,
                tags.button({
                    child: 'Beni arttır',
                    onClick: function() {
                        count.set(count.value + 1);
                    }
                }),
                tags.button({
                    child: 'Beni azalt',
                    onClick: function() {
                        count.set(count.value - 1);
                    }
                }),
                tags.button({
                    child: 'Beni sıfırla',
                    onClick: function() {
                        count.set(props.start);
                    }
                })
            ]
        });
    }

    // Bu, kök App bileşenidir, burada pek bir şey olmuyor
    // Ancak buradan bir Sayaç veya birden çok Sayaç ekleyebilirsiniz.
    // Bağımsız yönetilen durumlara sahip olacaklar
    function App() {
        return tags.div({
            children: [
                'Bu, uygulama bileşenidir',
                h(Counter, {
                    start: 5
                }),
                h(Counter, {
                    start: 10
                })
            ]
        });
    }

    function init() {
        var container = document.getElementById('content');

        container.innerHTML = '';

        preact.render(
            h(App),
            container
        );
    }

    mw.hook('dev.preact').add(function(_preact) {
        // Kısa yollarımıza atayın
        preact = _preact;
        h = preact.h;
        tags = preact.tags;
        useState = preact.useState;

        init();
    });

    importArticles({
        type: 'script',
        articles: [
            'u:dev:MediaWiki:Preact.js'
        ]
    });
})();
Advertisement