Apakah komponen yang bertindak balas?

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

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

Pautan projek:

• Reka Bentuk Semut
• https://ant.design/
• 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

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
• https://react-bootstrap.github .io/
• Saiz himpunan (dari BundlePhobia): 111kB dikecilkan, dikecilkan + gzip 34.4kB dimampatkan, melalui Shake the pokok untuk mengurangkan saiz
• Reactstrap
• https://reactstrap.github.io/
Pustaka Bootstrap dengan pengikatan React yang disukai semua orang; t bimbang tentang pepijat/isu;
• 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

  

  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:

  • Bulma
  • https://bulma.io/
  • react-bulma-komponen
  • https://github .com/couds/react-bulma-komponen
  • Saiz himpunan (dari BundlePhobia): 179kB mampat gzip yang dikecilkan, dikecilkan+ 20.1kB

  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

  

  Pautan projek:
  ChakraUI
  • • https://chakra-ui.com/
    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.

  https://
  material-ui.com/guides/

  saling kendali/#gaya-komponenPautan projek:

  • UI Bahan
  • https://material-ui.com/
  • Saiz himpunan (dari BundlePhobia): 325.7kB diminimumkan, 92kB diminimumkan +gizp dimampatkan, dikurangkan dengan gegaran pokok

  Kelebihan:

  • Dokumentasi lengkap
  • Pustaka ikon besar
  • https://material-ui.com/compone nts/material-icons/
  • Mudah dan mudah digunakan (pada permulaan)

  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

  Pautan projek:

  UI Semantik
  • • https://semantic-ui.com/
    Semantic-UI-React
  • 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.
  • Lihat isu:
    • https://github.com/Semantic-Org/Semantic- UI/isu/6109
    • https://github.com/Semantic-Org/Semantic-UI/issues/6413Fork yang dikendalikan komuniti:
    • https://github.com/fomantic/Fomantic-UI
      
    Sebutan Yang Berhormat
  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

  

  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:

  https://rebassjs.org/demo

  Pautan projek:

  • Rebass
  • https://rebassjs.org/
  • 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, https://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!