مزایا و معایب استفاده از Styled Components در React

اجزای سبک می توانند ماژولار بودن برنامه های شما و بلوک های سازنده آنها را افزایش دهند، اما آیا مزایای آن بیشتر از معایب است؟

کتابخانه‌های CSS-in-JS، مانند styled-components، در سال‌های اخیر محبوب‌تر شده‌اند. آنها CSS را تا سطح جزء محصور می کنند و به شما امکان می دهند از جاوا اسکریپت برای تعریف سبک های قابل استفاده مجدد استفاده کنید.

با استفاده از styled-components، می‌توانید معماری مؤلفه محوری را که React قبلاً تقویت کرده است، حفظ کنید. اما کتابخانه معایبی نیز دارد.

چگونه اجزای سبک کار می کنند

کتابخانه CSS-in-JS styled-components به شما امکان می دهد CSS را در داخل فایل های جزء خود بنویسید. سینتکس آن مانند CSS است، بنابراین برداشتن آن بسیار آسان است. این یک حد وسط عالی برای توسعه دهندگان جاوا اسکریپت است که تمایل دارند از CSS خالص دوری کنند.

برای اینکه ببینید چگونه کار می‌کند، جزء عنوان زیر را در نظر بگیرید که یک عنصر h1 را ارائه می‌کند.

const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: red;
`;


شما می توانید از این کامپوننت مانند سایر کامپوننت های React استفاده کنید.

const Home = () => {
return (
<Title>A styled component heading</Title>
)
}


همچنین بسیار قدرتمند است زیرا کار با لوازم و حالت را آسان تر می کند.

به عنوان مثال، رنگ و پس‌زمینه این مؤلفه به لوازم جانبی آن بستگی دارد.

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>
}


با استفاده از کامپوننت‌های سبک، نیازی به انتقال دستی قطعات به CSS ندارید. این به طور خودکار در دسترس است، سبک های نوشتاری را که به داده های مؤلفه بستگی دارد، ساده می کند.

مزایای استفاده از کامپوننت های سبک

در اینجا برخی از مزایای استفاده از کتابخانه styled-components آورده شده است.

مشکلات مربوط به ویژگی CSS را حل می کند

کامپوننت‌های استایل‌شده مشکلات اختصاصی بودن را از بین می‌برند زیرا CSS را در داخل یک جزء محصور می‌کند. این بدان معناست که لازم نیست نگران با هم تداخل نام کلاس ها باشید یا اینکه رابط کاربری شما به دلیل تداخل نام کلاس ها به آشفتگی تبدیل شود.

به شما امکان می دهد CSS درون کامپوننت ها بنویسید

همانطور که از مثال جزء دکمه مشاهده می شود، styled-components به شما امکان می دهد CSS و JS را در یک فایل ترکیب کنید. بنابراین، نیازی به ایجاد یک فایل CSS جداگانه یا تغییر از فایلی به فایل دیگر ندارید.

این یک مزیت بزرگ در هنگام ایجاد کیت های UI است زیرا تمام عملکرد اجزا را در یک فایل ذخیره می کنید.

به غیر از آن، نوشتن CSS در داخل کامپوننت ها. به اشتراک گذاری موارد و حالت ها با سبک ها را آسان تر می کند.

به بررسی نوع اجازه می دهد

با کامپوننت‌های استایل‌دار، می‌توانید موارد و مقادیر مورد استفاده در استایل‌های خود را تایپ کنید. به عنوان مثال، می توانید مولفه دکمه بالا را با استفاده از TypeScript بازنویسی کنید.

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")};
`;


استفاده از TypeScript در کامپوننت به معنای بررسی خطاهای نوع در هنگام کدنویسی و کاهش زمان اشکال زدایی است.

از Theming Out of the Box پشتیبانی می کند

افزودن یک تم تیره یا هر موضوع دیگری به برنامه شما می تواند دشوار و وقت گیر باشد. با این حال، اجزای Styled فرآیند را ساده می‌کنند. می‌توانید با صادر کردن یک جزء بسته‌بندی ، تم‌ها را به برنامه خود اضافه کنید.

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 تم ها را به تمام مؤلفه های استایلی که می پیچد منتقل می کند. سپس این مؤلفه ها می توانند از مقادیر موضوع در سبک های خود استفاده کنند. در این مثال، دکمه از مقادیر تم برای رنگ های پس زمینه و فونت استفاده می کند.

معایب استفاده از کامپوننت های سبک

در حالی که استفاده از کتابخانه styled-components مزایای زیادی دارد، معایبی نیز دارد.

این مستقل از چارچوب نیست

نوشتن CSS در JS به این معنی است که جدا کردن این دو در آینده دشوار خواهد بود، که برای قابلیت نگهداری وحشتناک است. به عنوان مثال، اگر تصمیم گرفتید چارچوب جاوا اسکریپت خود را تغییر دهید، باید بیشتر کدهای خود را بازنویسی کنید.

این کار وقت گیر و پرهزینه است. استفاده از ماژول‌های CSS یا یک کتابخانه مستقل از چارچوب مانند احساسات، آینده‌نگرتر است.

خواندن آن می تواند سخت باشد

تمایز بین مؤلفه های استایل شده و React می تواند دشوار باشد، به خصوص در خارج از یک سیستم طراحی اتمی. این مثال را در نظر بگیرید:

<Main>
<Nav>
<ListItem>
<LinkText>Adopt a Pet</LinkText>
</ListItem>
<ListItem>
<LinkText>Donate</LinkText>
</ListItem>
</Nav>
<Header>Adopt, don&apost shop!</Header>
<SecondaryBtn btnText="Donate" />
</Main>


تنها راه برای دانستن اینکه کدام مؤلفه حاوی منطق تجاری است، بررسی این است که آیا لوازم جانبی دارد یا خیر. علاوه بر این، حتی اگر نام مؤلفه ها در این مثال توصیفی هستند، هنوز تجسم آنها دشوار است.

به عنوان مثال، کامپوننت Header ممکن است یک عنوان باشد، اما تا زمانی که سبک ها را بررسی نکنید، ممکن است هرگز متوجه نشوید که آیا h1، h2 یا h3 است.

برخی از توسعه دهندگان این مشکل را تنها با استفاده از کامپوننت styled به عنوان یک پوشش و استفاده از تگ های HTML معنایی برای عناصر داخل آن حل می کنند.

در این مثال، کامپوننت هدر می تواند از تگ h1 استفاده کند.

<h1>Adopt, don&apost shop!</h1>


می‌توانید با تعریف مؤلفه‌های استایل‌گذاری‌شده در فایل دیگری (به‌عنوان مثال styled.js)، که بعداً می‌توانید آن را به یک مؤلفه React وارد کنید، این کار را بیشتر انجام دهید.

import * as Styled from &apos./styled&apos
// use styled.components
<styled.Main>
// code
</styled.Main>


انجام این کار به شما دید واضحی از این که کدام کامپوننت ها استایل داده شده اند و کدام کامپوننت های React هستند، می دهد.

کامپوننت های استایل در زمان اجرا کامپایل می شوند

برای برنامه هایی که از مؤلفه های سبک استفاده می کنند، مرورگر CSS را دانلود کرده و با استفاده از جاوا اسکریپت آن را قبل از تزریق به صفحه تجزیه می کند. این باعث مشکلات عملکرد می شود زیرا کاربر باید جاوا اسکریپت زیادی را در بارگذاری اولیه دانلود کند.

CSS استاتیک بسیار سریعتر است. قبل از اینکه مرورگر از آن برای استایل دادن به صفحات استفاده کند، نیازی به پردازش آن نیست. با این حال، کتابخانه مولفه‌های سبک‌دهی شده با هر نسخه بهبود می‌یابد. اگر می توانید مقداری عملکرد کاهش یافته را بپردازید، ادامه دهید و از آن استفاده کنید.

زمان استفاده از کامپوننت های سبک

برخی از توسعه دهندگان از نوشتن CSS در فایل های JS لذت می برند، در حالی که برخی دیگر ترجیح می دهند فایل های CSS جداگانه داشته باشند. نحوه انتخاب شما برای نوشتن CSS باید در نهایت به خود پروژه و آنچه شما یا تیمتان دوست دارید بستگی داشته باشد. کامپوننت های سبک انتخاب خوبی برای ساخت کتابخانه UI هستند زیرا همه چیز می تواند در یک فایل باشد و به راحتی صادر و استفاده مجدد شود.

اگر نوشتن CSS خالص را ترجیح می دهید، از ماژول های CSS استفاده کنید. شما می‌توانید فایل‌های CSS مجزا داشته باشید، و به‌طور پیش‌فرض به صورت محلی، استایل‌ها را بررسی می‌کند. صرف نظر از انتخاب شما، داشتن دانش قوی CSS ضروری است.

منبع مقاله