„jQuery“ ir „React“ yra populiarios „JavaScript“ bibliotekos, skirtos priekiniam kūrimui. Nors „jQuery“ yra DOM manipuliavimo biblioteka, „React“ yra „JavaScript“ biblioteka, skirta vartotojo sąsajoms kurti.

Sužinokite, kaip perkelti esamą programą iš „jQuery“ į „React“.

jQuery vs. Reaguoti?

Kalbant apie pasirinkimą tarp „jQuery“ ir „React“, tai priklauso nuo jūsų poreikių ir pageidavimų. Jei ieškote bibliotekos, kurią būtų lengva naudoti ir kurioje būtų didelė bendruomenė, jQuery yra geras pasirinkimas. Bet jei ieškote bibliotekos, kuri labiau tinka plataus masto plėtrai, „React“ yra geresnis pasirinkimas.

Kodėl reikia pereiti iš „jQuery“ į „React“?

Yra keletas priežasčių, kodėl galbūt norėsite perkelti programą iš „jQuery“ į „React“.

  • „React“ yra greitesnis nei „jQuery“.: Jei kalbame apie neapdorotą našumą, „React“ yra greitesnis nei „jQuery“. Taip yra todėl, kad „React“ naudoja virtualų DOM, kuris yra tikrojo DOM „JavaScript“ atvaizdas. Tai reiškia, kad kai vartotojas sąveikauja su React programa, bus atnaujintos tik pakeistos DOM dalys. Tai efektyviau nei visas „jQuery“ DOM manipuliavimas.
    instagram viewer
  • React yra labiau prižiūrimas: Kita priežastis, dėl kurios reikia pereiti prie „React“, yra ta, kad ją lengviau prižiūrėti nei „jQuery“. Taip yra todėl, kad „React“ komponentai yra savarankiški, todėl galite juos lengvai panaudoti pakartotinai. Tai reiškia, kad jei jums reikia pakeisti „React“ komponentą, galite tai padaryti nepaveikdami likusios kodų bazės.
  • React yra labiau keičiamas: Galiausiai, „React“ yra labiau keičiamas nei „jQuery“. Ji naudoja komponentais pagrįstą architektūrą, kuri yra labiau keičiama nei monolitinis „jQuery“ metodas. Tai reiškia, kad prireikus galite lengvai išplėsti ir modifikuoti „React“ programą.
  • „React“ geriau palaiko vienetų testavimą: Kalbant apie vienetų testavimą, „React“ palaiko geresnį nei „jQuery“. Kadangi galite lengvai atskirti „React“ komponentus, lengviau parašyti jų vienetų testus.

Kaip perkelti programą iš „jQuery“ į „React“.

Jei planuojate perkelti programą iš „jQuery“ į „React“, turite atsiminti keletą dalykų. Svarbu žinoti, ko jums reikia norint pradėti, ir gerai suprasti, kaip galite perkelti atskiras programos dalis.

Būtinos sąlygos

Prieš pradėdami perkėlimo procesą, turite atlikti keletą dalykų, kad nustatytumėte dalykus. Pirma, jums reikia sukurti „React“ programą naudojant programą sukurti-reaguoti.

Įdiegę šias priklausomybes, turite sukurti failą pavadinimu index.js tavo src katalogas. Šis failas bus jūsų „React“ programos įvesties taškas.

Galiausiai galite pereiti prie atskirų kodų bazės dalių ir jas atitinkamai atnaujinti.

1. Įvykių tvarkymas

JQuery galite pridėti įvykius prie elementų. Pavyzdžiui, jei turite mygtuką, galite prie jo pridėti paspaudimo įvykį. Kai kas nors spustelėja mygtuką, bus paleista įvykių tvarkytuvė.

$("mygtukas").click(funkcija() {
// ką nors padaryti
});

„React“ įvykius apdoroja skirtingai. Užuot pridėję įvykius prie elementų, apibrėžiate juos komponentuose. Pavyzdžiui, jei turite mygtuką, turėtumėte apibrėžti paspaudimo įvykį komponente:

klasėMygtukastęsiasiReaguoti.Komponentas{
 handClick() {
// ką nors padaryti
 }
 render() {
grąžinti (
<mygtukas onClick={this.handleClick}>
 Paspausk mane!
</button>
 );
 }
}

Čia mygtuko komponente yra handClick() metodo apibrėžimas. Kai kas nors spustelėja mygtuką, šis metodas bus paleistas.

Kiekvienas metodas turi savo privalumų ir trūkumų. „jQuery“ įvykius lengva pridėti ir pašalinti. Tačiau gali būti sunku juos sekti, jei vyksta daug įvykių. Programoje „React“ apibrėžiate įvykius komponentuose, todėl juos lengviau sekti. Tačiau juos pritvirtinti ir nuimti nėra taip paprasta.

Jei naudojate „React“, turėsite atnaujinti kodą, kad galėtumėte naudoti naują įvykių tvarkymo metodą. Kiekvienam įvykiui, kurį norite tvarkyti, komponente turėsite apibrėžti metodą. Šis metodas bus paleistas, kai suaktyvinamas įvykis.

2. Efektai

jQuery galite naudoti .show() arba .hide() metodus elementui rodyti arba slėpti. Pavyzdžiui:

$("#elementas").Rodyti();

React galite naudoti kabliuką useState() būsenai valdyti. Pavyzdžiui, jei norite rodyti arba slėpti elementą, turėtumėte apibrėžti būseną komponente:

importuoti { useState } iš „reaguoti“;
funkcijaKomponentas() {
konst [isShown, setIsShown] = useState(klaidinga);
grąžinti (
<div>
 {rodoma &&<div>Sveiki!</div>}
<mygtukas onClick={() => setIsShown(!isShown)}>
 Perjungti
</button>
</div>
 );
}

Šis kodas apibrėžia isShown būsenos kintamąjį ir setIsShown() funkciją. React turi įvairių tipų kabliukai kuriuos galite naudoti savo programoje, iš kurių vienas yra useState. Kai vartotojas spusteli mygtuką, isShown būsenos kintamasis atnaujinamas ir elementas rodomas tik tada, kai tinka.

„jQuery“ efektus lengva naudoti ir jie gerai veikia. Tačiau jas gali būti sunku valdyti, jei jų turite daug. React efektai yra komponentų viduje, todėl juos valdyti gali būti lengviau, jei ne taip paprasta.

3. Duomenų gavimas

JQuery galite naudoti $.ajax() metodą duomenims gauti. Pavyzdžiui, jei norite gauti kai kuriuos JSON duomenis, galite tai padaryti taip:

$.ajax({
 url: "https://example.com/data.json",
 duomenų tipas: "json",
 sėkmė: funkcija(duomenis) {
 // daryti kažkas su į duomenis
 }
});

Programoje „React“ galite naudoti fetch() metodą duomenims gauti. Štai kaip galite gauti JSON duomenis naudodami šį metodą:

atnešti ("https://example.com/data.json")
 .tada (atsakymas => response.json())
 .tada (duomenys => {
 // daryti kažkas su į duomenis
 });

„jQuery“ metodą $.ajax() lengva naudoti. Tačiau gali būti sunku valdyti klaidas. Programoje „React“ metodas „fetch()“ yra išsamesnis, tačiau lengviau tvarkyti klaidas.

4. CSS

JQuery galite nurodyti CSS pagal puslapį. Pavyzdžiui, jei norite sukurti visų puslapio mygtukų stilių, tai galite padaryti taikydami mygtuko elementą:

mygtukas {
 fono spalva: raudona;
 spalva: balta;
}

React galite naudoti CSS įvairiais būdais. Vienas iš būdų yra naudoti įterptus stilius. Pavyzdžiui, jei norite sukurti mygtuko stilių, tai galite padaryti pridėdami stiliaus atributą prie elemento:

<mygtuko stilius={{fono spalva: 'raudona', spalva: 'baltas'}}>
 Paspausk mane!
</button>

Kitas būdas sukurti React komponentų stilių yra visuotinių stilių naudojimas. Visuotiniai stiliai yra CSS taisyklės, kurias apibrėžiate už komponento ribų ir taikote visiems programos komponentams. Norėdami tai padaryti, galite naudoti CSS-in-JS biblioteką, pavyzdžiui, stiliaus komponentus:

importuoti stiliaus iš „stiliuotieji komponentai“;
konst Mygtukas = stilizuotas.mygtukas`
 fono spalva: raudona;
 spalva: balta;
`;

Nėra teisingo ar neteisingo pasirinkimo tarp eilinių ir visuotinių stilių. Tai tikrai priklauso nuo jūsų reikalavimų. Paprastai įterptus stilius lengviau naudoti mažiems projektams. Didesniems projektams geresnis pasirinkimas yra pasauliniai stiliai.

Lengvai įdiekite savo „React“ programą

Vienas iš svarbiausių „React“ pranašumų yra tai, kad labai lengva įdiegti „React“ programą. Galite įdiegti „React“ bet kuriame statiniame žiniatinklio serveryje. Jums tereikia sukompiliuoti kodą naudodami tokį įrankį kaip „Webpack“, tada gautą failą „bundle.js“ įdėti į savo žiniatinklio serverį.

Taip pat galite nemokamai priglobti savo „React“ programą „GitHub“ puslapiuose.