Rumah  >  Artikel  >  hujung hadapan web  >  Apakah komponen yang bertindak balas?

Apakah komponen yang bertindak balas?

藏色散人
藏色散人asal
2023-01-19 15:09:301328semak imbas

Komponen tindak balas ialah: 1. Reka Bentuk Semut; 3. Bulma; 5. UI Semantik; Rebass tunggu.

Apakah komponen yang bertindak balas?

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah komponen tindak balas?

Syor pustaka komponen Top React

Reka Bentuk Semut

Apakah komponen yang bertindak balas?

Pautan projek:

  • Reka Bentuk Semut
  • Saiz himpunan (dari BundlePhobia): 1.2mB selepas minifikasi, 349.2kB selepas minifikasi + mampatan gzip, kurangkan saiz dengan goncangan pokok.

Kebaikan:

  • AntDesign didatangkan dengan dokumentasi sokongan yang luas, mempunyai komuniti, termasuk projek berasingan (AntDesignPro) dengan templat pra-dibuat
  • Pustaka UI yang boleh digunakan untuk mereka bentuk aplikasi bahagian belakang/dalaman dengan cepat.

Kelemahan:

  • kekurangan kebolehaksesan
  • adalah besar dan dijangka memberi kesan yang besar pada prestasi
  • Mencemarkan CSS anda (jangka untuk menambah !penting untuk menghalangnya daripada menggayakan komponen bukan Semut anda).

Bootstrap

Apakah komponen yang bertindak balas?

Sebenarnya, saya terutamanya menganggap Bootstrap sebagai perpustakaan UI. Ia tidak akan memenangi sebarang anugerah reka bentuk kepada anda, tetapi ia boleh digunakan untuk menyelesaikan beberapa projek kelebihan dan produk berdaya maju minimum.

Tetapi ia bergantung pada apa yang anda mahu gunakan. Jika anda baru menggunakan React, ia merupakan perpustakaan yang bagus untuk bermula. Untuk pembangun yang lebih berpengalaman, mereka mungkin melihat komponen gaya / Emosi.

Terdapat dua perpustakaan popular dengan React bindings untuk Bootstrap, secara peribadi saya hanya menggunakan Reactstrap.

Pautan projek:

  • React Bootstrap
  • Saiz himpunan (dari BundlePhobia): 111kB dikecilkan, dikecilkan + gzip 34.4kB dimampatkan, melalui Shake the pokok untuk mengurangkan saiz
  • Reactstrap
  • Mulakan dengan cepat
Tiada pergantungan jQuery kerana ia telah dilaksanakan semula sepenuhnya dalam React.

    Kelemahan:
    • Ini ialah Bootstrap: jika anda tidak menyesuaikannya, tapak anda akan kelihatan seperti yang lain.

    Bulma

    Apakah komponen yang bertindak balas?

    Bulma berbeza daripada perpustakaan lain yang diperkenalkan dalam artikel ini kerana Bulma ialah Rangka Kerja CSS tulen , tiada JS diperlukan. Anda boleh memilih untuk menggunakan kelas daripada Bulma secara langsung atau menggunakan perpustakaan pembalut seperti react-bulma-components.

    Pautan projek:

    Kelebihan:

    • Tidak akan menjadikan tapak web anda kelihatan seperti Bootstrap
    • Sesuai untuk permulaan dan operasi pantas;
    • Ciri-ciri moden (berdasarkan Flexbox/Grid).
    Keburukan:

      Kebolehaksesan: Tidak mengikut garis panduan WCAG dengan ketat seperti perpustakaan lain, walaupun terdapat beberapa.
    Chakra UI

    Apakah komponen yang bertindak balas?
    Pautan projek:

      ChakraUI
    • Saiz himpunan (dari BundlePhobia): 326.2kB dikecilkan, 101.2kB dikecilkan + gzip dimampatkan, dikurangkan dengan gegaran pokok
    Kebaikan:

      Kebolehaksesan : Mengikuti garis panduan WAI-ARIA, komponen menggunakan tag aria;
    • Pelayan Discord menyediakan sokongan; t gunakan.
    • Keburukan:
    • Agak baharu.

    Nota:
    • Ia sangat hampir dengan v1, jadi sila ambil perhatian tentang perubahan yang berlaku selepas v0.8.0.
    UI Bahan

    Pada masa lalu, anda hanya boleh menyesuaikan gaya MaterialUI dengan menulis JSS, tetapi syukurlah anda kini boleh menggantikan gaya menggunakan komponen gaya dan Emosi. Apakah komponen yang bertindak balas?

    https://

    material-ui.com/guides/

    saling kendali/#gaya-komponenPautan projek:

    Kelebihan:

    Kelemahan :

    • Sukar dan menyakitkan untuk disesuaikan, tetapi perlu (untuk meningkatkan kesan visual);
    • Prestasi: Terlalu banyak nod DOM akan dipaparkan; Produk Google (bagi sesetengah orang, ini mungkin mewakili rupa profesional).
    • UI Semantik

    Apakah komponen yang bertindak balas?Pautan projek:

    UI Semantik
    • Saiz himpunan (dari BundlePhobia): 300.8kB selepas minifikasi, 80.9kB selepas minifikasi + mampatan gzip, kurangkan saiz dengan goncangan pokok.
    • Kelebihan

    Boleh digubah (gunakan sebagai prop untuk lulus komponen)
    • Mudah untuk disesuaikan
    • Dokumentasi berguna
    • Terkenal oleh pengguna (digunakan secara dalaman oleh Netflix dan digunakan oleh produk yang dikeluarkan oleh Amazon)
    • Sokongan TypeScript
    • Keburukan

    Potensi kelemahan terbuka projek sumber Kepastian.

    UI Reach

    ReachUI ialah perpustakaan komponen peringkat rendah yang membolehkan pembangun membina komponen React yang boleh diakses ke dalam sistem reka bentuk mereka.

    Tiada saiz pakej tersedia kerana setiap komponen dieksport secara individu sebagai pakej npmnya sendiri.

    Reakit

    Reakit ialah satu lagi perpustakaan komponen peringkat rendah. Secara teknikal ia adalah perpustakaan UI, tetapi ia tidak disertakan dengan CSS. Jadi anda masih perlu mencari penyelesaian penggayaan.

    Saiz himpunan (dari BundlePhobia): 119.9kB diminimumkan, 32.1kB diminimumkan +gzip dimampatkan, dikurangkan dengan gegaran pokok.
    Rebass

    Apakah komponen yang bertindak balas?

    Saya telah mengikuti Rebass untuk seketika. Ia adalah perpustakaan komponen berkuasa yang tidak disertakan dengan tema, tetapi anda boleh menukar tema dengan mudah. Untuk contoh praktikalnya, lihat demonya:

    rebassjs.org/demo

    Pautan projek:

    • Rebass
    • Saiz himpunan (dari BundlePhobia): 43kB selepas minifikasi, 14.4kB selepas minifikasi + mampatan gizp, kurangkan saiz dengan goncangan pokok.

    Petua

    Semasa menulis senarai ini saya cuba mengelak daripada memasukkan sistem reka bentuk komersil, tetapi beberapa (UI Bahan) telah diterima pakai secara meluas sehingga ia tidak disertakan Senarai itu tidak akan lengkap.

    Saya juga sengaja meninggalkan CSS-in-JS (seperti komponen gaya dan Emosi) dan sistem CSS utiliti (seperti Tailwind, tailwindcss .com /), kerana ia bukan secara eksplisit "Pustaka komponen React" tetapi sebaliknya alat untuk membuat komponen.

    Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah komponen yang bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn