🧑🏿‍🤝‍🧑🏻 🎛️ 🤥 Bereaksi praktik terbaik dan kiat yang harus diketahui setiap pengembang. Bagian 1 🌩️ 🛒 🤸🏽

Halo, Habr! Saya mempersembahkan kepada Anda terjemahan artikel "Bereaksi Praktik Terbaik & Tip yang Harus Diketahui Setiap Pengembang Reaksi Pt. 1" oleh Alex Devero.

gambar

React adalah salah satu perpustakaan paling populer untuk membangun antarmuka pengguna interaktif. Dalam artikel ini, saya akan menunjukkan kepada Anda beberapa contoh Bereaksi praktik terbaik yang akan membantu Anda menjadi pengembang yang lebih baik. Lihatlah instruksi ini untuk menjadi lebih baik dalam menulis kode Bereaksi.

Konten:

Jaga komponen Anda kecil
Hindari menumpuk komponen
Kurangi penggunaan komponen stateful
Gunakan komponen fungsional dengan kait dan memo, bukan komponen di kelas
Jangan gunakan alat peraga dalam kondisi asli.

Epilog: Bereaksi Praktik Terbaik dan Kiat Yang Harus Diketahui Setiap Pengembang Bagian 1

1. Jaga agar komponen Anda kecil

Menjaga komponen tetap kecil adalah salah satu praktik terbaik React yang dapat bekerja dengan sangat baik. Menerapkan hanya praktik yang tampaknya sederhana ini dapat membantu Anda menulis kode yang lebih bersih dan lebih dapat dikelola. Belum lagi itu dapat membantu mempertahankan alasan, atau setidaknya apa yang tersisa.

Ada satu aturan praktis yang terbukti yang bisa Anda gunakan. Lihatlah metode render. Jika memiliki lebih dari 10 baris, maka komponen Anda mungkin terlalu besar, dan merupakan kandidat yang baik untuk melakukan refactoring dan pemisahan menjadi beberapa komponen yang lebih kecil. Ingatlah bahwa salah satu ide untuk menggunakan React, atau bagian dari filosofinya, adalah menggunakan kembali kode.

Tujuannya adalah untuk membuat potongan kode yang Anda tulis sekali, dan kemudian menggunakannya lagi dan lagi ketika Anda perlu. Dari sudut pandang ini, tidak masuk akal untuk menggabungkan semua data Anda menjadi satu komponen besar, satu file. Dan, bahkan jika Anda benar-benar tidak peduli dengan kode yang dapat digunakan kembali, pikirkanlah. Seberapa mudah komponen dengan ratusan baris kode didukung?

Komponen seperti itu akan sulit dipertahankan, didebug, dan diperbarui. Ini juga berarti bahwa pekerjaan apa pun dengan komponen ini akan memakan waktu lebih lama. Dengan kata lain, kinerja keseluruhan Anda akan berkurang. Dan cepat atau lambat itu akan membuat Anda gila. Atau itu akan membuat rekan tim dan kolega Anda gila, dan mereka akan mulai membuat Anda gila.

Apa pun yang Anda pilih, Anda akan segera kehilangan akal dan mungkin membuat musuh untuk diri sendiri. Itu tidak layak. Jaga komponen Anda kecil. Pertahankan pertemanan, kewarasan, waktu, dan produktivitas. Sederhanakan debugging, perbarui, dan pertahankan kode. Pertimbangkan satu contoh.

Apakah

/// // file: index.jsx import React from 'react' const books = [ { category: 'Business', price: '$20.00', name: 'Private Empires', author: 'Steve Coll' }, { category: 'Philosophy', price: '$25.00', name: 'The Daily Stoic', author: 'Ryan Holiday' }, { category: 'Sport', price: '$15.95', name: 'Moneyball', author: 'Michael Lewis' }, { category: 'Biography', price: '$21.00', name: 'Titan', author: 'Ron Chernow' }, { category: 'Business', price: '$29.99', name: 'The Hard Thing About Hard Things', author: 'Ben Horowitz' }, { category: 'Fiction', price: '$4.81', name: 'Limitless: A Novel', author: 'Alan Glynn' } ] class Bookshelf extends React.Component { render() { const tableRows = [] this.props.books.forEach((book) => { tableRows.push( <tr> <td>{book.name}</td> <td>{book.author}</td> <td>{book.price}</td> <td>{book.category}</td> </tr> ) }) return ( <div> <form> <input type="text" placeholder="Search..." /> <button>Search</button> </form> <table> <thead> <tr> <th>Name</th> <th>Author</th> <th>Price</th> <th>Category</th> </tr> </thead> <tbody>{tableRows}</tbody> </table> </div> ) } } // Render Bookshelf component ReactDOM.render(<Bookshelf books={booksData} />, document.getElementById('container'))

Telah menjadi

 /// // file: books-data.js const books = [ { category: 'Business', price: '$20.00', name: 'Private Empires', author: 'Steve Coll' }, { category: 'Philosophy', price: '$25.00', name: 'The Daily Stoic', author: 'Ryan Holiday' }, { category: 'Sport', price: '$15.95', name: 'Moneyball', author: 'Michael Lewis' }, { category: 'Biography', price: '$21.00', name: 'Titan', author: 'Ron Chernow' }, { category: 'Business', price: '$29.99', name: 'The Hard Thing About Hard Things', author: 'Ben Horowitz' }, { category: 'Fiction', price: '$4.81', name: 'Limitless: A Novel', author: 'Alan Glynn' } ] export default booksData /// // file: components/books-table.jsx import React from 'react' class BooksTable extends React.Component { render() { const tableRows = [] this.props.books.forEach((book) => { tableRows.push( <tr> <td>{book.name}</td> <td>{book.author}</td> <td>{book.price}</td> <td>{book.category}</td> </tr> ) }) return ( <table> <thead> <tr> <th>Name</th> <th>Author</th> <th>Price</th> <th>Category</th> </tr> </thead> <tbody>{tableRows}</tbody> </table> ) } } export default BooksTable /// // file: components/search-bar.jsx import React from 'react' class SearchBar extends React.Component { render() { return ( <form> <input type="text" placeholder="Search..." /> <button>Search</button> </form> ) } } export default SearchBar /// // file: components/bookshelf.jsx import React from 'react' // Import components import BooksTable from './components/books-table' import SearchBar from './components/search-bar' class Bookshelf extends React.Component { render() { return ( <div> <SearchBar /> <BooksTable books={this.props.books} /> </div> ) } } export default Bookshelf /// // file: index.jsx import React from 'react' // Import components import Bookshelf from './components/bookshelf // Import data import booksData from './books-data' // Render Bookshelf component ReactDOM.render(<Bookshelf books={booksData} />, document.getElementById('container'))

2. Hindari menumpuk komponen

Setiap aturan harus diterapkan dengan hati-hati. Ini juga berlaku untuk Praktik terbaik Bereaksi ini, terutama yang sebelumnya. Ketika datang ke komponen, sangat mudah untuk berlebihan dan menulis bahkan bagian terkecil dari kode dalam bentuk komponen. Jangan lakukan ini. Tidak masuk akal untuk membuat setiap paragraf, rentang atau div komponen.
Pikirkan sebelum Anda mulai membagi setiap komponen menjadi bagian-bagian kecil. Anda dapat menganggap komponen tersebut sebagai campuran "HTML", yang hanya melakukan satu hal, independen, dan pengguna akan melihatnya secara keseluruhan. Apakah masuk akal untuk membuat bagian kode ini komponen? Jika tidak, gabungkan kode ini. Kalau tidak, bagi saja.

Mari kita lihat beberapa contoh untuk menggambarkan definisi komponen ini. Salah satu contoh adalah dialog modal. Komponen ini dapat terdiri dari banyak elemen kecil, seperti divs, heading, paragraf teks, tombol, dll. Secara teoritis, semua elemen ini dapat dibedakan menjadi komponen kecil.

Dalam praktiknya, ini tidak ada gunanya. Ya, beberapa elemen ini dapat eksis secara independen satu sama lain. Namun, apakah benar-benar berguna untuk membuat komponen yang hanya terdiri dari satu paragraf atau satu judul? Apa yang akan terjadi selanjutnya? Komponen untuk label, input atau bahkan rentang? Pendekatan ini tidak berkelanjutan.

Untungnya, ada cara lain untuk melihatnya. Anda dapat menggunakan metodologi desain atom sebagai panduan. Dalam desain atom, semuanya dibagi menjadi enam kategori: atom, molekul, organisme, templat, halaman, dan utilitas. Anda mulai dengan elemen terkecil, seperti tombol, tautan, pintasan, input, dll. Ini adalah atom.

Kemudian Anda menggabungkan atom dan membuat molekul. Contoh molekul dapat berupa dialog modal, formulir, jendela sembul, menu tarik-turun, navigasi, dll. Selanjutnya, Anda dapat menggabungkan satu molekul dengan yang lain atau dengan atom dan membuat organisme. Contoh organisme adalah tajuk, daftar produk, atau keranjang belanja. Template, halaman, dan utilitas tidak lagi penting.

Bagaimana menggabungkan desain atomik dengan dua contoh praktik terbaik ini untuk komponen Bereaksi? Jangan ribet. Komponen dapat berupa sesuatu yang lebih dari sekadar atom, mis. molekul, organisme, atau bahkan templat atau halaman, jika diambil hingga batasnya. Dalam hal ini, label, pos, paragraf bukan komponen, karena mereka adalah atom.
Namun, dialog modal, formulir, pop-up, daftar drop-down, dll. adalah komponen, karena semuanya berhubungan baik dengan molekul atau dengan kategori suatu organisme. Masih ada beberapa elemen yang meragukan, seperti tombol. Ya, dari sudut pandang struktur atom itu adalah atom. Namun, ia dapat eksis secara mandiri, dalam banyak variasi, dan masih berfungsi.

Dalam kasus seperti itu, saya sarankan untuk tidak memikirkan praktik terbaik React, dan hanya dibimbing oleh insting batin saya. Pada akhirnya, Andalah yang akan bekerja dengan kode tersebut. Yang penting Anda merasa nyaman. Jadi jangan hanya membabi buta mengikuti beberapa praktik terbaik. Dan jika Anda bekerja dalam tim? Bagikan pemikiran Anda tentang ini dengan kolega Anda.

3. Kurangi penggunaan komponen stateful

Ini adalah salah satu praktik Bereaksi terbaik yang telah diterapkan selama beberapa waktu. Namun, praktik ini telah menjadi lebih populer dengan munculnya React 16.8.0 dan React hooks. Sebelum itu, ketika Anda ingin menggunakan keadaan atau metode siklus hidup apa pun, Anda juga harus menggunakan komponen stateful. Tidak ada jalan lain.

Kait mengubah itu. Setelah mereka secara resmi diluncurkan, React developer tidak lagi terbatas pada komponen stateful karena mereka perlu menggunakan state. Berkat kaitannya, pengembang Bereaksi sekarang dapat menulis komponen stateless menggunakan negara dan bahkan metode siklus hidup yang mereka inginkan.

Mengapa ini penting? Komponen stateless atau fungsional umumnya lebih baik daripada komponen stateful ketika datang ke kinerja. Alasannya adalah bahwa tidak ada metode keadaan atau siklus hidup. Dengan kata lain, lebih sedikit kode yang harus dieksekusi serta transpiling. Tentu saja, perbedaan ini hampir tidak terlihat, hampir tidak terlihat, jika Anda mengerjakan proyek yang sangat kecil.

Namun, perbedaan kecil ini dapat bertambah seiring dengan pertumbuhan proyek Anda. Pikirkan juga berapa banyak baris kode yang diperlukan komponen stateful dibandingkan dengan yang fungsional. Fungsionalitasnya juga lebih pendek dan seringkali lebih mudah dibaca. Mari kita lihat komponen tombol, yang didefinisikan sebagai komponen dengan kontrol dan fungsi keadaan. Yang mana yang lebih Anda sukai?

 // Button defined as a stateful component class Button extends React.Component { handleClick = () => { // Do something } render() { return( <button type="button" onClick={this.handleClick}>Click me</button> ) } } // Button defined as a functional component const Button = () => { const handleClick = () => { // Do something } return( <button type="button" onClick={handleClick}>Click me</button> ) }

4. Gunakan komponen fungsional dengan kait dan memo, bukan komponen di kelas

Seperti yang sudah kita bahas, Anda tidak perlu lagi menggunakan komponen stateful hanya untuk menggunakan status. Selain itu, beberapa pengembang Bereaksi juga percaya bahwa di masa depan, Bereaksi akan mulai menjauh dari kelas. Apakah ini benar, sekarang tidak masalah. Yang penting adalah bahwa satu komponen fungsional sekarang dapat menggunakan status berkat kait.
Dan kedua, penggunaan komponen fungsional memiliki kelebihan. TLDR? Tidak ada kelas, warisan dan konstruktor. Tidak ada kata kunci ini. Praktik-Praktik Terbaik Bereaksi Ketat. Rasio sinyal terhadap noise tinggi. Komponen yang bengkak dan struktur data yang buruk lebih mudah dikenali. Kode lebih mudah dipahami dan diverifikasi. Dan, sekali lagi, kinerja lebih baik.

Dan satu hal lagi. Banyak pengembang Bereaksi menentang komponen fungsional. Salah satu masalah adalah bahwa Anda, sebagai pengembang Bereaksi, tidak dapat mengontrol proses rendering saat menggunakan komponen fungsional. Ketika sesuatu berubah, React mengembalikan komponen fungsional, terlepas dari apakah komponen itu sendiri telah diubah.
Di masa lalu, solusinya adalah menggunakan komponen murni. Komponen bersih menyediakan kemampuan untuk membandingkan keadaan dan alat peraga. Ini berarti bahwa Bereaksi dapat "memeriksa" apakah isi komponen, alat peraga, atau komponen itu sendiri telah berubah. Jika demikian, ia akan mengembalikannya. Kalau tidak, itu akan melewati rendering ulang dan akan menggunakan kembali hasil yang diberikan terakhir. Kurang rendering sama dengan kinerja yang lebih baik.
Dengan Bereaksi 16.6.0, ini tidak lagi menjadi masalah, dan argumen terhadap komponen fungsional tidak lagi valid. Yang mengubah permainan adalah memo. Memo membawa perbandingan yang dangkal dengan komponen fungsional, kemampuan untuk "memeriksa" apakah konten komponen, alat peraga, atau komponen itu sendiri telah berubah.

Sekali lagi, berdasarkan perbandingan ini, Bereaksi akan mengembalikan komponen kembali atau menggunakan kembali hasil rendering terakhir. Singkatnya, memo memungkinkan Anda membuat komponen fungsional "bersih". Tidak ada alasan lagi untuk menggunakan komponen statefull, atau komponen murni. Paling tidak jika Anda tidak perlu mengatasi kondisi yang sulit.

Dalam hal ini, Anda harus mempertimbangkan untuk menggunakan sesuatu yang lebih skalabel dan dapat diatur, seperti MobX, Redux, atau Flux, alih-alih keadaan komponen. Pilihan lain yang mungkin adalah menggunakan konteks. Bagaimanapun, berkat kait dan memo, komponen fungsional tentu saja merupakan beberapa praktik React terbaik yang layak untuk dipikirkan.

5. Jangan gunakan alat peraga dalam kondisi asli

Ini adalah salah satu praktik React terbaik yang ingin saya ketahui ketika saya mulai belajar. Kemudian saya tidak tahu bahwa itu adalah ide yang sangat buruk untuk menggunakan alat peraga di kondisi awal. Mengapa ini ide yang buruk? Masalahnya adalah bahwa konstruktor dipanggil hanya sekali selama pembuatan komponen.

Ini berarti bahwa ketika Anda membuat beberapa perubahan pada alat peraga di waktu berikutnya, keadaan komponen tidak akan diperbarui. Itu akan mempertahankan makna sebelumnya. Kemudian saya keliru menganggap bahwa alat peraga disinkronkan dengan negara. Jadi, ketika beberapa detail berubah, negara akan berubah untuk mencerminkan perubahan ini. Sayangnya, ini tidak benar.

Ini mungkin tidak menjadi masalah jika Anda ingin negara bagian menerima nilai dari properti hanya sekali selama rendering awal, dan Anda akan mengontrol keadaan di dalam komponen. Jika tidak, Anda bisa menyelesaikan masalah ini dengan componentDidUpdate. Seperti namanya, metode siklus hidup ini memungkinkan Anda untuk memperbarui komponen ketika ada perubahan, seperti alat peraga.

Jika Anda memutuskan untuk menggunakan metode ini, ingat satu hal. Ini tidak akan terlibat dalam rendering awal, tetapi hanya di berikutnya. Oleh karena itu, pastikan untuk menginisialisasi keadaan komponen dengan nilai yang diperlukan, mungkin diperoleh dari alat peraga. Kemudian gunakan componentDidUpdate untuk memperbarui nilai-nilai ini dan komponen yang diperlukan.

Epilog: Bereaksi Praktik Terbaik dan Kiat Yang Harus Diketahui Setiap Pengembang Bagian 1

Selamat! Anda baru saja menyelesaikan bagian pertama dari seri-mini artikel tentang praktik terbaik React ini. Hari ini, Anda telah belajar tentang lima praktik yang dapat Anda gunakan untuk membuat kode Bereaksi lebih pendek, lebih sederhana, lebih baik, lebih cepat, dan lebih mudah dibaca dan dipelihara. Sekarang terserah Anda untuk menerapkan praktik yang Anda setujui dan mulai menggunakannya.

Di bagian selanjutnya, Anda akan belajar tentang serangkaian praktik terbaik dan kiat untuk membantu Anda meningkatkan kode Bereaksi, serta keterampilan pemrograman Anda. Sampai saat itu, ambil apa yang Anda pelajari hari ini dan habiskan sebagian waktu Anda untuk berlatih.

Jika Anda menyukai artikel ini, silakan berlangganan.

Awalnya diposting ke Blog Alex Devero.