Tidak Semuanya Memerlukan Komponen
Pada awal 2000-an, istilah baharu, Divitis, telah dicipta untuk merujuk kepada Amalan mengarang kod halaman web dengan banyak elemen div dalam tempat unsur HTML semantik yang bermakna
. Ini adalah sebahagian daripada usaha untuk meningkatkan kesedaran tentang semantik dalam HTML dalam kerangka teknik Peningkatan Progresif.
Fast forward 20 tahun - Saya menyaksikan sindrom baharu yang menjejaskan pembangun web, yang saya panggil componentitis. Berikut ialah definisi rekaan saya:
Komponentitis: amalan mencipta komponen untuk setiap aspek UI sebagai ganti penyelesaian yang lebih ringkas dan boleh digunakan semula.
Komponen
Jadi, pertama sekali, apakah itu komponen? Saya rasa React mempopularkan istilah itu untuk merujuk kepada blok binaannya:
React membolehkan anda menggabungkan markup, CSS dan JavaScript anda ke dalam "komponen" tersuai, elemen UI boleh guna semula untuk apl anda.
— Dokumentasi React - Komponen Pertama Anda
Walaupun konsep elemen UI boleh guna semula bukanlah sesuatu yang baharu pada masa itu (dalam CSS, kami sudah mempunyai teknik seperti OOCSS, SMACSS dan BEM), perbezaan utamanya ialah pendekatan asalnya terhadap lokasi penanda, gaya dan interaksi. Dengan komponen React (dan semua pustaka UI berikutnya), adalah mungkin untuk mencari bersama semua dalam satu fail dalam sempadan komponen.
Jadi, menggunakan pustaka CSS terbaru Facebook Stylex, anda boleh menulis:
import * as stylex from "@stylexjs/stylex";
import { useState } from "react";
// styles
const styles = stylex.create({
base: {
fontSize: 16,
lineHeight: 1.5,
color: "#000",
},
});
export function Toggle() {
// interactions
const [toggle, setToggle] = useState(false);
const onClick = () => setToggle((t) => !t);
// markup
return (
<button {...stylex.props(styles.base)} type="button" onClick={onClick}>
{toggle}
</button>
);
}
Anda boleh menjadi peminat atau tidak menulis CSS dalam tatatanda objek (saya tidak), tetapi tahap lokasi bersama ini selalunya merupakan cara yang baik untuk menjadikan projek berasaskan komponen lebih boleh diselenggara: semuanya boleh dicapai dan terikat secara jelas.
Di perpustakaan seperti Svelte, lokasi bersama lebih jelas (dan kodnya lebih ringkas):
<script>
let toggle = $state(false)
const onclick = () => toggle = !toggle
</script>
<button type='button' {onclick}>
{toggle}
</button>
<style>
button {
font-size: 16px;
line-height: 1.5;
color: #000;
}
</style>
Dari masa ke masa, corak ini telah mendapat begitu banyak daya tarikan sehinggakan semuanya terkandung dalam komponen. Anda mungkin pernah mengalami komponen halaman seperti ini:
export function Page() {
return (
<Layout>
<Header nav={<Nav />} />
<Body>
<Stack spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</Body>
<Footer />
</Layout>
);
}
Lokasi bersama satu
Kod di atas kelihatan bersih dan konsisten: kami menggunakan antara muka komponen untuk menerangkan halaman.
Tetapi kemudian, mari kita lihat kemungkinan pelaksanaan Stack. Komponen ini biasanya merupakan pembalut untuk memastikan semua elemen anak langsung disusun secara menegak dan jarak yang sama:
import * as stylex from "@stylexjs/stylex";
import type { PropsWithChildren } from "react";
const styles = stylex.create({
root: {
display: "flex",
flexDirection: "column",
},
spacing: (value) => ({
rowGap: value * 16,
}),
});
export function Stack({
spacing = 0,
children,
}: PropsWithChildren<{ spacing?: number }>) {
return (
<div {...stylex.props(styles.root, styles.spacing(spacing))}>
{children}
</div>
);
}
Kami hanya menentukan gaya dan elemen akar komponen.
Dalam kes ini, kami juga boleh mengatakan bahawa satu-satunya perkara yang kami cari bersama ialah blok gaya memandangkan HTML hanya digunakan untuk memegang rujukan kelas CSS dan tiada interaktiviti atau perniagaan logik.
Kos fleksibiliti (boleh dielakkan).
Sekarang, bagaimana jika kita mahu dapat menjadikan elemen akar sebagai bahagian dan mungkin menambah beberapa atribut? Kita perlu memasuki alam komponen polimorfik. Dalam React dan dengan TypeScript ini mungkin akan menjadi seperti berikut:
import * as stylex from "@stylexjs/stylex";
import { useState } from "react";
// styles
const styles = stylex.create({
base: {
fontSize: 16,
lineHeight: 1.5,
color: "#000",
},
});
export function Toggle() {
// interactions
const [toggle, setToggle] = useState(false);
const onClick = () => setToggle((t) => !t);
// markup
return (
<button {...stylex.props(styles.base)} type="button" onClick={onClick}>
{toggle}
</button>
);
}
Pada pendapat saya, ini tidak begitu boleh dibaca pada pandangan pertama. Dan ingat: kami hanya memaparkan elemen dengan 3 pengisytiharan CSS.
Kembali kepada asas
Suatu ketika dahulu, saya sedang mengusahakan projek haiwan peliharaan di Angular. Kerana digunakan untuk berfikir dalam komponen, saya menghubungi mereka untuk membuat Tindanan. Ternyata dalam komponen polimorfik sudut adalah lebih kompleks untuk dibuat.
Saya mula mempersoalkan reka bentuk pelaksanaan saya dan kemudian saya mendapat pencerahan: mengapa menghabiskan masa dan baris kod pada pelaksanaan yang kompleks sedangkan penyelesaiannya telah ada di hadapan saya selama ini?
<script>
let toggle = $state(false)
const onclick = () => toggle = !toggle
</script>
<button type='button' {onclick}>
{toggle}
</button>
<style>
button {
font-size: 16px;
line-height: 1.5;
color: #000;
}
</style>
Sungguh, itu adalah asli pelaksanaan Stack . Sebaik sahaja anda memuatkan CSS dalam reka letak, ia boleh digunakan serta-merta dalam kod anda:
export function Page() {
return (
<Layout>
<Header nav={<Nav />} />
<Body>
<Stack spacing={2}>
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>
</Body>
<Footer />
</Layout>
);
}
Tambahkan jenis-keselamatan dalam rangka kerja JavaScript
Penyelesaian CSS sahaja tidak menyediakan penaipan mahupun pelengkapan automatik IDE.
Selain itu, jika kami tidak menggunakan variasi jarak, mungkin terasa terlalu bertele-tele untuk menulis kedua-dua kelas dan atribut gaya dan bukannya prop jarak. Dengan mengandaikan anda menggunakan React, anda boleh memanfaatkan JSX dan mencipta fungsi utiliti:
import * as stylex from "@stylexjs/stylex";
import type { PropsWithChildren } from "react";
const styles = stylex.create({
root: {
display: "flex",
flexDirection: "column",
},
spacing: (value) => ({
rowGap: value * 16,
}),
});
export function Stack({
spacing = 0,
children,
}: PropsWithChildren<{ spacing?: number }>) {
return (
<div {...stylex.props(styles.root, styles.spacing(spacing))}>
{children}
</div>
);
}
Perhatikan bahawa React TypeScript tidak membenarkan sifat CSS yang tidak diketahui. Saya menggunakan penegasan jenis untuk ringkas, tetapi anda harus memilih penyelesaian yang lebih mantap.
Jika anda menggunakan varian, anda boleh mengubah suai fungsi utiliti untuk memberikan pengalaman pembangun yang serupa dengan corak PandaCSS:
import * as stylex from "@stylexjs/stylex";
type PolymorphicComponentProps<T extends React.ElementType> = {
as?: T;
children?: React.ReactNode;
spacing?: number;
} & React.ComponentPropsWithoutRef<T>;
const styles = stylex.create({
root: {
display: "flex",
flexDirection: "column",
},
spacing: (value) => ({
rowGap: value * 16,
}),
});
export function Stack<T extends React.ElementType = "div">({
as,
spacing = 1,
children,
...props
}: PolymorphicComponentProps<T>) {
const Component = as || "div";
return (
<Component
{...props}
{...stylex.props(styles.root, styles.spacing(spacing))}
>
{children}
</Component>
);
}
Elakkan pertindihan kod dan nilai berkod keras
Sesetengah daripada anda mungkin menyedari bahawa, dalam contoh terakhir, saya mengekodkan nilai jangkaan jarak dalam kedua-dua CSS dan fail utiliti. Jika nilai dialih keluar atau ditambah, ini mungkin menjadi isu kerana kita mesti memastikan kedua-dua fail itu segerak.
Jika anda membina pustaka, ujian regresi visual automatik mungkin akan menangkap isu seperti ini. Bagaimanapun, jika ia masih mengganggu anda, penyelesaian mungkin adalah untuk mencapai Modul CSS dan sama ada menggunakan typed-css-modules atau membuang ralat masa jalan untuk nilai yang tidak disokong:
<div>
<pre class="brush:php;toolbar:false">.stack {
--s: 0;
display: flex;
flex-direction: column;
row-gap: calc(var(--s) * 16px);
}
export function Page() {
return (
<Layout>
<Header nav={<Nav />} />
<Body>
<div className="stack">
<p>Let's see the main advantages of this approach:</p>
<ul>
<li>reusability</li>
<li>reduced complexity</li>
<li>smaller JavaScript bundle and less overhead</li>
<li><strong>interoperability</strong></li>
</ul>
<p>The last point is easy to overlook: Not every project uses React, and if you’re including the stack layout pattern in a Design System or a redistributable UI library, developers could use it in projects using different UI frameworks or a server-side language like PHP or Ruby.</p>
<h2>
Nice features and improvements
</h2>
<p>From this base, you can iterate to add more features and improve the developer experience. While some of the following examples target React specifically, they can be easily adapted to other frameworks.</p>
<h3>
Control spacing
</h3>
<p>If you're developing a component library you definitely want to define a set of pre-defined spacing variants to make space more consistent. This approach also eliminates the need to explicitly write the style attribute:<br>
</p>
<pre class="brush:php;toolbar:false">.stack {
--s: 0;
display: flex;
flex-direction: column;
row-gap: calc(var(--s) * 16px);
&.s\:1 { --s: 1 }
&.s\:2 { --s: 2 }
&.s\:4 { --s: 4 }
&.s\:6 { --s: 6 }
}
/** Usage:
<div>
<p>For a bolder approach to spacing, see Complementary Space by Donnie D'Amato.</p>
<h3>
Add better scoping
</h3>
<p>Scoping, in this case, refers to techniques to prevent conflicts with other styles using the same selector. I’d argue that scoping issues affects a pretty small number of projects, but if you are really concerned about it, you could:</p>
<ol>
<li>Use something as simple as CSS Modules, which is well supported in all major bundlers and frontend frameworks.</li>
<li>Use cascade layers resets to prevent external stylesheets from modifying your styles (this is an interesting technique).</li>
<li>Define a specific namespace like .my-app-... for your classes.</li>
</ol>
<p>Here is the result with CSS Modules:<br>
</p>
<pre class="brush:php;toolbar:false">.stack {
--s: 0;
display: flex;
flex-direction: column;
row-gap: calc(var(--s) * 16px);
&.s1 { --s: 1 }
&.s2 { --s: 2 }
&.s4 { --s: 4 }
&.s6 { --s: 6 }
}
/** Usage
import * from './styles/stack.module.css'
<div className={`${styles.stack} ${styles.s2}`}>
// ...
</div>
*/
Alternatif
Jika anda masih fikir komponen polimorfik adalah lebih baik, benar-benar tidak dapat menangani HTML biasa, atau tidak mahu menulis CSS dalam fail berasingan (walaupun saya tidak pasti mengapa), cadangan saya seterusnya ialah lihat PandaCSS dan buat corak tersuai atau teroka pilihan lain seperti ekstrak vanila. Pada pendapat saya, alatan ini ialah bahasa CSS yang terlalu direkayasa tetapi masih lebih baik daripada komponen polimorfik.
Alternatif lain yang patut dipertimbangkan ialah Tailwind CSS, yang mempunyai kelebihan untuk saling beroperasi antara bahasa dan rangka kerja.
Menggunakan skala jarak lalai yang ditakrifkan oleh Tailwind, kita boleh mencipta pemalam tindanan seperti ini:
import * as stylex from "@stylexjs/stylex";
import { useState } from "react";
// styles
const styles = stylex.create({
base: {
fontSize: 16,
lineHeight: 1.5,
color: "#000",
},
});
export function Toggle() {
// interactions
const [toggle, setToggle] = useState(false);
const onClick = () => setToggle((t) => !t);
// markup
return (
<button {...stylex.props(styles.base)} type="button" onClick={onClick}>
{toggle}
</button>
);
}
Sebagai nota sampingan: adalah menarik bahawa Tailwind menggunakan model mental komponen dalam matchComponents untuk menerangkan set peraturan CSS yang kompleks, walaupun ia tidak mencipta sebarang komponen sebenar. Mungkin satu lagi contoh betapa meluasnya konsep itu?
Bawa pulang
Kes Componentitis, di luar aspek teknikalnya, menunjukkan kepentingan berhenti seketika untuk memeriksa dan mempersoalkan model dan tabiat mental kita. Seperti banyak corak dalam pembangunan perisian, komponen muncul sebagai penyelesaian kepada masalah sebenar, tetapi apabila kami mula lalai kepada corak ini, ia menjadi sumber kerumitan yang senyap. Komponentitis menyerupai kekurangan nutrisi yang disebabkan oleh diet terhad: masalahnya bukan dengan mana-mana makanan tunggal tetapi dengan kehilangan semua yang lain.
Atas ialah kandungan terperinci Tidak Semuanya Memerlukan Komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1677
14
1430
52
1333
25
1278
29
1257
24
Perbandingan pembekal bentuk statik
Apr 16, 2025 am 11:20 AM
Mari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda
Bukti konsep untuk menjadikan sass lebih cepat
Apr 16, 2025 am 10:38 AM
Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula
Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow Dom
Apr 17, 2025 am 10:55 AM
Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC
Beberapa tangan dengan elemen dialog HTML
Apr 16, 2025 am 11:33 AM
Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan
Kertas kerja
Apr 16, 2025 am 11:24 AM
Beli atau Membina adalah perdebatan klasik dalam teknologi. Membina barang sendiri mungkin berasa lebih murah kerana tidak ada item baris pada bil kad kredit anda, tetapi
Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP Baru
Apr 17, 2025 am 11:26 AM
Pada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s
Cache Cache Pantas
Apr 18, 2025 am 11:23 AM
Anda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas
Di manakah 'Langgan Podcast' pautan ke?
Apr 16, 2025 pm 12:04 PM
Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:
