Ưu và nhược điểm của việc sử dụng các thành phần được tạo kiểu trong React

Các thư viện CSS-in-JS, giống như các thành phần được tạo kiểu, đã trở nên phổ biến hơn trong những năm gần đây. Chúng đóng gói CSS xuống cấp thành phần và cho phép bạn sử dụng JavaScript để xác định các kiểu có thể sử dụng lại.

Sử dụng các thành phần được tạo kiểu, bạn có thể duy trì kiến ​​trúc hướng thành phần mà React đã củng cố. Nhưng thư viện cũng có một số nhược điểm.

Cách các thành phần được tạo kiểu hoạt động

Thư viện CSS-in-JS được tạo kiểu-thành phần cho phép bạn viết CSS bên trong các tệp thành phần của mình. Cú pháp của nó giống như CSS, vì vậy nó khá dễ dàng để chọn. Đó là một nền tảng trung gian hoàn hảo cho các nhà phát triển JavaScript, những người có xu hướng tránh xa CSS thuần túy.

Để xem nó hoạt động như thế nào, hãy xem xét thành phần Tiêu đề sau đây hiển thị phần tử h1.

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

Bạn có thể sử dụng thành phần này giống như bất kỳ thành phần React nào khác.

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

Nó cũng rất mạnh mẽ vì nó giúp làm việc với các đạo cụ và trạng thái dễ dàng hơn.

Ví dụ, màu sắc và nền của thành phần này phụ thuộc vào các đạo cụ.

import styled from "styled-components";
const Button = styled.button`
padding: 0.8rem 1.6rem;
background-color: ${(props) => (props.primary ? "purple" : "white")};
border: 1px solid 
color: ${(props) => (props.primary ? "white" : "purple")};
`;
export default function Home() {
return <Button primary>Primary</Button>
}

Với các thành phần được tạo kiểu, bạn không cần phải chuyển các đạo cụ đến CSS theo cách thủ công. Nó tự động có sẵn, đơn giản hóa các kiểu viết phụ thuộc vào dữ liệu từ thành phần.

Ưu điểm của việc sử dụng các thành phần được tạo kiểu

Dưới đây là một số ưu điểm của việc sử dụng thư viện thành phần được tạo kiểu.

Nó giải quyết các vấn đề về tính cụ thể của CSS

Các thành phần được tạo kiểu loại bỏ các vấn đề về tính cụ thể vì nó đóng gói CSS bên trong một thành phần. Điều này có nghĩa là bạn không phải lo lắng về việc các tên lớp xung đột hoặc giao diện người dùng của bạn trở nên lộn xộn do xung đột tên lớp.

Cho phép bạn viết CSS bên trong các thành phần

Như đã thấy từ ví dụ về thành phần nút, các thành phần được tạo kiểu cho phép bạn kết hợp CSS và JS trong cùng một tệp. Vì vậy, bạn không cần phải tạo một tệp CSS riêng biệt hoặc tiếp tục chuyển đổi từ tệp này sang tệp khác.

Đây là một lợi thế rất lớn khi tạo bộ giao diện người dùng vì bạn lưu trữ tất cả các chức năng của các thành phần trong một tệp.

Ngoài ra, viết CSS bên trong các thành phần. Nó giúp bạn dễ dàng chia sẻ các đạo cụ và trạng thái với các phong cách.

Cho phép kiểm tra loại

Với các thành phần được tạo kiểu, bạn có thể nhập để kiểm tra các đạo cụ và giá trị được sử dụng trong các kiểu của mình. Ví dụ: bạn có thể viết lại thành phần nút ở trên bằng 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 
color: ${(props) => (props.primary ? "white" : "purple")};
`;

Sử dụng TypeScript trong thành phần có nghĩa là kiểm tra lỗi loại khi bạn viết mã và giảm thời gian gỡ lỗi.

Hỗ trợ chủ đề ra khỏi hộp

Thêm một chủ đề tối hoặc bất kỳ chủ đề nào khác vào ứng dụng của bạn có thể khó khăn và tốn thời gian. Tuy nhiên, các thành phần được tạo kiểu đơn giản hóa quy trình. Bạn có thể thêm chủ đề vào ứng dụng của mình bằng cách xuất thành phần trình bao bọc .

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>

Thành phần ThemeProvider chuyển các chủ đề đến tất cả các thành phần được tạo kiểu mà nó bao bọc. Sau đó, các thành phần này có thể sử dụng các giá trị chủ đề theo kiểu của chúng. Trong ví dụ này, nút sử dụng các giá trị chủ đề cho màu nền và phông chữ.

Nhược điểm của việc sử dụng các thành phần được tạo kiểu

Mặc dù sử dụng thư viện thành phần theo kiểu có nhiều lợi ích, nhưng nó cũng có nhược điểm.

Nó không độc lập với khung

Viết CSS bằng JS có nghĩa là sẽ khó tách cả hai trong tương lai, điều này thật tồi tệ đối với khả năng bảo trì. Ví dụ: nếu bạn quyết định chuyển đổi khung JavaScript của mình, bạn sẽ cần phải viết lại hầu hết cơ sở mã của mình.

Việc này tốn nhiều thời gian và chi phí. Sử dụng các mô-đun CSS hoặc một thư viện độc lập với khuôn khổ như cảm xúc sẽ phù hợp hơn với tương lai.

Có thể khó đọc

Việc phân biệt giữa các thành phần được tạo kiểu và React có thể khó khăn, đặc biệt là bên ngoài hệ thống thiết kế nguyên tử. Hãy xem xét ví dụ này:

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

Cách duy nhất để biết thành phần nào chứa logic nghiệp vụ là kiểm tra xem nó có đạo cụ hay không. Hơn nữa, mặc dù các tên thành phần trong ví dụ này là mô tả, nhưng vẫn rất khó để hình dung chúng.

Ví dụ: thành phần Header có thể là một tiêu đề, nhưng trừ khi bạn kiểm tra các kiểu, bạn có thể không bao giờ biết đó là h1, h2 hay h3.

Một số nhà phát triển giải quyết vấn đề này bằng cách chỉ sử dụng thành phần được tạo kiểu như một trình bao bọc và sử dụng các thẻ HTML ngữ nghĩa cho các phần tử bên trong nó.

Trong ví dụ này, thành phần tiêu đề có thể sử dụng thẻ h1.

<h1>Adopt, don't shop!</h1>

Bạn có thể thực hiện điều này xa hơn bằng cách xác định các thành phần được tạo kiểu trong một tệp khác (ví dụ: styled.js), sau này bạn có thể nhập vào một thành phần React.

import * as Styled from './styled'
<styled.Main>
</styled.Main>

Làm điều này giúp bạn có cái nhìn rõ ràng về thành phần nào được tạo kiểu và thành phần nào là thành phần React.

Các thành phần được tạo kiểu được biên dịch trong thời gian chạy

Đối với các ứng dụng sử dụng các thành phần được tạo kiểu, trình duyệt tải xuống CSS và phân tích cú pháp nó bằng JavaScript trước khi đưa chúng vào trang. Điều này gây ra các vấn đề về hiệu suất vì người dùng phải tải xuống rất nhiều JavaScript trong lần tải đầu tiên.

CSS tĩnh nhanh hơn nhiều. Nó không cần phải được xử lý trước khi trình duyệt sử dụng nó để tạo kiểu cho các trang. Tuy nhiên, thư viện thành phần được tạo kiểu đang cải thiện với mỗi bản phát hành. Nếu bạn có thể chịu được một số hiệu suất giảm, hãy tiếp tục và sử dụng nó.

Khi nào sử dụng các thành phần được tạo kiểu

Một số nhà phát triển thích viết CSS trong các tệp JS, trong khi những người khác thích có các tệp CSS riêng biệt. Cách bạn chọn viết CSS cuối cùng sẽ phụ thuộc vào bản thân dự án và những gì bạn hoặc nhóm của bạn thích. Các thành phần được tạo kiểu là một lựa chọn tốt để xây dựng thư viện giao diện người dùng vì mọi thứ có thể nằm trong một tệp và dễ dàng được xuất và sử dụng lại.

Nếu bạn thích viết CSS thuần túy, hãy sử dụng mô-đun CSS. Bạn có thể có các tệp CSS riêng biệt và nó phạm vi cục bộ các kiểu theo mặc định. Bất kể bạn đưa ra lựa chọn nào, việc có kiến ​​thức CSS vững chắc là điều cần thiết.