Penulis materi, terjemahan yang kami terbitkan hari ini, ingin menyajikan versi beta dari perpustakaan komponen-v4 gaya ke komunitas pengembang web. Dia, berbicara atas nama pembuat perpustakaan, mengatakan bahwa komponen yang ditata sekarang memiliki API global baru untuk bekerja dengan gaya dan dukungan asli untuk properti
as dan
ref . Perpustakaan mengikuti jalur penolakan
.extend , itu kompatibel dengan StrictMode React v16 dan telah menjadi lebih baik, lebih cepat dan lebih kuat.
Fitur komponen bergaya v4
Untuk menginstal versi komponen-gaya terbaru, gunakan perintah ini:
npm install styled-components@beta
Anda dapat membiasakan diri dengan kemampuan perpustakaan, memeriksanya, dan jika ternyata ada sesuatu yang perlu ditingkatkan, biarkan pengembang mengetahuinya.
Di sini Anda dapat menemukan instruksi untuk memutakhirkan ke versi baru perpustakaan.
Berikut adalah changelog untuk komponen gaya v4.0.0-beta.0.
Pertimbangkan fitur utama dari rilis komponen-gaya ini:
- Mengurangi ukuran dan meningkatkan kecepatan. Ukuran pustaka telah dikurangi dari 16.1 KB menjadi kurang dari 15 KB (ukuran akhir tergantung pada bundler Anda dan pada penggunaan plugin babel). Kecepatan pemasangan meningkat sekitar 25%, kecepatan rendering ulang - sekitar 7,5%.
- API
createGlobalStyle baru, yang merupakan pengganti untuk injectGlobal API lama dengan dukungan untuk pemuatan ulang panas dan tema. - Dukungan untuk properti
as , alternatif yang lebih fleksibel untuk .withComponent() .
- Menyingkirkan
Comp.extend dengan dukungan untuk terjemahan otomatis basis kode ke dalam format terpadu styled(Comp) . - Kompatibilitas penuh dengan StrictMode React v16. Ini, di samping itu, berarti bahwa pengembang harus meninggalkan dukungan untuk React v15 dan lainnya, versi React yang lebih lama (walaupun polyfill mungkin dapat digunakan untuk mengatur pekerjaan dengan komponen gaya v4 dalam React v15).
- Dukungan asli untuk
ref untuk setiap komponen bergaya, dan berkat React v16, tidak perlu menggunakan innerRef .
Pustaka komponen-gaya dilepaskan dalam versi beta sehingga mereka yang menggunakannya memiliki cukup waktu untuk menekankan pengujian perubahan, dan sehingga dimungkinkan untuk menyiapkan mekanisme bantu seperti deskripsi jenis dan alat penyorot sintaksis untuk yang baru. API Perpustakaan diharapkan tetap dalam status beta selama sekitar satu bulan.
Performa
Ketika versi kedua dari komponen yang ditata dirilis, kami berjanji, setelah menyelesaikan API inti, untuk fokus pada kinerja. Sejak itu, berkat tambalan, kami telah meningkatkan kinerja perpustakaan, yang, khususnya, telah menyebabkan peningkatan
10 kali lipat dalam kinerja di v3.1.
Bekerja pada kinerja komponen ditata terus. Berkat optimalisasi internal yang terkait dengan bekerja dengan memori, karena kekhasan menerapkan mesin JS dan kode refactoring, kecepatan pemasangan komponen v4 gaya untuk pohon komponen dalam dan lebar meningkat sekitar 25%. Pembaruan gaya dinamis sekitar 7% lebih cepat. Berikut ini adalah perbandingan kinerja komponen-ditata v3 dan v4, berdasarkan hasil tiga tes. Dua yang pertama terkait dengan studi pemasangan komponen pohon, yang ketiga menyangkut memperbarui komponen dengan gaya dinamis.
Perbandingan komponen gaya v3 dan v4Hasil ini, diperoleh dalam lingkungan yang terisolasi, terlihat mengesankan. Namun, akan sangat menarik untuk membandingkan komponen-komponen yang ditata gaya v4 dengan perpustakaan ekosistem CSS-in-JS lainnya, khususnya, dalam hal kecepatan pemasangan.
Styled-components v4 dan perbandingan kinerja perpustakaan lainnyaSeperti yang Anda lihat, kinerja komponen yang ditata terlihat sangat mengesankan. Secara khusus, dibandingkan dengan pustaka tercepat, hasil komponen yang ditata dalam standar deviasi dari hasil mereka dalam hal kecepatan pemasangan dan pembaruan. Semua ini memungkinkan kami untuk secara resmi menyatakan bahwa kinerja tidak lagi menjadi masalah perpustakaan ini.
Meskipun kinerja komponen-gaya adalah hasil dari pengembangan perpustakaan dan waktu dan upaya yang cukup untuk memperbaikinya, ini tidak berarti bahwa kita tidak akan lagi terlibat dalam peningkatan kinerja. Jika kami menemukan peluang untuk membuat perpustakaan lebih cepat, kami akan menggunakan kesempatan ini.
API penataan gaya global baru
Kami telah mengembangkan API penataan gaya global baru untuk beberapa waktu. API lama,
injectGlobal , memiliki tiga kelemahan serius: tidak mendukung pembaruan dinamis, pemuatan ulang panas, dan penggunaan tema secara kontekstual.
Sekarang kami dengan senang hati memperkenalkan Anda kepada
createGlobalStyle , API gaya global baru yang mendukung pembaruan dinamis. Seperti apa bentuknya bekerja dengannya:
import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` html { color: red; } `; export default function App() { return ( <div> <GlobalStyle /> This is my app! </div> ); }
Menggunakan
createGlobalStyle gaya global sekarang menjadi bagian dari pohon komponen React. Meskipun, pada pandangan pertama, tidak ada yang istimewa tentang ini, memungkinkan untuk memperbarui dan me-panas gaya pemuatan secara dinamis, dan juga memungkinkan Anda menggunakan
tema kontekstual untuk gaya global. Semuanya terlihat persis sama seperti ketika bekerja dengan komponen bergaya lainnya.
import { createGlobalStyle, ThemeProvider } from "styled-components"; // , const GlobalStyle = createGlobalStyle` html { background: ${p => p.backgroundColor} color: red; font-family: ${p => p.theme.fontFamily}; } `; export default function App() { return ( <ThemeProvider theme={{ fontFamily: "Helvetica Neue" }}> <GlobalStyle backgroundColor="turquoise" /> </ThemeProvider> ); }
Penolakan komponen .extend dan "lipat"
Pelepasan komponen yang ditata ini memiliki mekanisme internal, berkat komponen yang telah diubahsuaikan dalam bungkusnya sekarang secara otomatis "diciutkan", yang memungkinkan rendering hanya satu komponen.
Apa artinya ini bagi pengguna perpustakaan? Faktanya adalah bahwa
StyledComp.extend API muncul di perpustakaan untuk memungkinkan beberapa optimasi berdasarkan pada fakta bahwa komponen yang dapat diperluas adalah komponen yang bergaya. Berkat kerja internal pada "lipat" komponen secara otomatis, saat menggunakan
styled(StyledComp) optimasi yang sama yang diterapkan berkat
StyledComp.extend secara otomatis diterapkan. Ini berarti
.extend sekarang tidak terlalu berguna, yang diizinkan untuk meninggalkan API ini. Akibatnya, sekarang pengguna perpustakaan dapat menulis lebih sedikit kode dan mendapatkan kesempatan untuk tidak membuang waktu mengembangkan satu API tambahan. Kami percaya ini sangat bagus.
Properti polimorfik sebagai
Ada lagi fitur baru yang ditata-komponen v4, yang kami sangat antusias. Kita berbicara tentang dukungan asli untuk properti
as untuk setiap komponen bergaya, yang memungkinkan kita untuk secara dinamis mempengaruhi rendering selama eksekusi program. Pertimbangkan sebuah contoh:
import styled from "styled-components" import { Link } from "react-router-dom" // <Component /> DOM div const Component = styled.div` color: red; ` <Component>Hello World!</Component> // , HTML- ! <Component as="span">Hello World!</Component> <Component as={Link} to="home">Hello World!</Component>
Jika Anda membandingkan ini dengan mekanisme
.withComponent(something) yang ada, alat baru lebih fleksibel, karena Anda tidak perlu menjelaskan penggantian di muka, dan, berkat mekanisme "lipat" internal yang baru, stilisasi tidak hilang jika komponen dasar ditata- komponen!
import styled from "styled-components" const RedColor = styled.div` color: red; ` const BlueBackgroundRedColor = styled(RedColor)` background: blue; ` <BlueBackgroundRedColor as="span">Hello!</BlueBackgroundRedColor>
Seperti yang Anda lihat, properti
as hanyalah hal yang luar biasa, yang sangat menyederhanakan rendering kode HTML semantik di mana saja dalam aplikasi. "Sup" dari tag
<div> tidak memiliki alasan lain untuk membenarkan.
Harap dicatat bahwa sampai kami memastikan bahwa properti tersebut dapat menjadi pengganti yang cocok untuk
.withComponent dalam semua kasus penggunaan, kami tidak akan menolaknya. Diasumsikan bahwa periode transisi ini tidak akan bertahan terlalu lama, dan kami, dalam rilis utama berikutnya, akan menghapus
.withComponent .
Bereaksi v16 dan ref
Dalam proses beralih ke React v16 API, kami menemukan, antara lain, bahwa berkat
React.forwardRef API baru, kami dapat menyingkirkan
innerRef . Kami tidak pernah menyukai teknik ini, karena sepertinya ini semacam peretasan yang tidak terlalu bersih. Namun berkat kerja yang luar biasa dari tim React, Anda sekarang dapat menggunakan
ref asli:
import styled from "styled-components" const Component = styled.div` color: red; `
Perbaikan untuk Penulis TypeScript
Kami tidak melakukan ini secara langsung, tetapi kami sangat menyukai
naskah @ babel / preset yang baru . Keberadaannya berarti bahwa sekarang semua orang yang menulis pada TypeScript akhirnya akan dapat menggunakan
plugin babel untuk komponen-gaya dengan semua kegunaannya, termasuk debugging yang disederhanakan menggunakan nama-nama komponen di kelas, dukungan untuk rendering server, dan mengurangi ukuran bundel.
Selain itu, kami telah menyelesaikan terjemahan tipe TS ke dalam DefinitelyTyped. Komunitas sekarang dapat bekerja dengan mereka dan memperbaiki kesalahan pengetikan dengan langkah mereka sendiri, tanpa terikat dengan rilis komponen-gaya. Ketik deklarasi dapat ditemukan di
sini .
Ringkasan
Dari materi ini, Anda belajar tentang fitur beta baru dari komponen-gaya v4 dan perbaikan yang dilakukan untuk itu. Kami berharap semua ini akan bermanfaat bagi mereka yang menggunakan komponen bergaya, dan mungkin akan menarik bagi mereka yang hanya akan mencoba perpustakaan ini.
Pembaca yang budiman! Apakah Anda menggunakan pustaka komponen-gaya dalam proyek Anda?
