React Context yerine CSS Değişkenlerini kullanın

0
22

Yıllardır CSS-in-JS trenini kullanıyorum (hatta “hareket” e önemli bir katkıda bulundum). Bu harika. CSS ile çalışırken, ona gerçek bir programlama dili eklediğim zamandan daha üretken olmamıştım.

Hala CSS-in-JS hayranıyım ve son yıllarda, CSS özellikleri çok gelişti ve gelişti ve modern tarayıcılarda da var (ne yazık ki, Internet Explorer bu veya herhangi bir bağlamda modern bir tarayıcı DEĞİLDİR). Genellikle bir ThemeProvider kullanırdım (duygudaki gibi), ancak birçok kullanım durumu için bu tür bileşenin pek çok avantajı olmadığı ve birkaç dezavantajı olduğu ortaya çıktı.

Basit bir “Karanlık Mod” örneğine bakalım ve API (geliştirici deneyimi) ve performans (kullanıcı deneyimi) arasındaki farklılıkları karşılaştıralım. Örneği basit tutacağız ve hem önce hem de sonra, duyguların stilize edilmiş yardımcı programını kullanacağız. ThemeProvider ile, useTheme kancasını kullanarak, biçimli bir bileşenle veya css prop ile değerleri tüketebileceğinizi unutmayın. CSS Değişkenleri ile, CSS’nizdeki değerleri var (- css-değişken-adı) ile ve JavaScript’inizde getComputedStyle (element) .getPropertyValue (‘- css-variable-name’) kullanarak elde edebilirsiniz. Yapmaya gerek yok …)

Tamam, bazı koda bakalım. Duygu ThemeProvider’ı kullanmak için bir yaklaşım:

* ‘react’ten React olarak içe aktar

“@ duygu / stil” öğesinden içe aktar

{ThemeProvider} öğesini “duygu temalı” dan içe aktar

const temaları = {

ışık: {

renkler: {

birincil: ‘deeppink’,

arkaplan: ‘beyaz’,

},

},

koyu: {

renkler: {

birincil: ‘lightpink’,

arka plan: ‘siyah’,

},

},

}

const PrimaryText = styled.div (({theme}) => ({

dolgu: 20,

renk: theme.colors.primary,

backgroundColor: theme.colors.background,

}))

function ThemeToggler ({theme, onClick}) {

const nextTheme = tema === ‘ışık’? ‘Karanlık ışık’

dönüş (

)

}

function Uygulaması () {

sabit [theme, setTheme] = React.useState (‘hafif’)

dönüş (

Bu metin ana renktir

theme = {theme}

onClick = {(nextTheme) => setTheme (nextTheme)}

/>

)

}

varsayılan Uygulamayı dışa aktar

Bununla ilgili harika olan şey, “sadece JavaScript” olmasıdır, bu nedenle değişkenlerin tüm avantajlarından yararlanabilirsiniz. Ancak bununla, ThemeProvider aracılığıyla iletmek dışında pek bir şey yapmıyoruz. (Açık olmak gerekirse, ThemeProvider’ın çalışma şekli, temayı tüm duygu bileşenlerine her yerde sahne donanımlarından geçmek zorunda kalmadan erişilebilir kılmak için React’in Context API’sini kullanmasıdır).

Bunu CSS Değişkenleri yaklaşımıyla karşılaştıralım. Ancak buna gelmeden önce, bunun için “ThemeProvider” olmadığını belirtmem gerekiyor. Bunun yerine, vücuda uyguladığımız bir veri özniteliğine göre uygulanacak değişkenleri normal CSS’de tanımlarız. İşte o css dosyası:

vücut[data-theme=’light’] {

–colors-birincil: deeppink;

–renkler-arka plan: beyaz;

}

vücut[data-theme=’dark’] {

–colors-birincil: açık pembe;

–renkler-arka plan: siyah;

}

Pekala, işte bununla birlikte, işte aynı kullanıcı arayüzünün uygulaması:

* ‘react’ten React olarak içe aktar

içe aktar ‘./css-vars.css’

“@ duygu / stil” öğesinden içe aktar

const PrimaryText = styled.div ({

dolgu: 20,

renk: ‘var (- renkler-birincil)’,

backgroundColor: ‘var (- renkler-arka plan)’,

})

function ThemeToggler () {

sabit [theme, setTheme] = React.useState (‘hafif’)

const nextTheme = tema === ‘ışık’? ‘Karanlık ışık’

React.useEffect (() => {

document.body.dataset.theme = tema

}, [theme])

dönüş (

)

}

function Uygulaması () {

dönüş (

Bu metin ana renktir

)

}

varsayılan Uygulamayı dışa aktar

İlk önce bu değerleri kullanmanın nasıl bir şey olduğunu karşılaştıralım:

const PrimaryText = styled.div (({theme}) => ({

dolgu: 20,

renk: theme.colors.primary,

backgroundColor: theme.colors.background,

}))

const PrimaryText = styled.div ({

dolgu: 20,

renk: ‘var (- renkler-birincil)’,

backgroundColor: ‘var (- renkler-arka plan)’,

})

Burada DX (geliştirme deneyimi) açısından pek bir fark yok. CSS Değişkenleri yaklaşımının bir noktası, temayı ve geri dönen stilleri kabul eden bir işlev oluşturmak zorunda olmamaktır (ve bu API hakkında bilgi edinmeye bile gerek yoktur).

ThemeProvider yaklaşımının bir noktası, TypeScript kullanıyorsanız temanızda tür güvenliği elde edebilirsiniz … Ama ummm … Şuna bir bakın:

const theme = {

renkler: {

birincil: ‘var (- renkler-birincil)’,

background: ‘var (- renkler-arka plan)’,

},

}

dışa aktar {theme}

{theme} öğesini ‘tema’dan içe aktar

const PrimaryText = styled.div ({

dolgu: 20,

renk: theme.colors.primary,

backgroundColor: theme.colors.background,

})

BOOM. Statik yazım dostu.

Her iki durumda da, bu gerçekten tek önemli DX farkı. UX (kullanıcı deneyimi) farkını ele alalım. Neden onunla oynamıyorsun:

Gerçekten gözlemlenebilir bir UX farkı olmadığını ve bu basit örnek için olmadığını fark edeceksiniz. Ama neden bunu benimle denemiyorsun:

pop React DevTools Profiler’ı açın Bir profil oluşturma oturumu başlatın (küçük daireye tıklayın) Her biri için geçiş düğmesine tıklayın Profil oluşturma oturumunu durdurun İki işlemi karşılaştır

İşte gördüklerim:

ThemeProvider:

CSS Değişkenleri:

Yalnızca bir bileşenin işlendiğini gösteren profil oluşturma oturumu

Tekrar göndereceğiniz milisaniye sayısına takılıp kalmanızı istemiyorum. Bu kontrollü bir kıyaslama değil (bir şey için React’in geliştirme modundayız). Göz önünde bulundurmanızı istediğim şey, bu değişiklik için yeniden oluşturmak için kaç bileşen gerektiğidir. Önce ThemeProvider yaklaşımını ele alalım. Bunun ana nedeni, durumumuzu yapılandırma şeklimizdir (bazı şeyleri yeniden yapılandırabilir ve biraz iyileştirebilirdik). Ancak, şeyleri yeniden yapılandırsak bile, tema değiştiğinde, tema değişikliğini hesaba katmak için her duygu bileşeninin yeniden oluşturulması gerekir.

CSS Değişkenleri yaklaşımına dönersek, yeniden oluşturulan tek bileşenin gövdeyi güncellemekten sorumlu ThemeToggler bileşeni olduğunu fark edeceksiniz. Yine de kullanıcı deneyimi mükemmel çalışıyor! CSS değişkenlerinin arkasındaki sihir budur. ThemeProvider yaklaşımıyla, her bileşenin stilini güncellemeliyiz ve ardından tarayıcı bu güncellemeleri boyar. Ancak CSS Değişkenleri yaklaşımıyla stilleri tek bir bileşene (gövde) güncelleriz ve ardından tarayıcı bu güncellemeleri boyar. Tarayıcı boyası teorik olarak tarayıcının kısmında aynı miktarda çalışmayı almalıdır, bu nedenle tek fark, React’in tüm bileşenlerimizi yeniden oluşturması ve stillerini güncellemek için duygu alması için tarayıcıya ne kadar çalışma yaptığımızdır. her bileşen.

Uygulamanız büyüdükçe bunun performans üzerinde olumsuz etkileri olabilir. DX’in her iki şekilde de nesnel olarak daha iyi ya da daha kötü olmadığını düşünürsek, ancak UX’in CSS Değişkenleri ile oldukça daha iyi olduğunu düşünürsek, bunun gibi bir temayı paylaşmak için Bağlam’ı kullanmak yerine CSS Değişkenlerini tavsiye etmekte rahat hissediyorum.

Ayrıca, CSS Değişkenlerinin tarayıcı özelliklerinin bir parçası olduğunu ve ThemeProvider’ın olmadığını da düşünün. CSS Değişkenleri için başka bir sağlam nokta bu 😉

Bu, benimsemenizi önereceğim bir standarttır.

Burada son bir nüans parçası. Ya sadece stilleri değiştirmekle kalmayıp, aynı zamanda temaya göre bileşen uygulamalarını da değiştirmek istiyorsanız? Bu durumda … HER İKİSİNİ YAPABİLİRSİNİZ! Bunu yapmanın yararı, bağlam değerini tüketmesi gereken tek bileşenlerin, temaya göre farklı şekilde oluşturulması gereken bileşenlerdir (ki bu muhtemelen küçük bir alt kümedir). Çoğu bileşen, css değişkenlerini yalnızca şekillendirme amacıyla kullanabilir, böylece yukarıda belirtilen faydaları elde etmeye devam edersiniz. Temaya göre farklı şekilde işlemek için bileşenlere ihtiyacınız yoksa, o zaman bununla uğraşmam, ancak yaparsanız, yapmak oldukça basittir. Bunu başarmanın birkaç yolu var, kodlar ve kutuda bir uygulama yaptım. Bunu keşfetmenin tadını çıkarın.

CSS değişkenleri (özel özellikler) harika. Onlara bir göz atın. İyi şanslar!

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz