Bagaimana untuk menggunakan jquery dalam bertindak balas

React ialah perpustakaan JavaScript sumber terbuka yang dibangunkan oleh Facebook untuk membina antara muka pengguna. Ia mengguna pakai model pembangunan berasaskan komponen, yang membolehkan pembangun membahagikan UI kepada komponen bebas yang boleh digunakan semula dan mengemas kini setiap komponen mengikut keperluan, dengan itu meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod. jQuery ialah perpustakaan JavaScript yang menyediakan API yang lebih mudah untuk mengendalikan dokumen HTML, mengendalikan acara, mencipta animasi, melaksanakan AJAX dan fungsi lain. Artikel ini akan meneroka cara untuk menggunakan jQuery dalam React.

Terdapat dua cara utama untuk menggunakan jQuery dalam projek React:

1. Gunakan npm untuk memasang jQuery, dan kemudian memperkenalkannya ke dalam komponen

Pertama , anda perlu Gunakan npm untuk memasang jQuery dalam terminal Perintahnya adalah seperti berikut:

npm install jquery --save

Selepas pemasangan selesai, masukkannya ke dalam komponen yang perlu menggunakan jQuery seperti berikut:

import $ from 'jquery';

<. 🎜> Kemudian anda boleh menambahkannya pada fungsi kitaran hayat komponen Gunakan API jQuery untuk melaksanakan operasi DOM biasa. Sebagai contoh, anda boleh mengikat acara klik pada butang melalui kod berikut selepas komponen dipaparkan:

componentDidMount() {
  $(this.refs.myBtn).on('click', function() {
    console.log('button clicked');
  });
}

Perlu diingatkan bahawa memandangkan React menggunakan DOM maya, jika anda terus menggunakan jQuery untuk menukar DOM, React akan Keadaan dan DOM tidak disegerakkan, jadi kaedah setState yang disediakan oleh React harus digunakan untuk menukar keadaan, dan kemudian React akan memaparkan semula halaman.

Perkenalkan perpustakaan jQuery di public/index.html

Jika perpustakaan jQuery telah diperkenalkan di public/index.html apabila projek dibuat, maka dalam komponen Anda boleh terus menggunakan simbol $ untuk melaksanakan operasi jQuery tanpa pengenalan dan pemasangan tambahan.

Sebagai contoh, kod berikut boleh mengikat acara klik pada butang selepas komponen dipaparkan:

componentDidMount() {
  $(this.refs.myBtn).on('click', function() {
    console.log('button clicked');
  });
}

Perlu diambil perhatian bahawa walaupun kaedah ini kelihatan lebih mudah, ia tidak sesuai untuk Aplikasi React adalah lebih baik untuk tidak menggunakan pendekatan ini kerana ia memintas DOM maya React.

Ringkasan:

React dan jQuery ialah dua pustaka yang berbeza sama sekali. Ia direka untuk keperluan berbeza bagi pembangun bahagian hadapan . Walau bagaimanapun, dalam beberapa kes tertentu, seperti apabila operasi kompleks pada DOM perlu dilakukan, menggunakan jQuery mungkin lebih mudah. Apabila menggunakan jQuery dalam React, sila ambil perhatian bahawa walaupun anda boleh menggunakan API jQuery untuk operasi DOM biasa, untuk tidak memusnahkan ciri berasaskan komponen React, anda harus menggunakan kaedah setState yang disediakan oleh React untuk menukar keadaan dan memberikan semula halaman itu apabila boleh.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan jquery dalam bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!