Panduan Menambahkan React ke HTML
Diterjemahkan oleh
ScribdTranslationsPanduan Menambahkan React ke HTML
Diterjemahkan oleh
ScribdTranslationsREACT
PENDAHULUAN
React adalah sebuah pustaka JavaScript yang lahir untuk menjadi solusi bagi pengembang frontend dan aplikasi seluler berbasis
[Link] adalah pustaka deklaratif yang berbasis komponen.
Dinyatakan bahwa React memungkinkan untuk mengembangkan Antarmuka Pengguna (UI) dengan mudah sehingga membuat kode lebih mudah dibaca dan dipahami.
da debuggare, merancang antarmuka untuk setiap status aplikasi agar setiap perubahan status React
hanya akan memperbarui bagian UI yang tergantung pada data tersebut.
Icompontesono mirip dengan tag html, dapat dibuat komponen tunggal atau disusun dengan struktur pohon,
per UI yang kompleks. Interaksi dan logika untuk komponen diimplementasikan dalam JavaScript dan ini memungkinkan kita
memudahkan untuk melewati dan mengakses struktur data kompleks di berbagai titik aplikasi tanpa harus menyimpan
informasi tentang DOM.
CARA MENAMBAHKAN REACT KE SITUS
Untuk menambahkan komponen React ke halaman HTML yang sudah ada, tidak akan ada persyaratan instalasi.
Langkah 1: Tambahkan Kontainer DOM ke HTML (root)
Pertama-tama, Anda perlu menambahkan tag <div> kosong ke halaman HTML untuk menunjukkan titik di mana akan ditampilkan.
sesuatu dengan React.
content
Anda harus memberikan atribut ID yang unik pada <div> ini. Ini akan memudahkan untuk menemukannya dengan kode JavaScript dan
menampilkan komponen React di dalamnya.
Anda bisa menempatkan sebuah <div> "kontainer" di mana saja di dalam tag <body> dan memasukkan semua kontainer DOM.
independent yang kamu butuhkan dalam satu halaman
Langkah 2: Tambahkan Tag Skrip
Selanjutnya, Anda perlu menambahkan tiga tag <script> ke halaman HTML, tepat sebelum tag penutup </body>:
<!-- Muat React. -->
<script src="[Link] crossorigin></script>
<scriptsrc="htps://[Link]/react-dom@16/umd/[Link]" crossorigin></script>
<!-- Muat komponen React kami. -->
<script src="[Link]"></script>
</body>
Dua tag pertama memuat React. Yang ketiga memuat kode komponen.
Versi di atas hanya dimaksudkan untuk lingkungan pengembangan, dan tidak cocok untuk lingkungan produksi. Le
versi yang diminimalkan dan dioptimalkan dari produksi React adalah:
<script crossorigin src="htps://[Link]/react@16/umd/[Link]"></script>
<script crossorigin src="htps://[Link]/react-dom@16/umd/[Link]"></script>
Verifikasi bahwa CDN yang Anda gunakan telah mengatur header HTTP Access-Control-Allow-Origin: *:
Langkah 3: Buat Komponen React
Buat file Javascript yang mendefinisikan komponen React dan melalui id div itu disisipkan ke dalam HTML.
MEMBUAT PROYEK REACT BARU
Ketika Anda harus memulai proyek React baru dan seiring pertumbuhan aplikasi, timbul kebutuhan untuk
sebuah alat yang lebih terintegrasi. Terdapat berbagai toolchain JavaScript yang direkomendasikan untuk pengembangan aplikasi yang lebih
kompleks untuk mendapatkan semua keuntungan dari React. Toolchain di React membantu dalam menyusun:
Menggunakan pustaka pihak ketiga yang diimpor dari npm.
Segera identifikasi kesalahan umum.
Visualisasikan secara waktu nyata efek dari perubahan pada kode JavaScript dan CSS selama pengembangan.
Mengoptimalkan output untuk produksi.
Alat rantai tidak memerlukan konfigurasi untuk digunakan.
React merekomendasikan solusi-solusi ini:
Jika Anda sedang membuat aplikasi baru dengan Reacthalaman tunggalgunakanCreate ReactAplikasi.
Jika Anda sedang membuat situs yang dirender di sisi server dengan [Link], [Link].
Jika Anda sedang membuat situs yang berorientasi pada konten statis, gunakanTidaktsby.
Jika Anda sedang membuat sebuah pustaka komponen dengan mengintegrasikan basis kode yang sudah ada,
menggunakanToolchain Lebih Fleksibel.
Buat ReactApp
Buat Aplikasi Reactini adalah lingkungan yang nyaman untuk belajar React, dan ini adalah cara terbaik untuk mulai membangun
aplikasi baruhalaman tunggaldi React.
Esso mengonfigurasi lingkungan pengembangan sehingga dapat menggunakan fitur-fitur terbaru JavaScript, menyediakan
pengalaman otma pengembangan dan optimalkan aplikasi untuk produksi.
Saya meminta pemasanganNode >= 8.10 dan npm >= 5.6.
Untuk membuat sebuah proyek, jalankan:
npx create-react-app mia-app
cdmia-app
npm mulai
npxè seorang pelaksana pakettermasuk dalam npm.
Create React App tidak mengelola logika backend atau basis data; hanya membuat rantai build untuk frontend, jadi
dapat digunakan dengan backend apapun.
Ketika harus dirilis ke produksi, jalankan perintah
npm run build
akan dibuat build yang dioptimalkan dari aplikasi di folder build.
[Link]
[Link] framework populer dan ringan untuk aplikasi statis dan yang dirender di sisi server yang dibuat dengan
React. Termasuk solusi untuk routing dan penerapan gaya membutuhkan [Link] lingkungan server.
Gatsby
Gatsbyini adalah cara terbaik untuk membuat situs statis dengan React, memungkinkan untuk menggunakan komponen React, tetapi outputnya adalah
terbuat sepenuhnya dari kode HTML dan CSS yang telah di-render sebelumnya, untuk menjamin waktu pemuatan yang cepat.
Toolchains Lebih Fleksibel
Alat-alat rantai ini menawarkan lebih banyak pilihan dan fleksibilitas, direkomendasikan untuk pengguna yang lebih berpengalaman:
Barutrinosertakan preset untukaplikasi Reacte per ikomponentReact.
Nxmemungkinkan pengembangan monorepo full-stack, dengan dukungan terintegrasi untuk React, [Link],Ekspres, dan lainnya.
Paketini adalah pembangun aplikasi yang cepat dan tanpa konfigurasi yangberfungsi dengan React.
Razzlekerangka kerja renderisasi sisi server yang tidak memerlukan konfigurasi, menawarkan lebih banyak fleksibilitas dari
[Link].
STRUKTUR FILE PROJEK DENGAN CREATE-REACT-APP
Setelah proyek dibuat dengan create-react-app, file dan folder akan dibuat.
File [Link]
Folder proyek mencakup seperangkat paket yang sudah diinstal, menjadi bagian [Link], terkandung di dalam
direktori node_modules.
Sebagian paket diperlukan untuk menjalankan aplikasi agar dapat berfungsi.
Ada juga paket lain, yang sebaliknya menyediakan alat bantu untuk verifikasi kode, memulai server
Web untuk debug, pelaksanaan tes otomatis, penggabungan file dan sumber daya untuk rilis ke produksi
dan lain-lain. Oleh karena itu, mereka tidak diperlukan selama runtime, tetapi hanya dalam tahap pengembangan.
File [Link]: ini adalah file yang ada di aplikasi dan paket yang ditulis untuk [Link], berisi
objekJSONyang merangkum informasi penting tentang paket, seperti nama (name) dan versi (version),
ketergantungan yang diperlukan untuk runtime (dependencies) dan yang hanya untuk pengembangan (devDependencies), lebih serangkaian
perintah yang dapat dijalankan melalui npm, pengelola paket [Link], yang ditentukan dalam properti skrip.
Saya menjalankan skrip reaksi
create-react-app termasuk paket react-scripts yang menyediakan serangkaian skrip yang sudah siap untuk menjalankan berbagai
operasi dari Command Prompt.
Saya belajar Promt dan berpindah ke folder proyek, sekarang Anda dapat menjalankan skrip dengan
Perintah npm.
Perintah yang tersedia adalah:
- npm start melanjutkan transpilasi dari kode sumber aplikasi, menampilkan kemungkinan kesalahan.
setelah proses selesai, server Web diaktifkan untuk debugging dan browser dibuka untuk menampilkan
halaman awal aplikasi di alamat localhost dan port default (3000). Jika browser tidak
tampilkan konten yang diharapkan, periksa kemungkinan kesalahan di konsol.
- npm build: menjalankan build proyek dengan membuat direktori yang sama dan menghasilkan file di dalamnya.
disusun aplikasi, dioptimalkan untuk rilis di lingkungan produksi. Alat penggabungan menggabungkan
mereka mengemas file yang diperlukan untuk operasi aplikasi, dan memulai proses diminificatonper
mengurangi berat file yang harus diunduh oleh browser, memaksimalkan kinerja.
- npmtest:siapkan suite pengujian untuk eksekusi. Umumnya, alat ini tetap aktif dan mendengarkan untuk
melakukan kembali pengujian setelah ada perubahan pada sumber aplikasi.
- npm eject: perintah yang tidak dapat dibalik yang dijalankan ketika Anda ingin melepaskan dukungan dari create-react-app.
perintah menghapus ketergantungan dari proyek ke alat dan mengekstrak file konfigurasi untuk Webpack, Babel dan
alat-alat lain yang digunakan, meninggalkan kendali penuh di tangan pengembang.
File sumber src
Folder sumber proyek berisi file sumber yang sebenarnya, yang merupakan 'blok' dari aplikasi tersebut: mereka
mencakup file JavaScript dengan kode komponen, fileCSSdengan lembar gaya, aset-aset yang mungkin (gambar,
ikon, font, dll.).
Di dalam folder kita menemukan file [Link], yang merupakan komponen utama dari aplikasi (root DOM) dan yang
akan menampung semua komponen "anak" yang akan membentuk antarmuka pengguna.
Komponen yang akan berfungsi sebagai wadah akan berada di file [Link], di folder publik yang berfungsi sebagai "titik masuk"
dari aplikasi.
JSX: KOMPONEN DAN ELEMEN
JSX adalah sintaksis yang mungkin tampak seperti HTML, tetapi ini adalah ekstensi dari sintaksis JavaScript yang memungkinkan untuk membuat
elemen dasar yang membentuk komponen. Komponen kemudian diarahkan ke dalam DOM
dari aplikasi. Anda bisa berpikir tentang elemen sebagai deskripsi dari apa yang ingin Anda lihat di layar. React
aturan ini digunakan untuk membangun DOM dan menjaga agar tetap diperbarui.
Jadi seluruh aplikasi memiliki struktur pohon DOM, disarankan untuk membuat dalam file .js secara terpisah untuk setiap...
komponen e mengarahkan mereka kemudian ke DOM ([Link]) melalui file [Link].
Dalam React, elemen di dalam sebuah komponen harus memiliki satu elemen induk, misalnya:
<div>
<h1>Halo Dunia</h1>
<div> </div>
<h2> Contoh pertama<h2>
Dalam hal ini, itu akan memberikan kesalahan. Jika kita ingin menulis kode sebelumnya, kembali lebih banyak elemen,
dengan benar dan tanpa memasukkan elemen kedua dalam elemen induk div, atau membuat div lain, itu mungkin
membungkus mereka dalam <[Link]>...</[Link]> yang memungkinkan untuk mengembalikan elemen yang lebih dari satu seperti
hasil dari metodorender() tanpa harus membuat elemen DOM tambahan untuk menampungnya.
Dalam praktiknya, adalah mungkin untuk menulis elemen komponen secara langsung dalam JavaScript, sebenarnya, JSX adalah opsional.
dan tidak diminta untuk menggunakan React, karena itu kemudian akan dikonversi menjadi Javascript, tetapi jauh lebih
nyaman, sederhana, dan mudah dibaca. Tool Babel mengubah, sebenarnya, kode JSX menjadi JavaScript, dalam panggilan ke
[Link], contohnya:
<h1 className="saluto">Halo, dunia!</h1>
datang dikonversi menjadi:
const element = [Link](
h1
saluto
Halo, dunia!
);
Kode Javascript dalam JSX
Di dalam elementJSX, Anda dapat menjalankan kode Javascript (ekspresi, variabel, fungsi, dll.) dengan menyisipkannya
dalam kurung kurawal { },misalnya kita menyertakan hasil dari pemanggilan fungsi JavaScript, dalam sebuah
elemen<h1>.
const element = <h1> Halo, {formatName(user)} </h1>;
const user = {
Giuseppe
Verdi
};
fungsi formatNama(pengguna) {
kembalikan [Link] + ' ' + [Link];
}
[Link](element, [Link]('root'));
Mari kita lihat dalam contoh ini bahwa adalah mungkin untuk membuat elemen dan menetapkannya pada variabel;
Dalam elemen, di dalam tanda kurung {} dilakukan panggilan ke fungsi javascript yang mengambil data dari
obyek pengguna. Dan akhirnya elemen tersebut akhirnya diarahkan ke DOM melalui nama variabel.
Apakah mungkin menggunakan JSX di dalam pernyataan if, siklus for, menetapkannya ke variabel, menggunakannya sebagai argumen dari
sebuah fungsi dan mengembalikannya sebagai hasil dari sebuah fungsi.
Jangan tambahkan tanda kutip di sekitar kurung kurawal saat memasukkan ekspresi JavaScript dalam atribut.
Anda harus menggunakan tanda kutip (untuk string) atau kurung kurawal (untuk ekspresi), tetapi tidak pernah keduanya dalam
atribut yang sama.
React DOM menggunakan konvensicamelCasedalam menetapkan nama untuk atribut, daripada yang digunakan
biasanya dalam HTML, mengubah nama beberapa atribut, misalnya, atribut class menjadikelasNamadi
JSX etabindexdiventatabIndex.
Komponen React mengimplementasikan unmetodorender() yang menerima data sebagai input dan mengembalikan apa yang harus ditampilkan.
APLIKASI PRIMA REACT: Halo Dunia
Contoh aplikasi React yang membuat komponen HelloMessage melalui sebuah kelas
kelas HelloMessage extends [Link] {
render() {
kembali (
<div>
<h1>Halo {[Link]}</h1>
</div>
);
}
}
[Link](<HelloMessage name="Dunia" />, [Link]('root'));
PROYEK REACT JAM
Contoh konkret aplikasi React sebuah jam yang menunjukkan waktu saat ini dan menunjukkan reaktivitas React:
Aplikasi ini terdiri dari 4 berkas:
berkas [Link]
<div id="root"></div>
File html yang mengandung tag root dan mewakili elemen induk DOM di c0u65Zzzi akan dialihkan.
ditampilkan seluruh aplikasi.
file [Link]
File ini berisi komponen Jam
impor React dari 'react';
fungsi Orologio() {
const oraMillisecondi = [Link]();
const ora = new Date(oraMillisecondi);
kembali (
<p> {[Link]()}</p>
)
}
ekspor default Orologio;
Importasi perpustakaan React, setelah itu komponen Jam dibuat melalui sebuah fungsi. Dengan
[Link]() adalah waktu saat ini dalam milidetik, kemudian dibuat objek tipe Date. Komponen mengembalikan sebuah
elemen p di mana menerima objek oraetoLocaleTimeString() ditampilkan dalam format jam/menit/detik. Akhirnya menjadi
komponen diekspor.
file [Link]
impor React dari 'react';
impor Orologio dari './Orologio';
fungsi Aplikasi() {
kembali (
<div className ="App">
<h1>Saat Ini</h1>
<Jam/>
</div>
)
}
ekspor default Aplikasi;
ini adalah komponen induk dari seluruh aplikasi, mengimpor semua komponen anak, dalam hal ini hanya komponen
Jam dan kembali ke struktur semua komponen aplikasi.
Kita lihat bahwa komponen Jam telah diimpor, ini dapat dimasukkan ke dalam aplikasi melalui
tag sederhana <Orologio/>.
Itag komponen harus selalu dimulai dengan huruf kapital berbeda dari tag JSX.
file [Link]
impor React dari 'react';
impor ReactDOM dari 'react-dom';
impor Aplikasi dari './App';
fungsi orario() {
[Link](<App/>, [Link]('root'));
}
setInterval(orario, 1000)
Ini mengimpor React, ReactDOM, dan file komponen induk App.
[Link](componente, di mana mengarahkannya)
arah kembali komponen <App/> di root DOM dalam HTML. Komponen ini menunjukkan waktu saat ini dengan cara
statco, Anda perlu memperbarui halaman untuk melihat pembaruan, oleh karena itu pengalihan dimasukkan.
di dalam sebuah fungsi yang dipanggil setiap detik dengan setInterval(). Setiap kali fungsi dipanggil,
akan mengarahkan ulang komponen setiap detik dan salah satu karakteristik React adalah bahwa pada setiap pengalihan, terjadi
dibandingkan DOM dengan yang sebelumnya dan hanya elemen yang mengalami perubahan yang akan berubah. Dalam hal ini
kasus, di antara semua elemen, hanya <p></p> yang akan berubah, setiap detik, sisanya tidak.
BERPINDAH DARI KELAS KE FUNGSI DAN SEBALIKNYA
Sebelum hook untuk mengelola state di React diperkenalkan, kode ditulis dengan kelas. Diperkenalkan
Hooks telah berpindah dari kelas ke fungsi dan sering kali kita masih menemukan kode dengan kelas, tetapi perbedaannya antara
kelas dan fungsi adalah minimum dan mudah untuk beralih dari suatu kelas ke fungsi dan sebaliknya.
Data la functon:
fungsi Aplikasi() {
kembali (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Aplikasi Prima React</p>
</header>
</div>
);
}
Untuk mengonversinya menjadi kelas:
kelas Aplikasi diperluas Komponen {
render() {
kembali (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p> Aplikasi Prima React </p>
</header>
</div>
);
}
}
Impor importReact, { Komponen} dari 'react';
Gunakan kata kunci kelas, diikuti dengan nama, dan diperluas Komponen dan masukkan seluruh blok kode ke dalam metode
render() yang dipanggil dan dijalankan secara otomatis secara default.
KOMPONEN DAN PROPS
Saya Componentmemungkinkan untuk membagi UI menjadi bagian yang dapat digunakan kembali secara independen. Secara konseptual, komponen
saya seperti fungsi JavaScript: menerima input yang disebut 'props' dan mengembalikan elemen yang mendeskripsikan
apa yang harus muncul di layar.
Props mewakili sebuah objek yang berisi properti dari sebuah komponen.
Mari kita ambil contoh sebelumnya dari jam dan selain waktu lokal saat ini, kita tambahkan komponen jam lainnya.
che melalui props fusoorario menunjukkan waktu 6 jam lebih awal.
file [Link] menjadi:
fungsi Aplikasi() {
kembali (
<div className ="App">
<h1>Saat Ini</h1>
0
<Orologio fusoorario = "6"/>
</div>
)
}
Kita melihat bahwa props fusoorario diteruskan ke komponen sebagai atribut deltag.
file [Link] menjadi:
impor React dari 'react';
fungsi Orologio(props) {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilidetik);
kembali (
<p> {[Link]()}</p>
)
}
ekspor default Orologio;
fungsi komponen menerima props sebagai parameter. Waktu saat ini dalam milidetik ditambahkan dengan zona waktu
dipanggil dari props dan dikonversi menjadi milidetik (* 3600 * 1000).
Di dalam komponen untag, dapat ditentukan berapa banyak props yang diinginkan dan kemudian dipanggil dalam komponen (yang menerima
sebagai parameter selalu hanya props) saya melewati [Link].
Objek props adalah baca saja, tidak dapat diubah.
KELAS DAN PROPS
Untuk memanggil dan menggunakan properti props dalam sebuah kelas, mari kita ambil contoh jam yang dikonversi menjadi kelas:
file [Link]
impor React dari 'react';
classOrologio extends [Link] {
konstruktor(props) {
super(props);
}
render() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMillisecondi);
kembalilah (
<p>{[Link]()}</p>
)
}
}
ekspor default Orologio;
Kita bisa memperluas kelas baik dengan Component, mengimpornya di react, atau cukup dengan
[Link].
Untuk memanggil props dalam kelas: Anda mendefinisikan metode constructor(), sebelum metode render(), dan di dalamnya Anda
passaprops, yang kemudian didefinisikan dalam metodosuper().
Untuk menggunakan props dalam kelas (pada metode render()), mereka dirujuk dengan:
[Link]
SEBUTKAN KOMPONENNYA
Akhirnya, untuk memperbarui UI, kita memanggil [Link]() untuk mengubah output yang dirender.
State (atau estado) adalah objek di mana nilai-nilai yang terkait dengan komponen disimpan dan setiap kali
ketika state berubah, komponen akan melakukan rendering lagi (render() dipanggil secara otomatis).
State mirip dengan props, tetapi bersifat pribadi dan sepenuhnya dikontrol oleh komponen.
Untuk mengelola status, komponen perlu menjadi komponen kelas, sehingga dapat diinkapsulasi dalam komponen.
State didefinisikan dengan kata kunci state dan diinisialisasi dalam constructor() kelas:
konstruktor() {
super();
{ ... }
}
Mari kita ambil contoh Jam, ada satu persyaratan dasar yang hilang: bahwa komponen Jam diatur
tmer ed memperbarui antarmuka pengguna setiap detik di dalamnya. Dan kemudian memiliki:
[Link](<Orologio/>, [Link]('root'));
Untuk menerapkan ini, kita perlu menambahkan sebuah "status" pada komponen Jam, yang menjadi:
impor React dari 'react';
kelas Orologio memperluas [Link] {
fungsi konstruktor(props) {
super(props);
[Link]
tanggal: new Date()
}
}
render() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMillisecondi);
kembali (
<p> {[Link]()}</p>
)
}
}
ekspor default Orologio;
Metode getTime() adalah metode dari objek Date, sama dengan now(), yang mengembalikan waktu saat ini dalam milidetik.
Kelas ini dialihkan dengan
[Link](<App/>, [Link]('root'));
jadi untuk saat ini waktu ditampilkan dalam cara statis (detiknya tidak berjalan).
SILKULASI DEI COMPONENTI DI UNA CLASSE
Setiap komponen React dicirikan oleh Lifecycle (siklus hidup) di mana kita dapat membedakan tiga fase:
Inisialisasi komponen (Pemasangan)
Pembaruan komponen (render) melalui setState() atau penerimaan Props baru (Mengupdate)
Penghapusan komponen (Unmonting)
Sebuah komponen, dalam siklus hidupnya, menjalankan beberapa metode secara berurutan. Metode-metode ini bertujuan untuk mengelola siklus.
di vita di un componente React e cominciano conwillquando precedono un evento e condidquando seguono un
acara.
Kami memiliki akses ke metode ini yang dapat kami gunakan untuk melakukan tindakan tertentu ketika sebuah komponen dihasilkan.
membuat, memperbarui atau menghancurkan atau, bahkan, memutuskan apakah sebuah komponen harus diubah setelah
perubahan dari setidaknya salah satu properti yang terkandung dalam objek State-nya atau saat menerima Props baru.
Inisialisasi komponen (MOUNTING)
Ilcostrutoreè il primo metodo yang dipanggil untuk inisialisasi yang benar, nilai akan diberikan untuk
default semua props ditetapkan melalui objek defaultProps dan kemudian objek state akan diinisialisasi.
Metode kedua yang dipanggil adalah componentWillMount() yang dipanggil sebelum komponen
venga reindirizzato (metodo render).
React menyarankan untuk menggunakan konstruktor sebagai pengganti metode ini untuk setiap inisialisasi.
- render() adalah satu-satunya metode wajib ketika ingin mendefinisikan sebuah komponen. Harus mengembalikan setidaknya satu React
Elemen atau null atau false, jika kita tidak ingin menampilkan apa pun di layar untuk komponen itu. Harus menjadi sebuah
fungsi murni, tidak boleh mengubah langsung objekpropertisstate.
- ComponentDidMount() adalah metode yang dipanggil setelah render() dieksekusi. Ini adalah metode yang harus digunakan untuk
memanipulasi DOM atau untuk mengambil data dari server.
Pembaruan komponen (MEMPERBARUI)
Pembaruan objek Status
Ketika pembaruan objek State dilakukan, serangkaian metode dipanggil secara berurutan.
Yang pertama adalah shouldComponentUpdate() yang menerima sebagai argumen objek nextProps dan nextState yang
mewakili nilai berikutnya dari oggettoPropse dari oggettoStatee dan mengembalikan nilai boolean. Jika salah,
metode selanjutnya tidak akan dipanggil, secara default mengembalikan true, memungkinkan pembaruan komponen
setiap perubahan pada objek State dan Props. Untuk ini, dapat digunakan untuk menentukan apakah komponen harus
terus diperbarui dengan nilai PropseState yang akan datang. Di dalam metode ini, Anda dapat membandingkan nilai-nilai tersebut.
membandingkan objek State dan Props dengan nextState dan nextProps, sehingga memungkinkan untuk memutuskan apakah melakukan
pembaruan komponen.
-SeshouldComponentUpdate()resttuiscetrue, akan diinvokasi componentWillUpdate(). Di metode ini, tidak ada
persetujuan untuk mengubah objek State melalui [Link](), dapat digunakan untuk menyiapkan komponen
sebelum pembaruan objek State atau objek Props terjadi.
-Setelah metodorender(), componentDidUpdate() dipanggil yang dapat digunakan untuk mengunduh data terbaru
di sebuah server atau untuk beroperasi pada DOM.
Penerimaan Props baru
Bahkan jika sebuah komponen menerima Props baru, hampir metode yang sama akan dipanggil dalam kasus tersebut.
dell'oggeto Negara.
Dalam hal ini kami memiliki metode tambahan: ComponentWillReceiveProps(), yang tidak dipanggil selama fase
inisialisasi sebuah komponen, tetapi selanjutnya, pada saat Props baru diteruskan ke sebuah
komponen. Dapat digunakan untuk memperbarui dan mengubah objek State di dalam suatu komponen jika
Properti baru yang diterima berbeda dari properti objek Props saat ini.
Penghapusan komponent (UNMOUNTING)
Pada tahap pembongkaran komponen, akan dipanggil sebagai satu-satunya metode componentWillUnmount() yang dapat
digunakan untuk operasi seperti membatalkan kemungkinan yang dimulai dalam fungsi componentDidMount() dan lainnya
operasi pemeliharaan yang mencegah kebocoran memori.
MENAMBAHKAN METODE LIFECYCLE KE DALAM KELAS
Dalam contoh kami, kami inginmengatur sebuahtmersetiap kali Orologio dirender di DOM untuk pertama kalinya
(mountng). Kami juga inginbatalkantmersetiap kali DOM yang dihasilkan oleh Orologio dihapus
(melepaskan)
Metode componentDidMount() dijalankan setelah output komponen dirender di DOM.
sebuah titik baik untuk mengatur untmer dan kita implementasikan sebuah metode yang disebut aggiornaTempoche yang akan dipanggil
dari komponen Jam setiap detik:
componentDidMount() {
[Link] = setInterval([Link], 1000);
}
Metode updateWaktu akan:
() => {
[Link]({
new Date()
});
}
Untuk melakukan Update pada state, gunakan metode setState() yang menerima properti dari state yang harus diperbarui.
diperbarui. Dalam kasus ini kami memiliki properti jam, tetapi jika ada yang lain dalam objek [Link]
tidak akan dipertimbangkan.
setState() fa confrontare le proprietà dell’oggetto che riceve con quelle di [Link] e se sono state modificate,
ia menimpa. Dalam kasus kami, properti waktu hanya didefinisikan ulang dengan Date() yang lebih baru,
che setState() membandingkan dengan yang ada di [Link] dan menimpanya.
Dengan cara ini jam berdering setiap detik.
Mari kita ringkas apa yang terjadi dan urutan di mana metode dipanggil:
1 Ketika<Orologio/>dilewatkan [Link](), React memanggil konstruktor komponen yang
[Link] dengan objek yang mencakup waktu saat ini. Selanjutnya state ini diperbarui.
2 React memanggil metode render() dari komponen Jam dan memahami apa yang seharusnya ditampilkan di atas
layar. React mengurus untuk memperbarui DOM agar sesuai dengan output render.
3 Ketika output dari renderisasi Orologio dimasukkan ke dalam DOM, React memanggil metode
componentDidMount(). Di dalamnya, sebuah timer diatur yang memanggil updateTemp setiap detik.
4 Setiap detik, di dalamnya, komponenOrologio melaksanakan pembaruan UI
invocandosetState() dengan objek yang berisi waktu saat ini. Dengan pemanggilan asetState(), React akan
Informasi tentang fakta bahwa statusnya telah berubah dan meminta lagi metode render() untuk mengetahui apa yang harus dilakukan.
ditampilkan di layar. Kali ini, [Link] di dalam metode render() akan memiliki nilai yang berbeda dan keluaran dari
renderisasi akan menyertakan waktu yang diperbarui. React memperbarui DOM sesuai dengan itu.
Jika komponen Jam harus dihapus dari DOM (UNMOUNTED), React akan memanggil metode
componentWillUnmount() adalah di sini kita harus membatalkan timer sehingga membebaskan operasi dari
komponen yang telah dibongkar di DOM:
componentWillUnmount() {
clearInterval([Link]);
}
PENGGUNAAN PROPS DAN STATUS
Singkatnya, kita dapat mengatakan bahwa:
merupakan sekumpulan data yang dimodifikasi yang menghasilkan pembaruan komponen
sama.
Properti: merupakan nilai yang tidak dapat diubah di mana tidak ada modifikasi yang diperbolehkan, berguna untuk
mengonfigurasi komponen atau untuk menunjukkan nilai default untuk status.
MANAGEMENT ACARA
EventReact dideklarasikan seperti pada html, dengan perbedaan bahwa mereka harus memiliki sintaksis:
{[Link]}
Mari kita ambil contoh Jam dan masukkan sebuah tombol yang menghentikan dan memulai kembali waktu.
Kita perlu mengelola keadaan komponen, dan di dalamnya kita inisialisasi sebuah properti start: true:
[Link] = {
new Date()
start: true
}
Dopodiche inseriamo nel return di render() un tag botone:
Hentikan
Untuk menggerakkan tombol ini, Anda perlu memasukkan sebuah acara yang memanggil sebuah fungsi:
<button onClick={[Link]}>Hentikan</button>
Akhirnya kami telah mengimplementasikan jam sehingga setelah komponen dipasang di DOM, bagian
interval setiap detik di componentDidMount() dan kita hapus di componentWillUnmount().
Dalam kasus ini, harus dikelola dengan acara dan fungsi yang memanggil yang jika:
- jamnya terhenti, harus dihidupkan kembali;
- jam TIDAK dihentikan, harus dihentikan dengan membongkarnya.
Kita buat metode start(), dengan setInterval(), dan panggil [Link]() di componentDidMount().
Kita buat metode stop(), dengan clearInterval(), dan panggil [Link]() di componentWillUnmount().
Ketika mendefinisikan sebuah komponen kelas, adalah umum untuk menggunakan metode kelas sebagai pengelola acara:
gestTime() {
[Link]((status) => {
[Link] ? [Link]() : [Link]();
![Link] //negara bertentangan
})
}
setState() menerima sebuah fungsi, yang menerima sebagai parameter state sebelumnya dan mengembalikan state yang berlawanan. Sebelumnya
verifica bahwa jika status adalah start, panggil metode stop() untuk menghentikan jam, jika tidak panggil metode start() untuk memulai
memperbaiki jam.
ikatan
Namun, metode sebelumnya, dengan cara ini, menghasilkan KESALAHAN, karena tidak mungkin membaca setState(). Ini karena
di JavaScript, metode kelas tidak adaasosiasisecara default. Dalam metode gestTime, ilthisappartene kepada metode
sama, tetapi tidak merujuk pada kelas, jadi perlu melakukan binding, yaitu mengaitkan metode dengan kelas.
Il binding va fatonel constructor()con:
[Link] = [Link](this)
dalam kasus kami:
[Link] = [Link](this);
Namun, jika kita memiliki banyak metode, kita harus menulis ini untuk setiap metode di constructor(). Cara lain yang setara.
berada dalam mendeklarasikan metode sebagai fungsi panah:
() => {
[Link]((state) => {
[Link] ? [Link]() : [Link]();
![Link]
})
}
Ini karena, fungsi panah tidak mengimplementasikan this, jadi dalam hal ini this akan merujuk pada kelas.
Jika kita menginginkan tombol dinamis yang berubah berdasarkan status:
<button onClick = {[Link]}>{[Link] ? 'HENTIKAN' : 'MULAI'}</button>
Kelas Jam pada akhirnya akan:
impor React dari 'react';
kelas Orologio memperluas Komponen React {
konstruktor(props) {
super(props);
[Link]
new Date()
start: true
}
}
render() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilidetik);
kembali (
<p>Di {[Link]} {[Link]()} </p>
<button onClick = {[Link]}>{[Link] ? 'STOP' : 'START'}</button>
)
}
() => {
[Link]( {
tanggal baru()
});
}
() => {
[Link]((state) => {
[Link] ? [Link]() : [Link]();
![Link]
})
}
mulai(){
[Link] = setInterval([Link], 1000);
}
henti(){
bersihkanInterval([Link]);
}
komponenDidMount() {
[Link]();
}
componentWillUnmount() {
[Link]();
}
ekspor default Orologio;
ARRAY DI ELEMENTI
Diberikan contoh [Link]:
. . .
<Orologio paese = 'Italia' fusoorario = '0'/>
<Orologio paese = 'Usa' fusoorario = '-6'/>
. . .
kita lihat bahwa hanya mengandung dua elemen <Orologio>, tetapi bisa terjadi bahwa dalam sebuah komponen terdapat banyak elemen
dello stessotpo e per questo possono essere gesttin array di elemented essere implementatdinamicamente.
Di dalam kelas atau di luar kelas, kita mendeklarasikan sebuah variabel array const dan di dalamnya kita akan memasukkan sebanyak benda.
itu adalah elemen, yang akan berisi props dari elemen. Untuk contoh kita:
const clocks = [
{
Italia
0
},
{
Amerika Serikat
-6
}
]
Sekarang untuk mengambil data dari array dan mengimplementasikan elemen <Orologio> secara dinamis, mari kita buat di komponen
kelas sebuah metode yang mengelola dan mengembalikan banyak elemen<Orologio> sebanyak elemen objek.
getOrologi(){
kembali [Link]((jam) => {
return <Orologio negara = {[Link]} zonaWaktu = {[Link]}/>
})
}
Kita menggunakan metode map() yang menjalankan fungsi pada setiap elemen yang diterima dari array yang memanggilnya (clocks).
Akhirnya, kita panggil metode di titik di mana elemen harus dicantumkan, dengan:
{[Link]()}
Dengan cara ini, metode getOrologi() mengembalikan kesalahan, karena untuk setiap elemen dalam array, diharapkan
nilai unik kunci. Seperti ID yang digunakan react untuk membedakan elemen, jadi kita bisa menambahkan nilai id
unico atau menggunakan nilai yang kita yakini unik untuk setiap elemen. Dalam contoh kita, kita dapat menggunakan
negara
getOrologi(){
kembalikan [Link]((jam) => {
kembali <Orologiokey = {[Link]}paese = {[Link]} fusoorario = {[Link]}/>
})
}
File [Link] pada akhirnya akan menjadi:
impor React dari 'react';
impor Orologio dari './Orologio';
jam
{
Italia
0
},
{
AS
-6
}
]
kelas Aplikasi memperluas [Link] {
getOrologi(){
kembali [Link]((jam) => {
kembali <Orologio key={[Link]} paese={[Link]} fusoorario={[Link]}/>
})
}
render() {
kembali (
<div className="App">
<h1>Waktu Saat Ini</h1>
[Link]()
</div>
)
}
}
ekspor default Aplikasi;
ROUTER REACT
ReactRouter adalah sebuah perpustakaan yang memungkinkan untuk membuat aplikasi React dengan beberapa halaman di mana transisi antar halaman berlangsung.
halaman dan yang lainnya terjadi secara dinamis melalui Javascript, tanpa harus memuat ulang halaman setiap kali.
Dalam React, Router hanyalah sebuah komponen yang mengarahkan komponen lainnya.
npm install --save react-router-dom
Nelfile [Link] due component:BrowserRouter,che rinominiamo per semplicitàRoutereRoute.
impor {BrowserRouter sebagai Router, Route} dari 'react-router-dom';
Mari kita bungkus seluruh komponen dengan elemen <Router> dan serangkaian elemen <Route> yang dibungkus dalam sebuah <div>.
Elemen <Route> memiliki atribut path yang menunjukkan URL mana yang harus ditampilkan oleh suatu komponen.
<Router>
<div>
<Route exact path="/" component={Home} />
<Route strict path="/team/" render={() => <h1>Tim</h1>} />
</div>
</Router>
Di Rute Pratca baca URL dan berdasarkan itu alihkan komponen.
Pada elemen pertama <Route> kami telah menggunakan properti exact untuk menunjukkan bahwa komponen harus ditampilkan
Home solo jika nilai dari atribut pathè sama dengan nilai dari properti [Link]. Jika tidak ada
React Router akan menunjukkan komponen Home bahkan untuk path "/team".
Pada elemen <Route> kedua, kami telah menggunakan atribut strict yang akan memastikan bahwa akan ada pencocokan hanya jika
[Link] persis sama dengan "/team/" yaitu hanya jika ada garis miring di akhir.
<Route> juga dapat menerima atribut lain: component, render, children. Dalam ketiga kasus tersebut akan diteruskan ke
komponen atau pada fungsi (render dan children) properti history, location dan match yang merupakan objek.
Propertiakomponenmenentukan komponen yang ingin kita tampilkan jika ada kesesuaian
(komponen yang harus ditampilkan untuk nilai tertentu dari [Link]).
Sebaliknya, kita bisa menggunakan proprenderse jika kita ingin memanggil fungsi tertentu.
Properti anak juga menerima sebuah fungsi yang akan selalu dijalankan.
Komponen <Link> dan <NavLink>
Tentukan rute, dengan Route, mari kita lihat cara menambahkan tautan di dalam aplikasi untuk berpindah dari satu halaman ke halaman lain.
Untuk melakukan refresh browser, Anda harus melakukan hal lain, untuk ini, alih-alih tag <a href=""> (yang melakukan panggilan
al server, memuat ulang halaman), dari HTML, kita menggunakan dua komponen, Link dan NavLink.
Komponen Link menerima dua atribut: toche yang bisa berupa string atau objek ereplace. Untuk memahami bagaimana
fungsi terakhir ini, kita harus mempertimbangkan bahwa React Router menyimpan riwayat halaman dalam memori
visualisasikan. Mari kita bayangkan riwayat sebagai sebuah tumpukan, setiap kali kita mengunjungi sebuah halaman, akan ditambahkan satu baru
elemen di tumpukan. Jika atribut replace dari komponen Tautan adalah true, elemen terakhir akan diganti dengan yang baru.
pilih alih-alih menambahkan yang baru.
impor React, {Komponen} dari 'react';
impor {Link} dari 'react-router-dom';
kelas Tim memperluas Komponen {
render() {
kembali (
<div>
Tim
<Link to="/stagione">Musim 2017</Link>
</div>
);
}
}
ekspor default Tim;
Di dalam komponen Tim, kami memasukkan sebuah Tautan yang akan membawa ke alamat localhost:3000/stagione dan tidak akan
Muat ulang halaman browser.
NavLink adalah versi khusus dari Link. Ia dapat menerima properti seperti activeClassName dan activeStyle.
actveClassName="nomeClasse" memberi satu gaya ketika sebuah tautan aktif.
ConactveStyle kita bisa melewatkan sebuah objek melalui mana kita bisa menentukan gaya yang akan diterapkan
ke elemen NavLink ketika URL saat ini sama dengan nilai atribut 'to' yaitu ketika [Link] adalah
sama dengan jalur yang ditentukan dalam atribut 'to'.
impor React dari 'react';
impor {NavLink} dari 'react-router-dom';
const Nav = () => (
<nav>
<NavLink exact activeClassName="current" to="/">Halaman Utama</NavLink>
<NavLink activeClassName="current" to="/team/">Tim</NavLink>
<NavLink activeStyle={{color: 'green'}} to="/stagione/">Musim</NavLink>
</nav>
);
ekspor default Nav;
REDUX
React adalah sebuah pustaka tampilan, dan bukan tugas React untuk secara khusus mengelola status.
Redux adalah "sebuah wadah untuk status yang dapat diprediksi untuk aplikasi JavaScript". Pada praktiknya, ini adalah sebuah arsitektur untuk
gestone dello statomediante passaggi chiari e ben definit. Redux dapat dihubungkan dengan pustaka manapun
JavaScript, dan bukan hanya React. Redux memungkinkan untuk memisahkan status aplikasi dari React
STATUS APLIKASI
Status adalah sekumpulan kondisi internal atau informasi pada suatu saat tertentu yang menentukan hasil dari
interaksi dengan dunia luar. Aplikasi ini memiliki keadaan awal, dan setiap interaksi pengguna memicu
sebuah tindakan yang memperbarui status. Saat status diperbarui, halaman ditampilkan.
Penyimpanan data aplikasi dalam status komponen baik ketika Anda memiliki
aplikasi dasar React dengan beberapa komponen, tetapi sebagian besar aplikasi nyata akan memiliki jauh lebih banyak
karakteristik dan komponen. Ketika jumlah tingkat dalam hierarki komponen meningkat, manajemen dari
stato menjadi bermasalah dan inilah sebabnya mengapa Redux digunakan.
Sering kali sebuah aplikasi harus mengelola:
data berasal dari server dan disimpan dalam cache lokal;
datgeneratdall’applicazione stessa che devono essere inviatal server;
datche harus tetap lokal untuk menggambarkan misalnya situasi saat ini
antarmuka pengguna atau preferensi yang dinyatakan oleh pengguna.
Pengelolaan data ini kompleks karena kuantitasnya dan karena data ini dapat bervariasi karena berbagai penyebab.
jika kemudian kita mempertimbangkan bahwa perubahan ini dapat terjadi secara asinkron, menjadi semakin kompleks dan adalah
mudah kehilangan kendali atas evolusi keadaan.
FUNGSI MURNI
Fungsi murni adalah fungsi normal dengan dua karakteristik:
1 Diberikan sekumpulan input, fungsi harus selalu mengembalikan output yang sama.
2 Tidak menghasilkan efek samping.
Misalnya, sebuah fungsi adalah yang mengembalikan jumlah dari dua angka.
Fungsi murni memberikan output yang stabil dan bersifat deterministik. Sebuah fungsi menjadi tidak murni ketika menjalankan
sesuatu yang berbeda dari menghitung nilai keuntungannya.
TIGA PRINSIP
Kompleksitas dalam pengelolaan status aplikasi terletak pada kemampuan untuk mengubah dan asinkron. Solusinya adalah
Redux bertujuan untuk menghilangkan kedua aspek ini, berdasarkan pada tiga prinsip dasar:
1 ada satu sumber kebenaran
status keseluruhan aplikasi disimpan dalam satu objek
2 status hanya terbaca
tidak mungkin untuk mengubah informasi yang disimpan dalam status aplikasi secara langsung; hanya
melalui tindakan eksplisit
3 perubahan pada status harus dilakukan dengan fungsi murni
status saat ini digantikan oleh status baru yang dihasilkan dari fungsi yang eksklusif hanya berdasarkan pada sebuah
aksi dan status sebelumnya
Aplikasi dari prinsip-prinsip ini mendefinisikan arsitektur Redux dan batasan yang harus dipatuhi oleh sebuah aplikasi yang
memahami mengelola negara sesuai dengan pendekatan ini.
KEUNGGULAN
Dengan Redux, variasi status dari sebuah aplikasi dapat dianalisis dan direproduksi, dan lebih mudah
memahami bagaimana situasi tertentu terjadi
Redux memaksa untuk mengorganisir kode mengikuti pola tertentu, yang secara tidak langsung mendefinisikan satu
standar di kodifikasi.
Adalah mungkin untuk mendefinisikan sebuah keadaan awal dan memulai aplikasi dari keadaan tersebut, dengan cara ini untuk memfasilitasi
rendering di aplikasi JavaScript dari server
Adalah mungkin untuk melacak transisi status baik untuk debugging maupun untuk menerapkan tindakan.
INSTALASI
Jika kita menggunakan [Link], kita bisa menginstal Redux hanya dengan perintah berikut:
npm install --save redux
yang mengunduh paket npm dari Reduxe menjadikannya tersedia untuk diimpor ke dalam aplikasi.
Jika kita tidak menggunakan lingkungan pengembangan [Link], kita selalu dapat mengunduh perpustakaan [Link] dari
distribuzionedari paket npm dan dengan menyisipkan referensi di dalam halaman HTML aplikasi
<script src="[Link]"></script>
Dalam hal ini Redux akan dapat diakses sebagai variabel global [Link].
KOMPONEN WADAH DAN KOMPONEN PRESENTASI
Ini adalah membagi arsitektur komponen menjadi dua kategori untuk aplikasi React: komponen kontainer
(pintar) e komponen presentasi (bodoh).
Komponen kontainer mengurus bagaimana segala sesuatu berfungsi, sementara komponen presentasi mengurus.
di come appaiono le cose.
Komponen smartgestscono memahami status dan kemudian meneruskannya ke komponen dumb. Mereka bertanggung jawab untuk melakukan efisiensi.
panggilan API, ambil data dari sumber data, olah data kemudian atur status.
Komponen menerima props dan mengembalikan representasi antarmuka pengguna.
Ketika Anda akan menulis komponen baru, tidak selalu jelas di mana menempatkan status. Anda bisa meninggalkan
biarkan status menjadi bagian dari wadah yang merupakan orang tua langsung dari komponen presentasi. Lebih baik
Anda dapat memindahkan status lebih tinggi dalam hierarki sehingga status dapat diakses oleh komponen.
presentasi multpli.
Ketika aplikasi tumbuh, status tersebar di mana-mana. Ketika sebuah komponen perlu mengakses status yang
tidak memiliki akses segera, coba tingkatkan status hingga komponen leluhur terdekat.
Merupakan ide baik untuk membiarkan suatu komponen di bagian atas mengelola status di tingkat global dan kemudian meneruskannya.
Tuto menuju ke bawah. Semua komponen lainnya dapat berlangganan props yang mereka butuhkan dan mengabaikan sisanya.
Potetetrataretuti komponen di React sebagai dumb, sehingga dapat berkonsentrasi hanya pada sisi tampilan dari segala hal.
ARSITEKTUR UMUM REDUX
skema arsitektur yang diusulkan oleh model Redux
Jadi alur umum untuk mengubah status saat ini dari suatu aplikasi mengikuti langkah-langkah berikut:
1 sebuah Acton diidentifikasi, yang mungkin dihasilkan melalui pencipta Acton
2 taleActonviene inviata alloStoretramite unDispatch
3 di dalam Store, sebuah Reducer menggantikan status saat ini dengan status baru yang mungkin ditemukan
berdasarkan analisis Acton
Toko
Store adalah objek besar JavaScript yang mewakili status saat ini dari aplikasi, dan setiap kali status
diperbarui, tampilan diperlihatkan kembali.
Seluruh status aplikasi ada di dalam objek store.
Toko memiliki tiga metode untuk berkomunikasi dengan bagian lain dari arsitektur. Mereka adalah:
[Link]() untuk mengakses pohon status saat ini dari aplikasi.
[Link](action) untuk memicu perubahan status berdasarkan tindakan.
[Link](listener) untuk mendengarkan setiap perubahan dalam status. Akan dipanggil setiap kali
Sebuah tindakan telah dikirim.
Membuat sebuah toko.
Redux memiliki metode createStore untuk membuat store baru.
Menerima sebagai parameter: sebuah reducer dan secara opsional keadaan awal dari store.
[Link]
impor { membuatToko } dari "redux";
const initialState = 0 //initialState (opsional).
const store = createStore(reducer, initialState);
Sekarang kita akan mendengarkan perubahan di store dan kemudian dengan [Link]() status terkini dari store.
[Link]( () => {
[Link]("Status telah berubah" + [Link]());
})
Untuk memperbarui toko Redux, digunakan aksi.
Acton/Pencipta Acton
Leacton sono oggetti JavaScript yang mengirimkan informasi dari aplikasi ke toko. Jika Anda memiliki
simpel penghitung dengan tombol peningkatan, mengetuknya akan mengaktifkan suatu tindakan, yang mirip
ke ini:
{
MENINGKATKAN
1
}
Status toko hanya berubah sebagai respons terhadap suatu tindakan. Setiap tindakan harus memiliki properti tipe (type) yang
deskripsikan apa yang dimaksud dengan tindakan tersebut.
Disarankan untuk menjaga aksi kecil karena mewakili jumlah minimum informasi yang diperlukan untuk
mengubah status aplikasi.
Dalam contoh sebelumnya, properti type diatur ke 'INCREMENT', dan ada tambahan properti yang termasuk.
muatan yang bisa dinamai dengan sesuatu yang lebih bermakna.
Untuk mengirim tindakan ke toko, gunakan [Link](tindakan):
[Link]({type: "INCREMENT", payload: 1});
Selama penulisan kode Redux, biasanya tidak menggunakan aksi secara langsung, tetapi akan dipanggil
fungsi yang mengembalikan aksi yang disebut acton creator.
Pencipta tindakan dari tindakan sebelumnya yang meningkatkan, akan:
const incrementCount = (count) => {
return {
INCREMENT
jumlah
}
}
Jadi, untuk memperbarui status penghitung, perlu mengirimkan tindakan incrementCount seperti ini:
[Link](incrementCount(1));
Sekarang, kita perlu reducer untuk mengubah informasi yang diberikan oleh tindakan dan mengubah status penyimpanan.
Pengurang
Il reducer (ridutore) menggunakan informasi dari acton untuk secara efektif memperbarui status.
Sebuah reducer harus merupakan fungsi murni. Diberikan sekumpulan input, ia harus selalu menghasilkan output yang sama.
Selain itu, dia seharusnya tidak melakukan apa-apa lagi.
pengurang untuk penghitung kita.
const reducer = (state = initialState, action) => {
switch ([Link]) {
kasus "INCREMENT":
kembalikan state + [Link]
default
kembalikan negara
}
}
Reducer menerima dua argumen yaitu state dan action dan mengembalikan state baru.
(previousState, action) => newState
Negara menerima nilai yang telah ditentukan, initialState, yang akan digunakan hanya jika nilai negara adalah
tidak terdefinisi. Sebaliknya, nilai efektif dari negara akan ditahan.
Kita menggunakan switch untuk memilih tindakan yang tepat.
Mari kita tambahkan sebuah case untuk DECREMENT:
const pengurang = (state = keadaanAwal, tindakan) => {
switch ([Link]) {
kasus "INCREMENT":
kembalikan state + [Link]
DECREMENT
kembalikan state - [Link]
default
kembali ke keadaan
}
}
Ini adalah pencipta tindakan
const decrementCount = (count) => {
kembali {
DECREMENT
jumlah
}
}
Akhirnya, itu dikirim ke toko.
[Link](incrementCount(4)); //4
[Link](decrementCount(2)); //2
REDUX DAN REACT
Kami telah melihat bahwa dengan Redux kami mengirimkan aksi dan mengambil status baru menggunakan [Link]() dan
[Link]().
Sekarang kita akan belajar menghubungkan sebuah store Redux dengan React, menggunakan pustaka react-reduxe kita akan melihat
datang
1 mengatur komponen wadah dan komponen presentasi
2 cara menghubungkan react dan redux menggunakan connect()
3cara mengirim aksi menggunakan mapDispatchToProps
4cara memulihkan status menggunakan mapStateToProps
1) Komponen pintar dan komponen bodoh
Sebuah konsep yang sudah dibahas sebelumnya, untuk membagi komponen menjadi dua folder terpisah, satu
denominatocontainerse l'altrocomponents. Keuntungan dari pendekatan ini adalah bahwa logika dipisahkan
dari pandangan.
Komponen pintar, menangani bagian logika, mengalirkan data yang diperlukan untuk melakukan rendering dari
komponen bodoh seperti props.
Sebagai langkah pertama, dalam sebuah proyek, kita bisa mulai membuat seluruh bagian grafis dari React, yaitu
komponen dumb dan selanjutnya, dari ini, buat komponen pintar untuk mengelola logikanya
2) Perpustakaan react-redux
Untuk menghubungkan React ke Redux, perlu menginstal sebuah pustaka tambahan yang disebut react-redux.
npm instal --simpan react-redux
Perpustakaan hanya mengekspor dua API yang perlu diingat, sebuah komponen <Provider/> dan sebuah fungsi dari
urutan lebih tinggi sambungkan()
3) Komponen Penyedia
Seluruh aplikasi harus dapat mengakses store. Redux perlu membuat store dapat diakses.
memberikan seluruh pohon komponen react mulai dari komponen utama. Penyedia memungkinkan untuk
menyampaikan data dari atas ke bawah sambil menambahkan status ke semua komponen.
impor { Penyedia } dari 'react-redux'
[Link](
<Provider store={store}>
<Aplikasi />
</Penyedia>,
[Link]('root')
)
Kita membungkus penyedia di sekitar komponen aplikasi dan dengan demikian keturunan dari komponen memiliki akses
ai dati.
4) Metode connect()
Diberikan toko kepada aplikasi, kita perlu menghubungkan react dengan toko. Satu-satunya
cara untuk berkomunikasi dengan toko adalah dengan mengirimkan aksi dan mengambil status.
connect() memungkinkan untuk menghubungkan React dengan store, dan dengan bantuan dua metode:
mapDispatchToPropsemapStateToProps, untuk memetakan dan mengoper, hanya dispatch dan bagian dari store
tertarik pada komponen dumb React sebagai props.
const mapStateToProps = state => { const mapDispatchToProps = dispatch => {
kembali { return {
prop : [Link] () => dispatch(actionCreator())
} }
} }
ekspor default sambungkan(
mapStateToProps
mapDispatchToProps
) (ComponentDump)
mapStateToProps dan mapDispatchToProps keduanya mengembalikan sebuah objek dan kunci dari objek ini
menjadi prop dari komponen yang terhubung.
- MapStateToProps: menghubungkan bagian dari state Redux ke props sebuah komponen
React. Dengan cara ini, sebuah komponen React yang terhubung akan memiliki akses ke bagian tepat dari store
yang dibutuhkan.
- mapDispatchToProps melakukan sesuatu yang serupa, tetapi untuk aksi: menghubungkan aksi Redux ke props
React. Dalam modul ini, komponen React yang terhubung akan mampu mengirim pesan ke
toko.
Jadi, adalah mungkin untuk menggunakan connect() untuk:
1 mendaftar di toko dan memetakan statusnya ke propertinya
2 mengirim aksi dan memetakan callback dispatch ke props
Setelah menghubungkan aplikasi ke Redux, Anda dapat menggunakan [Link] untuk mengakses status saat ini
dan juga mengirimkan tindakan.
CONTOH REACT-REDUX: RUBRIK
Mari kita lihat sekarang contoh konkret dari aplikasi Buku Telepon dengan karakteristik berikut:
. menampilkan semua kontak
. menambahkan kontak baru
. menghapus kontak
1) Struktur direktori
Membuat proyek baru dengan create reactapp menginstal Redux, Redux tidak tahu bagaimana menyusun
aplikasi, jadi langkah selanjutnya adalah menambahkan beberapa direktori kosong untuk mengorganisir Redux:
komponen: conterrá dan componentdumb di React, yang tidak peduli apakah menggunakan Redux atau tidak.
kontainer: conterrá i componentsmart di React yang mengirimkan tindakan ke toko Redux. Asosiasi antara
redux dan react akan berlangsung di sini.
bertindak: mencegah para pencipta acton.
reducers:setiap reducer memiliki satu file, direktori ini akan menyimpan semua logika reducer.
store: conterrá logika untuk inisialisasi status dan konfigurasi toko.
Model struktur ini cocok untuk aplikasi kecil dan menengah. Ketika aplikasi berkembang, bisa
lebih nyaman untuk mempertimbangkan modelDomain, di mana setiap fungsi akan memiliki direktori untuk dirinya sendiri, dan semua
apa yang berkaitan dengan fungsi tersebut akan ada di dalamnya.
2) Buat bagian tampilan dengan komponen dump
Kita bisa memulai sebuah proyek dengan membuat bagian React dari tampilan dengan komponen-komponen. Kita bisa menggunakan
Bootstrap untuk mempercepat pekerjaan.
Dalam proyek ini, kami membuat aplikasi dengan menu yang memiliki dua item yang, dengan React Router, akan ditampilkan tanpa.
mengisi ulang, halaman daftar kontak yang memiliki formulir untuk menambahkan kontak baru.
3) Inisialisasi toko
Ini adalah praktik yang baik untuk segera membuat sketsa, bahkan dengan kertas dan pena, sebuah skema keadaan, dalam satu objek, dengan
properti yang dibutuhkan.
Setelah itu di direktori Store, kita buat file [Link] dan menginisialisasi store:
const initialState = {
contactList: [],
newContact: {
name
email
tel
}
}
ekspor default initialState;
Toko memiliki dua properti: [Link] adalah array dari kontak, mentrenewContact adalah sebuah
objek yang akan menyimpan sementara data kontak yang akan ditambahkan dari formulir kontak.
4) Pembuatan toko
Untuk membuat toko, di berkas [Link], kita mengimpor createStore dari redux:
import {createStore} dari 'redux'
ini membuat toko yang akan menyimpan pohon status.
Mari kita buat toko dengan:
conststore = createStore(rootReducer, initaliState);
Kami mencatat bahwa ia menerima dua parameter: rootReducer dan status awal initialState (opsional)
Impor initalState yang telah dibuat sebelumnya.
Reducer menggabungkan combineReducers()
Penting untuk diingat bahwa fungsi Reducer tidak mengubah objek State, mereka menerima objek State sebagai input.
koran dan mengembalikan objek baru yang menyatakan bahwa sebuah pengurang harus selalu memiliki nilai yang telah ditentukan untuknya
stato, dan bahwa harus selalu mengembalikan sesuatu (default; mengembalikan state).
Untuk mereka selalu disarankan untuk membuat fungsi Reducer untuk setiap bagian dari objek State dan kemudian menggabungkan tersebut
fungsi dalam satu Reducer, memisahkannya, daripada satu tunggal, untuk meningkatkan keterbacaan kode.
Redux, untuk ini, memiliki metode yang disebutgabungkanReducers()yang memungkinkan untuk membuat lebih banyak reducer dan kemudian menggabungkannya
dalam satu fungsi (rootReducer).
Esso menerima sebagai argumen objek yang memiliki properti reducers yang akan kita buat:
ekspor default gabungkanPengurang(
{
pengurang
}
);
Reducer yang dibuat harus menjadi properti dari combineReducers dan untuk itu harus diimpor.
masukkan nama yang sama dengan properti bagian status yang berkaitan
5) Pembuatan rootReducer
Ini akan menjadi pengurang utama yang akan menggabungkan semua pengurang dalam aplikasi menjadi satu pengurang.
Di direktori reducers, kita membuat file [Link], dengan combineReducers kosong yang akan menggabungkan reducers yang
kami akan menciptakannya nanti.
impor { gabungkanReducer } dari 'redux'
ekspor default gabungkanPengurang(
{
}
)
Dan sekali dibuat, kita mengimpornya ke dalam file [Link] untuk memberikannya ke createStore.
6) Menghubungkan store global dengan Provider
Membuat toko, itu harus tersedia dan dapat diakses dari seluruh aplikasi, di semua file. Untuk melakukannya dan membuatnya
toko global
kita mengimpor komponen Provider dari React Redux dan membungkus komponen App dengannya sambil memberikannya store
impor { Penyedia } dari 'react-redux'
[Link](
<Provider store={store}>
<App />
</Provider>,
[Link]('root')
)
7) Tunjukkan logika dan cara kerjanya
Sampai pada titik ini kita akan menganalisis aplikasi untuk mengelola logika dan fungsi dengan melihat apa yang
componentdump memerlukan akses ke toko, melalui componentsmart, dan membuat yang sesuai
aksi dan pengurang.
Visualisasikan kontak dari toko
Untuk menampilkan kontak dalam toko, kita membuat sebuah kontainer bernama contactListSmart di mana dengan
mapStateToProps kita memetakan bagian state contactsList, dengan nama yang sama contactsList
const mapStateToProps = (state) => {
kembali {
daftarKontak: [Link]
}
}
dopodiché dengan
ekspor default menghubungkan(mapStateToProps, null)(DaftarKontak)
kita mengirim contactsLists sebagai props ke komponen dumb ContactList (yang diimpor).
Container harus diekspor, karena kemudian harus diimpor dan digunakan di [Link] sebagai pengganti
komponen bodoh ContactsList, untuk ditampilkan.
Dengan cara ini, komponen ContactsList hanya akan menerima bagian state yang diperlukan sebagai props.
Menambahkan kontak baru
buat komponen dengan formulir untuk menambahkan kontak baru
localStorage dan sessionStorage: MENYIMPAN DATA DI BROWSER
Sebuah elemen yang memungkinkan kita untuk menyimpan informasi yang relevan untuk penjelajahan situs di dalam browser adalah
icookies. Tetapi masalah terbesar dari cookiese adalah bahwa, untuk mengingat informasi yang disimpan, browser harus
bertukar pesan status dengan server setiap kali halaman baru yang dikunjungi pengguna; fitur ini, terutama
Di sini, mungkin untuk memesan perjalanan atau akomodasi, ini diterjemahkan menjadi pemborosan besar sumber daya yang seharusnya bisa digunakan.
gunakan untuk mempercepat waktu respons situs web.
Berkat kehadiran HTML5, dua objek telah diperkenalkan yang memungkinkan kita menyimpan data yang dikirimkan oleh pengguna.
di dalam browser mereka sendiri: sessionStorage dan localStorage.
Keduanya berbagi sifat dan fungsi yang sama, perbedaan antara keduanya adalah: sessionStorage akan kehilangan semua
ketika jendela browser ditutup.
Sementara itu, semua yang kami simpan di dalam objek localStorage akan dipertahankan di dalam browser dan
akan bertahan bahkan setelah komputer dimatikan.
Di dalam objek ini, kita hanya dapat menyimpan string teks, sama seperti untuk cookie, tetapi pergi ke
Menggunakan localStorage atau sessionStorage memenuhi kebutuhan, tidak akan ada komunikasi yang diperlukan dengan
server karena halaman web dapat menginterogasi langsung browser.
Kita lihat khususnya localStorage, tetapi akan sama untuk sessionStorage.
Untuk menyimpan data, gunakan fungsi setItem("indeks", "nilai"):
setItem() menerima dua parameter. Yang pertama adalah indeks dan akan memungkinkan untuk memanggil kembali nilai yang
kami telah mengatur, yang kedua adalah nilai sebenarnya yang ingin kami simpan di dalam browser.
Questdatpotranno dapat kemudian dilihat di peninspeksi browser
Salvati dat, perrecuperarlisi usa la funzionegetItem(“indice”):
Untuk menghapus data yang disimpan, gunakan fungsi removeItem(indeks).
Parameter lain yang berguna untuk bekerja dengan jenis objek ini adalah:
• panjang- akan memungkinkan untuk mengetahui berapa banyak elemen yang terkandung di dalamnya, indextya mulai dari 0 seperti
untuk array;
• kunci(indeks) - dengan memasukkan nilai numerik dari indeks, itu akan mengembalikan nilai yang disimpan di posisi ini;
MIDDLEWARE
Sampai sekarang kita telah melihat bahwa ilcreateStorericeve menerima dua parameter yang merupakan rootReducer dan status awal. Dia bisa
menerima parameter lain yang memungkinkan untuk mempersonalisasi atau mengganti tindakan toko (dispatch, subscribe,
getState).
Untuk menyesuaikan perilaku sebuah dispatch, digunakan middleware yang merupakan fungsi yang dieksekusi di antara
menyampaikan sebuah aksi dan pemrosesannya oleh reducer. Dalam prakteknya, itu mencegat aksi dan mengambil beberapa
keputusan berdasarkan parameter: dapat meneruskan aksi ke reducer tanpa modifikasi atau membuat dispatch dari aksi itu sendiri.
Kami melihat bahwa, aksi yang diluncurkan oleh [Link]() melalui serangkaian Middleware. Agar agar Aksi
Kirim ke Middleware berikutnya, atau ke Reducer dalam kasus Middleware terakhir, harus memanggil fungsi
next(acton) yang diteruskan oleh Redux ke setiap Middleware.
Dalam Redux sangat penting karena mewakili titik dalam aplikasi di mana mungkin untuk melakukan
aksi asinkron seperti: panggilan API, batas waktu, dll.
Sebuah karakteristik penting, seperti yang terlihat dalam gambar, adalah bahwa beberapa middleware dapat disisipkan secara berantai.
ed dieksekusi dalam urutan satu demi satu.
Dalam tumpukan middleware berantai, ketika dilakukan dispatch, pada dasarnya yang dipanggil adalah yang pertama.
middleware. Secara umum, middleware akan memeriksa apakah tindakan tersebut merupakan tipe spesifik yang menarik perhatiannya, mirip dengan bagaimana
akan menjadi pengurang. Jika itu dari tipe yang benar, bisa menjalankan logika kustom, jika tidak, meneruskan tindakan ke
middleware berikutnya dalam tumpukan.
Berbeda dengan reducer, middleware dapat memiliki efek samping di dalamnya, termasuk jeda dan logika lainnya.
asincrone.
Penggunaan middleware
1) Definisikan fungsi middleware
Untuk menggunakan middleware di Redux, pertama-tama harus mendefinisikan fungsi middleware, yang harus memiliki sebuah
tanda tangan.
// Middleware yang ditentukan menggunakan fungsi panah
const mioMiddleware = store => next => action => {
// tubuh fungsi Middleware
}
// o dengan cara yang setara
fungsi mioMiddleware(toko) {
kembalikan fungsi (selanjutnya) {
kembalikan fungsi (aksi) {
// tubuh fungsi Middleware
};
};
};
Di dalam middleware kita memiliki akses ke Actonlanciata [Link](acton). Kita bisa menggunakan fungsi
selanjutnya (acton) untuk menjalankan Acton sepanjang rantai middleware, akan memanggil middleware berikutnya, jika tidak
Ketika fungsi dipanggil, Aksi tidak diteruskan ke middleware berikutnya.
Di dalam setiap middleware kita juga memiliki akses ke metode [Link]() untuk mengambil objek State
corrente dan [Link]() yang merupakan fungsi dispatch() asli. Dengan menggunakan fungsi ini, kita akan dapat membuat
menelusuri kembali semua rantai middleware yang telah dilalui sebelum middleware saat ini.
2) Memanggil fungsi applyMiddleware()
Setelah mendefinisikan satu atau lebih middleware, kita memanggil fungsi applyMiddleware(...middleware) yang akan kita lewati
membuat middleware
impor { menerapkanMiddleware } dari 'redux';
Kami akan menerapkan fungsi applyMiddleware ke createStore.
const store = createStore(reducer, initialState, applyMiddleware(...middleware));
Merangkum, parametristoreeactonrappresentano masing-masing lostorecorrente dan aksi yang kami
efetuato pengiriman. Parameter berikutnya mewakili middleware berikutnya dalam pipeline sebelum sampai
alreducer. Dalam praktiknya, di dalam middleware kita dapat memanfaatkan store dan action yang sedang berjalan untuk melakukan
pengolahan spesifik dan kemudian meneruskan bola ke middleware berikutnya.
Mari kita lihat kasus konkret tentang bagaimana middleware dapat diterapkan untuk menulis tindakan di konsol
intercetata dan status baru aplikasi:
const logger = store => next => action => {
[Link]('Aksi saat ini: ', action)
biarkan hasil = next(action)
[Link]('Status berikutnya: ', [Link]())
kembalikan hasil
}
Dalam kasus khusus ini, kita menunggu eksekusi middleware berikutnya sebelum menulis ke konsol.
status baru. Jika kita tidak melakukan seperti itu, kita akan mendapatkan status saat ini, bukan yang berikutnya.
Setelah mendefinisikan middleware, kami membuatnya tersedia untuk Redux dengan
impor { buatToko, terapkanMiddleware } dari 'redux'
biarkan toko = buatToko(rootReducer, initialState, terapkanMiddleware(logger));
Ini akan membuat setiap transisi status dilacak di konsol browser:
Jika kita memiliki lebih banyak middleware yang harus dijalankan sebelum reducer, kita dapat melewatinya sebagai parameter dari
fungsi applyMiddleware():
biarkan middleware= terapkanMiddleware(middl1, middl2, middl3);
Urutan eksekusi middleware akan mengikuti urutan di mana fungsi-fungsi diberikan sebagai parameter
adapplyMiddleware().
PANGGILAN ASINKRON DENGAN REACT REDUX
Mari sekarang kita lihat bagaimana melakukan panggilan asinkron ke server dengan React Redux.
Kita dapat mensimulasikan server lokal dengan json-server, yang dapat diunduh dari Npm, dengan data json yang akan disajikan. Begitu sekali
diinstal, perlu dibuat file json untuk dilayani ([Link]) jalankan server dengan:
json-server --watch [Link] --port3005--nc
Sekarang kita harus menghubungkan aplikasi kita untuk membaca data dari server ini.
Akhirnya, kita telah melihat aksi sinkron di mana objek payload dengan data, masuk ke dalam penyimpanan, tetapi dalam kasus ini data
mereka akan berada di server dan oleh karena itu perlu melakukan panggilan asinkron ke server untuk mengambil data.
Untuk mengelola panggilan asinkron, React menggunakan middleware, untuk mempermudah pekerjaan ada beberapa paket di antaranya
redux-promise-middleware. Ini memungkinkan untuk mengelola pencipta aksi asinkron, dengan perbedaan bahwa, dalam ini
dalam hal ini, payload menerima sebuah promise:
const asyncAction = () => ({
JANJI
janji baru(...)
})
Dengan sebuah aksi yang memiliki payload asinkron, middleware mengubah aksi tersebut menjadi aksi tertunda atau aksi
terpenuhi/ditolak, yang mewakili status tindakan asinkron.
Setelah mengunduh paket, di index perlu mengimpornya dan mengirimkannya ke toko:
impor janji dari 'redux-promise-middleware'
const store = createStore(rootReducer, initialState, applyMiddleware(promise));
Untuk berkomunikasi dengan server, kita menggunakan fetch(), atau paket lain, yang memungkinkan pengelolaan panggilan.
asincrone berdasarkan janji
REACT HOOKS
Diperkenalkan dengan React 16.8 dan pada dasarnya ini adalah fungsi yang memungkinkan untuk memasukkan status ke dalam komponen.
fungsi tpo, lebih sederhana daripada yang ditentukan oleh kelas.
gunakanState()
Untuk menambahkan status pada komponen tipe fungsi, gunakan useState yang terlebih dahulu harus diimpor dari
React. useState adalah sebuah fungsi yang didefinisikan dengan:
const[variabel, setVariabel] = useState(nilaiAwal);
yaitu,ini mengembalikan sepasang nilai: nilai status saat ini dan sebuah fungsi yang memungkinkan untuk
memperbaruinya(dispach).
Ini mirip dengan [Link] dari sebuah kelas.
Satu-satunya parameter useState adalah status awalnya.
useEffect()
Katakan kepada React bahwa komponen harus melakukan sesuatu setelah rendering. React akan mengingat fungsi yang diberikan dan
akan menelepon nanti setelah melakukan pembaruan DOM, setiap kali ada perubahan.
Melaksanakan fungsi yang sama componentDidMount, componentDidUpdate, dan componentWillUnmount.