Menguruskan dan memaparkan dataset yang besar dalam React 16 aplikasi dengan Sencha Extreact Grid, mengambil kesempatan daripada ciri-ciri terbina dalam seperti penyortiran, penapisan, dan penyuntingan, tanpa memerlukan banyak operasi DOM.
Mata utama:
Artikel ini pada asalnya diterbitkan di Sencha. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.
React 16 adalah versi React pertama yang dibina pada seni bina teras baru React (kod named "Fiber". React 16 secara asasnya direka untuk menyokong rendering tak segerak, yang membolehkan memproses pokok komponen besar tanpa menyekat benang pelaksanaan utama. Ia menyokong banyak ciri utama seperti penangkapan pengecualian dengan sempadan ralat, mengembalikan pelbagai komponen dari rendering, mengurangkan saiz fail, dan menyokong lesen MIT.Jika anda sedang membangunkan aplikasi web yang didorong data menggunakan React 16, terdapat kebarangkalian yang tinggi bahawa anda akan menggunakan antara muka grid atau spreadsheet seperti untuk memaparkan data pengguna pada satu ketika. Bergantung pada keadaan, pengguna anda mungkin mahu grid dalam aplikasi dapat:
Dalam artikel ini, kami akan menggunakan Sencha Extreact Grid untuk membuat contoh yang memaparkan maklumat mengenai stok dan syarikat saham. Sekiranya anda ingin menulis grid menggunakan jadual HTML atau komponen pihak ketiga yang lain, anda mungkin perlu melakukan perkara seperti pengendalian klik pada tajuk lajur untuk menyusun, mengklik pemisah antara tajuk lajur untuk mengubah saiz, atau menggeser pager dan mendapatkannya Operasi seterusnya seperti data halaman. Dengan grid extake, ciri-ciri ini terbina dalam. Mahu mencubanya sendiri? Bermula dengan percubaan percuma selama 30 hari ExtleAct sekarang-daftar di sini.
Mari mula membina aplikasi menggunakan grid extact.
Untuk mula membangunkan aplikasi React menggunakan komponen extake, ikuti langkah -langkah berikut:
Pastikan anda telah menyediakan persekitaran nod
Pertama, pastikan nod 8.11 dan NPM 6 ditetapkan pada sistem anda. Anda boleh memuat turun versi nod terkini dari laman web Node. Sekiranya anda sudah memasang nod, anda boleh menyemak versi Node dan NPM dengan mudah menggunakan arahan berikut:
<code>node -v npm -v</code>
Dapatkan kelayakan log masuk untuk repositori npm extact
pakej NPM extreact dihoskan dalam repositori NPM swasta SENCHA. Anda hanya perlu log masuk ke repositori sekali untuk mengakses semua pakej extreact. Untuk mendapatkan kelayakan log masuk, lawati halaman percubaan percuma selama 30 hari dan isi borang. Kami akan menghantar e -mel kepada anda dengan butiran log masuk serta beberapa pautan sumber seperti dokumentasi dan projek sampel.
Log masuk dalam repositori NPM yang tersekat dan dapatkan Generator Aplikasi Exproact
Langkah seterusnya adalah untuk log masuk ke repositori NPM swasta Sencha, yang menjadi tuan rumah pakej extreact. Gunakan log masuk npm anda (disediakan dalam e -mel) untuk mengaitkan repositori dengan skop @sencha dan masukkan kelayakan apabila diminta:
<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>
Langkah seterusnya ialah memasang pakej penjana extract.
<code>npm install -g @sencha/ext-react-gen</code>
Buat aplikasi React pertama anda
Jalankan penjana yeoman untuk membuat aplikasi extract pertama anda:
<code>ext-react-gen app your-app-name-here -i</code>
Penjana akan meminta anda menamakan permohonan anda, namakan pakej NPM dan pilih tema. Tema bahan lalai (berdasarkan panduan reka bentuk bahan Google) adalah tema permulaan yang baik. Pilih "Menjana Aplikasi Kosong". Penjana juga akan meminta anda membuat direktori baru untuk projek itu. Penjana kemudian akan memuat turun dan membuat aplikasi sampel anda, termasuk kebergantungan yang berkaitan.
Jalankan Aplikasi React anda
Dalam output penjana, anda akan mendapati langkah -langkah untuk menjalankan aplikasi. Ia semudah menukar ke direktori aplikasi baru anda dan menjalankan aplikasi dengan arahan berikut:
<code>npm start</code>
Ini akan melancarkan aplikasi dan aplikasi React kosong anda hanya akan memaparkan tajuk permohonan. Komponen utama dalam aplikasi (seperti StockSgrid) mempunyai bekas di direktori root yang ditandakan skrin penuh dengan set susun atur yang sesuai, yang bermaksud ia akan meregangkan unsur -unsur anaknya untuk mengisinya.
Lihat kod sebelum langkah ini di GitHub.
Tambah data stok
kami akan menambah dataset sampel ke aplikasi, yang dipanggil Stocks.json. Ini adalah dataset yang cukup besar dengan kira -kira 10,000 baris data JSON, setiap baris mewakili syarikat atau kod saham - jadi kami mempunyai nama syarikat, kod saham, industri, industri mereka, dan 5 kali terakhir yang mengandungi array tanda saham itu untuk dijual. Ini adalah data yang akan kami paparkan di grid. Dalam aplikasi sebenar, semua data ini akan dikembalikan di backend. Kami akan memuatkannya secara statik untuk aplikasi sampel ini, dan bukannya meleleh melalui semua mekanisme bagaimana untuk membina API REST Backend. Tetapi ia akan memuat dengan cara yang sama dengan cara yang sama anda mendapat data dari backend sebenar.
Buat grid asas
Dalam kaedah render komponen StockGrid, kami akan mengembalikan grid dengan lajur.
Untuk meletakkan lajur dalam grid, kami menggunakan komponen lajur, yang mengambil dataindex yang sama seperti medan nama data saham. Ia mengambil prop teks sebagai teks header lajur, dan kami kemudian dapat menentukan lebar untuk lajur, seperti lebar tetap atau flex, atau gabungan flex dan nilai minimum atau maksimum. Kami akan menambah komponen lajur kepada nama syarikat, kod, berdetik, industri dan industri. Buat kelas StocksGrid baru seperti yang ditunjukkan di bawah:
<code>node -v npm -v</code>
Sekarang, tambahkan StockGrid ke aplikasi kelas seperti berikut:
<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>
Lihat kod sebelum langkah ini di GitHub. Anda akan dapat melihat aplikasi web dengan grid kosong pada permulaan NPM.
grid dalam extact adalah jadual yang mengekstrak dan membuat data dari kedai data ext. Dalam extreact, pelaksanaan storan kami adalah struktur data yang membolehkan anda menyusun dan menapis data untuk grid atau komponen seperti senarai atau carta.
kita kini boleh mula memuatkan data stok dan membuat storan. Begitu juga, grid sentiasa mendapat datanya dari storan, dan beberapa interaksi dengan grid akan mencetuskan peristiwa pada storan, seperti memuatkan semula, menyusun, atau paging. Untuk melakukan ini, kami akan membuat storan kami di sini.
penyimpanan data ext berbeza daripada penyimpanan fluks. Apa yang menjadikan mesh dan penyimpanan sedikit berbeza daripada kaedah React Standard ialah kedua -duanya bersepadu dengan ketat. Biasanya, anda boleh lulus data terus ke storan, atau storan boleh mengekstrak data dari backend dengan sendirinya menggunakan proksi. Dengan grid extreact, anda mendapat ciri interaktif seperti penapisan, penyortiran, paging, pengelompokan, dan meringkaskan tanpa menulis kod.
Dalam contoh ini, kami lulus data terus ke penyimpanan dari fail data stok. Anda juga boleh membuat storan menggunakan konfigurasi proksi - memiliki proksi membolehkan kami melakukan pelbagai tindakan hebat seperti paging jauh, penapisan, dan penyortiran. Kami menetapkan Autoload ke TRUE supaya ia secara automatik memuat grid. Data tidak disusun secara khusus oleh mana -mana kriteria, jadi kami akan menyusunnya pada pelanggan dengan menyatakan atribut nama.
<code>npm install -g @sencha/ext-react-gen</code>
Dalam grid, berikan konfigurasi kedai ke kedai yang dibuat.
<code>ext-react-gen app your-app-name-here -i</code>
Sekarang, kita mempunyai grid dengan semua data seperti berikut:
Dengan kod mudah ini, anda boleh mendapatkan banyak ciri secara percuma -seperti penyortiran -ini membolehkan anda mengklik pada mana -mana tajuk lajur dan ia akan menyusun secara automatik (lihat lajur simbolik di bawah).
Dalam kes ini, penyortiran dilakukan di sisi klien. Walau bagaimanapun, jika kita melaksanakan API backend sebenar, kita boleh mengkonfigurasi proksi untuk menyusun jauh dari latar belakang dan menyusunnya dalam pangkalan data menggunakan "Pesanan oleh Klausa".
Anda juga boleh mendapatkan lajur yang boleh disesuaikan secara percuma. Jadi, walaupun kita menetapkan lebar pada lajur ini, jika pengguna ingin melihat atau menutup sesuatu, dia boleh melakukannya dengan menyeret lajur kiri dan kanan.
anda juga boleh mendapatkan ciri kumpulan yang bagus. Oleh itu, jika kita mahu mengumpulkan industri, kita boleh mengatakan kumpulan dengan bidang ini, ia akan mengumpulkan semua data dengan nilai industri, dan semasa anda menatal setiap kumpulan, ia akan memberi anda tajuk tetap.
Anda akan melihat bahawa untuk 10,000 rekod, data ini menjadikannya sangat cepat. Sebabnya ia begitu cepat ialah ia menggunakan apa yang kita panggil penampan. Oleh itu, sementara jadual ini kelihatan penuh dan anda boleh menatal ke bawah dan ia terus berjalan, ia hanya menjadikan sedikit kandungan daripada yang anda lihat dalam "ketinggian viewport" apabila ia pada mulanya dimuatkan.
Apabila anda menatal ke bawah, ia sebenarnya menggantikan kandungan sel dengan rekod yang lebih baru, sama seperti anda membuka storan. Oleh itu, ia benar -benar mengekalkan unsur -unsur DOM sebanyak mungkin dan menyimpan DOM kecil, sehingga menjadikan penggunaan memori kurang dan memastikan prestasi tinggi.
Lihat kod sebelum langkah ini di GitHub.
Terdapat beberapa cara untuk gaya grid supaya data lebih mudah untuk dianalisis.
menggunakan prop sel
Mari kita lihat cara mengawal gaya sel. Kita boleh membuat nama berani - cara terbaik ialah menggunakan prop sel. Sel menggunakan beberapa konfigurasi yang mengawal penampilan sel. Kami akan menambah konfigurasi gaya di sini, dan kemudian kami akan mengatakan fontweight sama dengan berani.
<code>node -v npm -v</code>
tambah butang dalam baris
Sekarang, kita akan melakukan sesuatu yang lebih sesuai untuk dunia nyata. Katakan kita mahu butang yang boleh kita klik untuk membeli salah satu stok di lajur di sebelah kiri. Untuk melakukan ini, kami boleh menambah lajur, kali ini kami tidak akan menambah DataAndex kerana ia tidak sesuai dengan apa -apa item tertentu dalam medan atau mana -mana medan di kedai. Kami akan menambah widgetCell dengan butang. Kami akan melakukan beberapa gaya - kami akan menambah ui tindakan bulat kepadanya, jadi butang akan melihat tindakan bulat:
<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>
Pengendali beli yang akan kami gunakan sangat mudah. Apabila anda mengklik butang Beli, kami hanya akan menggunakan andaian yang dipanggil ext.toast, yang akan memaparkan mesej segera di bahagian atas yang menunjukkan kod untuk stok yang anda beli. Begitu juga, kami akan menjadikan lajur yang setiap baris akan diberikan. Kami akan memberikan butang ini dan kemudian apabila anda mengkliknya, ia akan memanggil fungsi ini:
<code>npm install -g @sencha/ext-react-gen</code>
Anda dapat melihat dari contoh ini bahawa pada dasarnya anda boleh membenamkan komponen extreact di dalam sel grid dan ia benar -benar interaktif. Ia bertindak sebagai komponen reaksi lengkap.
Lihat kod sebelum langkah ini di GitHub.
Dalam data saham, kami mempunyai pelbagai jenis jualan saham terakhir. Mari kita masukkan ke dalam grid sebagai graf garis percikan. Kami akan menggunakan WidGetCell untuk menjadikan komponen extract di dalam sel grid.
<code>node -v npm -v</code>
Apabila anda melayang ke atas mata yang berbeza dalam graf dalam talian dengan tetikus anda, ia akan memaparkan nilai y yang diformat sebagai dua tempat perpuluhan.
Lihat kod sebelum langkah ini di GitHub.
Salah satu keperluan umum dalam aplikasi intensif data adalah untuk mengeksport data ke Excel. Extreact dapat dengan mudah mencapai ini dengan menggunakan prop plugin grid.
<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>
Untuk memudahkan panggilan ke fungsi eksport, kami akan menambah lebih banyak komponen. Kami akan menambah bar tajuk dan dok barlbar di bahagian atas grid dan meletakkan menu di dalamnya. Apabila anda mengklik butang Eksport, anda akan mempunyai pilihan untuk mengeksport ke Excel atau CSV.
<code>npm install -g @sencha/ext-react-gen</code>
Pengendali eksport akan lulus jenis eksport dan lanjutan nama fail:
<code>ext-react-gen app your-app-name-here -i</code>
Pastikan untuk memasukkan pengeksport dalam kebergantungan pakej.json. Contohnya:
<code>npm start</code>
<code><grid> ></grid> <column> dataIndex="name" text="Name" width={300} /></column> <column> dataIndex="symbol" text="Symbol" /></column> <column> dataIndex="ticks" text="Trend" /></column> <column> dataIndex="sector" text="Sector" width={200} /></column> <column> dataIndex="industry" text="Industry" width={350} /></column> ></code>
Lihat kod sebelum langkah ini di GitHub.
Tambahkan plugin penyuntingan sel grid:
<code>export default class App extends Component { render() { return ( <extreact></extreact> <stocksgrid></stocksgrid> ) } }</code>
<code> this.store = new Ext.data.Store({ data: stocks, autoLoad: true, sorters: [{ property: 'name' }], listeners: { update: this.onRecordUpdated } })</code>
Mengendalikan acara penyuntingan
"Acara Kemas Kini" akan lulus banyak parameter, termasuk penyimpanan, rekod yang dikemas kini, objek yang menerangkan kejadian peristiwa, dan kemudian lulus pelbagai nama medan yang diubah. Anda akan menambahkannya dalam pengendali. Dalam kes ini, kami hanya memaparkan mesej segera. Dalam aplikasi sebenar, anda sebenarnya menggunakan logik perniagaan, seperti perubahan berterusan ke pangkalan data.
<code><grid> store={this.store}></grid> ... ></code>
Jika anda ingin menambah pilihan "pilih" ke sel grid, anda boleh melakukannya menggunakan komponen extreact lain yang dipanggil SelectField. Anda hanya perlu menambah komponen extfeed selectfield dalam lajur yang dikehendaki.
<code>node -v npm -v</code>
Lihat kod sebelum langkah ini di GitHub.
Ini berfungsi hebat untuk pengalaman desktop, tetapi penyuntingan sel mungkin bukan pengalaman penyuntingan terbaik apabila anda meminimumkan saiz skrin pengalaman telefon bimbit anda. Untuk peranti skrin kecil, anda mungkin perlu memilih gaya penyuntingan yang berbeza.
PilihanPlatformConfig membolehkan anda menentukan tingkah laku untuk desktop atau peranti mudah alih. Anda boleh menetapkan apa -apa prop ke nilai yang berbeza mengikut PlatformConfig, di sini kami akan menetapkan plugin mengikut platform. Dalam contoh ini, apabila aplikasi berada di desktop, kami akan menggunakan GridCellEditing. Apabila aplikasi berada pada peranti mudah alih, kami akan menggunakan GridDable, yang menyediakan cara yang lebih baik untuk mengedit data pada peranti mudah alih.
<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>
Lihat kod sebelum langkah ini di GitHub.
Anda boleh menggunakan grid Extleak 6.6 dan dengan mudah menambah antara muka seperti spreadsheet ke aplikasi web yang didorong data menggunakan React 16. Dengan extreact, anda boleh menggunakan mana -mana komponen moden, termasuk jejaring, jejaring pokok, jejaring perspektif, carta, visualisasi D3, dan lebih banyak penyesuaian yang diperlukan. Anda boleh membina pakej pengurangan yang dioptimumkan yang hanya mengandungi komponen yang anda gunakan dalam aplikasi anda. Anda boleh membina penglibatan pengguna yang mendalam dengan menggunakan susun atur dan ciri reka bentuk penyesuaian yang kelihatan hebat pada kedua -dua desktop dan peranti mudah alih. Sebagai peringatan, anda boleh memulakan percubaan percuma percubaan selama 30 hari Extleact sekarang-mendaftar di sini.
Sencha Grid adalah komponen grid berprestasi tinggi yang direka untuk mengendalikan sejumlah besar data. Ia mengintegrasikan dengan lancar dengan React 16, sebuah perpustakaan JavaScript yang popular untuk membina antara muka pengguna. Integrasi ini membolehkan pemaju mengambil kesempatan daripada kuasa seni bina berasaskan komponen React dan kuasa sencha grid, seperti penyortiran data, penapisan, pengumpulan dan penyuntingan. Gabungan ini menyediakan alat yang berkuasa untuk membina aplikasi web yang kompleks.
Pertama, anda perlu memasang pakej Grid Sencha menggunakan NPM (Pengurus Pakej untuk Node.js). Setelah dipasang, anda boleh mengimport komponen grid Sencha ke dalam aplikasi React anda dan menggunakannya seperti yang anda lakukan dengan komponen React lain. Komponen Grid Sencha menyediakan pelbagai alat yang boleh anda gunakan untuk menyesuaikan tingkah laku dan penampilan mereka.
Ya, reka bentuk Sencha Grid adalah rangka kerja tanpa kerangka, yang bermaksud ia boleh digunakan dengan mana-mana rangka kerja JavaScript atau perpustakaan. Walau bagaimanapun, kerana kedua-dua React dan Sencha Grid mempunyai ciri-ciri berasaskan komponen, integrasi dengan React 16 sangat lancar.
Sencha Grid menawarkan pelbagai ciri, menjadikannya alat yang berkuasa untuk memaparkan dan memanipulasi sejumlah besar data. Ciri -ciri ini termasuk penyortiran, penapisan, pengelompokan dan penyuntingan data, serta ciri -ciri canggih seperti Infinite Scrolling, Extender Row, dan Locking Column. Grid ini juga menyokong pelbagai jenis data dan format dan boleh disesuaikan dengan mudah untuk memenuhi keperluan aplikasi anda.
Sencha Grid direka untuk memproses sejumlah besar data dengan cekap. Ia menggunakan mekanisme pemotongan maya yang menjadikan baris hanya dapat dilihat di Viewport. Ini bermakna bahawa walaupun grid anda mempunyai beribu -ribu atau bahkan berjuta -juta baris, prestasi masih tinggi dan pengalaman pengguna lancar.
Ya, Sencha Grid menawarkan pelbagai pilihan untuk menyesuaikan penampilannya. Anda boleh menggunakan CSS untuk menukar warna, fon, dan gaya lain, dan anda juga boleh menggunakan API yang luas untuk menyesuaikan susun atur dan tingkah laku grid.
Sencha Grid menyediakan pelbagai acara yang boleh anda dengar untuk mengendalikan interaksi pengguna. Acara ini termasuk peristiwa mengklik, memilih acara, acara penyuntingan, dan banyak lagi. Dengan mendengar peristiwa ini, anda boleh melaksanakan tingkah laku dan interaksi yang kompleks dalam aplikasi anda.
Ya, Sencha Grid tersedia untuk aplikasi komersial dan bukan komersial. Walau bagaimanapun, untuk kegunaan komersil, anda perlu membeli lesen dari Sencha.
Sencha Grid menyediakan pelbagai cara untuk mengemas kini data. Anda boleh mengemas kini keseluruhan dataset atau satu baris atau sel. Apabila data dikemas kini, grid secara automatik merumuskan baris atau sel yang terjejas.
Sencha menyediakan Sencha Grid dengan dokumentasi dan tutorial yang komprehensif, serta forum komuniti di mana anda boleh bertanya dan berkongsi pengetahuan dengan pemaju lain. Di samping itu, SENCHA menyediakan perkhidmatan sokongan dan perundingan profesional kepada pelanggan yang memerlukan bantuan atau bimbingan tambahan.
Atas ialah kandungan terperinci Cara Membina React 16 Apl Web dengan Grid Sencha. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!