Tarzlandırılmış bileşenler, uygulamalarınızın modülerliğini ve yapı taşlarını artırabilir, ancak faydaları dezavantajlarından daha ağır basıyor mu?
Stilli bileşenler gibi JS içinde CSS kitaplıkları son yıllarda daha popüler hale geldi. CSS’yi bileşen düzeyine kadar kapsüllerler ve yeniden kullanılabilir stiller tanımlamak için JavaScript kullanmanıza izin verirler.
Tarz bileşenlerini kullanarak, React’in zaten güçlendirdiği bileşen odaklı mimariyi koruyabilirsiniz. Ama kütüphanenin de bazı dezavantajları var.
Tarz Bileşenleri Nasıl Çalışır?
Styled-components CSS- in -JS kitaplığı, bileşen dosyalarınızın içine CSS yazmanıza olanak tanır. Sözdizimi CSS ile aynıdır, bu nedenle alınması oldukça kolaydır. Saf CSS’den uzak durma eğiliminde olan JavaScript geliştiricileri için mükemmel bir orta yol.
Nasıl çalıştığını görmek için, bir h1 öğesi oluşturan aşağıdaki Başlık bileşenini göz önünde bulundurun.
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: red;
`;
Bu bileşeni diğer React bileşenleri gibi kullanabilirsiniz.
const Home = () => {
return (
<Title>A styled component heading</Title>
)
}
Ayrıca çok güçlü çünkü sahne ve durumla çalışmayı kolaylaştırıyor.
Örneğin, bu bileşenin rengi ve arka planı, aksesuarlara bağlıdır.
import styled from “styled-components”;
const Button = styled.button`
padding: 0.8rem 1.6rem;
background-color: ${(props) => (props.primary ? “purple” : “white”)};
border: 1px solid #00000;
color: ${(props) => (props.primary ? “white” : “purple”)};
`;
export default function Home() {
return <Button primary>Primary</Button>
}
Tarzlı bileşenlerle, sahne malzemelerini CSS’ye manuel olarak iletmenize gerek yoktur. Bileşenden gelen verilere bağlı olan yazma stillerini basitleştirerek otomatik olarak kullanılabilir.
Tarz Bileşenleri Kullanmanın Artıları
Stil bileşenleri kitaplığını kullanmanın bazı avantajları şunlardır.
CSS Özgüllük Sorunlarını Çözer
Stile sahip bileşenler, CSS’yi bir bileşenin içine yerleştirdiği için özgünlük sorunlarını ortadan kaldırır. Bu, sınıf adlarının çakışması veya sınıf adı çakışmaları nedeniyle kullanıcı arayüzünüzün bir karmaşaya dönüşmesi konusunda endişelenmenize gerek olmadığı anlamına gelir.
Bileşenlerin İçine CSS Yazmanızı Sağlar
Düğme bileşeni örneğinde görüldüğü gibi, stil bileşenleri, CSS ve JS’yi aynı dosyada birleştirmenize olanak tanır. Böylece ayrı bir CSS dosyası oluşturmanız veya dosyadan dosyaya geçiş yapmanız gerekmez.
Bu, UI kitleri oluştururken büyük bir avantajdır çünkü bileşenlerin tüm işlevlerini tek bir dosyada saklarsınız.
Bunun dışında bileşenlerin içine CSS yazmak. Stillerle sahne ve durumları paylaşmayı kolaylaştırır.
Tip Kontrolüne izin verir
Tarz bileşenleriyle, stillerinizde kullanılan props ve değerleri kontrol edebilirsiniz. Örneğin, TypeScript kullanarak yukarıdaki düğme bileşenini yeniden yazabilirsiniz.
interface props {
primary: boolean
}
const Button = styled.button<props>`
padding: 0.8rem 1.6rem;
background-color: ${(props) => (props.primary ? “purple” : “white”)};
border: 1px solid #00000;
color: ${(props) => (props.primary ? “white” : “purple”)};
`;
Bileşende TypeScript kullanmak, kod yazarken tür hatalarını kontrol etmek ve hata ayıklama süresini kısaltmak anlamına gelir.
Kutudan Çıkan Temalandırmayı Destekler
Uygulamanıza karanlık bir tema veya başka bir tema eklemek zor ve zaman alıcı olabilir. Bununla birlikte, Styled bileşenleri süreci basitleştirir. Bir <ThemeProvider> sarmalayıcı bileşenini dışa aktararak uygulamanıza temalar ekleyebilirsiniz.
const Button = styled.main`
background-color: ${props => props.theme.light.background};
color: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Button>
Light button
</Button>
</ThemeProvider>
ThemeProvider bileşeni, temaları, sardığı tüm stillendirilmiş bileşenlere iletir. Bu bileşenler daha sonra tema değerlerini stillerinde kullanabilir. Bu örnekte, düğme, arka plan ve yazı tipi renkleri için tema değerlerini kullanır.
Tarz Bileşenleri Kullanmanın Eksileri
Styled-components kütüphanesini kullanmanın birçok faydası olmakla birlikte dezavantajları da vardır.
Çerçeveden Bağımsız Değildir
JS’de CSS yazmak, gelecekte ikisini ayırmanın zor olacağı anlamına gelir, bu da sürdürülebilirlik için korkunçtur. Örneğin, JavaScript çerçevenizi değiştirmeye karar verirseniz , kod tabanınızın çoğunu yeniden yazmanız gerekir.
Bu zaman alıcı ve maliyetlidir. CSS modülleri veya duygu gibi çerçeveden bağımsız bir kitaplık kullanmak geleceğe daha dayanıklıdır.
Okumak Zor Olabilir
Özellikle atomik tasarım sisteminin dışında, tarz ve React bileşenleri arasında ayrım yapmak zor olabilir. Bu örneği düşünün:
<Main>
<Nav>
<ListItem>
<LinkText>Adopt a Pet</LinkText>
</ListItem>
<ListItem>
<LinkText>Donate</LinkText>
</ListItem>
</Nav>
<Header>Adopt, don’t shop!</Header>
<SecondaryBtn btnText=”Donate” />
</Main>
Hangi bileşenin iş mantığı içerdiğini bilmenin tek yolu, donanım olup olmadığını kontrol etmektir. Ayrıca, bu örnekteki bileşen adları açıklayıcı olsa da, onları görselleştirmek yine de zordur.
Örneğin, Başlık bileşeni bir başlık olabilir, ancak stilleri kontrol etmediğiniz sürece bunun h1, h2 veya h3 olup olmadığını asla bilemezsiniz.
Bazı geliştiriciler, bu sorunu yalnızca stillendirilmiş bileşeni sarmalayıcı olarak kullanarak ve içindeki öğeler için anlamsal HTML etiketlerini kullanarak çözer.
Bu örnekte, başlık bileşeni bir h1 etiketi kullanabilir.
<h1>Adopt, don’t shop!</h1>
Bunu, daha sonra bir React bileşenine içe aktarabileceğiniz başka bir dosyada (örn. styled.js) stili oluşturulmuş bileşenleri tanımlayarak daha da ileri götürebilirsiniz.
import * as Styled from ‘./styled’
// use styled.components
<styled.Main>
// code
</styled.Main>
Bunu yapmak, hangi bileşenlerin stillendirildiğini ve hangilerinin React bileşenleri olduğunu net bir şekilde görmenizi sağlar.
Tarz Bileşenleri Çalışma Zamanında Derlenir
Tarzlanmış bileşenleri kullanan uygulamalar için, tarayıcı CSS’yi indirir ve sayfaya enjekte etmeden önce JavaScript kullanarak onu ayrıştırır. Bu, kullanıcının ilk yüklemede çok sayıda JavaScript indirmesi gerektiğinden performans sorunlarına neden olur.
Statik CSS çok daha hızlıdır. Tarayıcı, sayfaları biçimlendirmek için kullanmadan önce işlenmesi gerekmez. Ancak, stil bileşenleri kitaplığı her sürümde gelişiyor. Düşük performansı karşılayabiliyorsanız, devam edin ve kullanın.
Tarz Bileşenleri Ne Zaman Kullanılır?
Bazı geliştiriciler, JS dosyalarında CSS yazmaktan hoşlanırken, diğerleri ayrı CSS dosyalarına sahip olmayı tercih eder. CSS yazmayı nasıl seçeceğiniz nihayetinde projenin kendisine ve sizin veya ekibinizin neyi sevdiğine bağlı olmalıdır. Her şey tek bir dosyada bulunabildiğinden ve kolayca dışa aktarılıp yeniden kullanılabildiğinden, stilli bileşenler bir UI kitaplığı oluşturmak için iyi bir seçimdir.
Saf CSS yazmayı tercih ediyorsanız, CSS modüllerini kullanın. Ayrı CSS dosyalarınız olabilir ve bu, varsayılan olarak stilleri yerel olarak kapsar. Hangi seçimi yaparsanız yapın, sağlam CSS bilgisine sahip olmak çok önemlidir.