Yhden sivun sovellus

Yksisivuinen sovellus on sovellus, joka lataa yhden HTML-sivun ja kaikki tarvittavat resurssit (kuten JavaScript ja CSS), joita tarvitaan sovelluksen suorittamiseen. Vuorovaikutukset sivun tai sitä seuraavien sivujen kanssa eivät vaadi paluumatkaa palvelimelle, mikä tarkoittaa, että sivua ei ladata uudelleen.

Vaikka voit rakentaa yhden sivun sovelluksen Reactiin, se ei ole vaatimus. Reactia voidaan käyttää myös parantamaan olemassa olevien verkkosivustojen pieniä osia lisäämällä vuorovaikutteisuutta. React-ohjelmassa kirjoitettu koodi voi olla rauhassa rinnakkain PHP: n kaltaisella palvelimella renderoidun merkinnän kanssa tai muiden asiakaspuolen kirjastojen kanssa. Itse asiassa Reactia käytetään juuri näin Facebookissa.

ES6, ES2015, ES2016 jne.

Kaikki nämä lyhenteet viittaavat ECMAScript Language Specification -standardin uusimpiin versioihin, jonka JavaScript-kieli on toteutettu. ES6-versio (tunnetaan myös nimellä ES2015) sisältää monia lisäyksiä aiempiin versioihin, kuten nuolitoiminnot, luokat, mallilitraalit,letjaconst-lausekkeet. Lisätietoja tietyistä versioistaon täällä.

Koostajat

JavaScript-kääntäjä ottaa JavaScript-koodin, muuntaa sen ja palauttaa JavaScript-koodin eri muodossa. Yleisin käyttötapaus on ES6-syntaksin ottaminen ja sen muuttaminen syntaksiksi, jonka vanhemmat selaimet pystyvät tulkitsemaan.Babelon kääntäjä, jota käytetään yleisimmin Reactin kanssa.

Niputtimet

Pakkaajat ottavat JavaScript- ja CSS-koodin, jotka on kirjoitettu erillisiksi moduuleiksi (usein satoja), ja yhdistävät ne yhteen muutamaan selaimille paremmin optimoituun tiedostoon. Joitakin React-sovelluksissa yleisesti käytettyjä nippuja ovatWebpackjaSelainvahvistus.

Pakettien ylläpitäjät

Pakettien hallinta on työkalu, jonka avulla voit hallita riippuvuuksia projektissasi.npmjaLankaovat kaksi React-sovelluksissa yleisesti käytettyä paketinhallintaohjelmaa. Molemmat ovat saman npm-pakettirekisterin asiakkaita.

CDN

CDN on lyhenne sanoista Content Delivery Network. CDN: t toimittavat välimuistissa olevaa, staattista sisältöä palvelinverkosta ympäri maailmaa.

JSX

JSX on JavaScriptin syntaksilaajennus. Se on samanlainen kuin mallikieli, mutta sillä on täysi JavaScript-teho. JSX kääntyyReact.createElement()puheluihin, jotka palauttavat tavalliset JavaScript-objektit, joita kutsutaan "React elements". Saat JSX: nperustiedot tutustumalla täältä oleviin asiakirjoihinja täältäperusteellisempaan oppaaseen JSX: stä.

const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);

alkuaineet

React-elementit ovat React-sovellusten rakennuspalikoita. Voidaan sekoittaa elementit laajemmin tunnettuun "komponenttien" käsitteeseen. Elementti kuvaa mitä haluat nähdä ruudulla. Reaktioelementit ovat muuttumattomia.

const element = <h1>Hello, world</h1>;

Tyypillisesti elementtejä ei käytetä suoraan, mutta ne palautetaan komponenteista.

Komponentit

React-komponentit ovat pieniä, uudelleenkäytettäviä koodinpaloja, jotka palauttavat sivulle renderöitävän React-elementin. React-komponentin yksinkertaisin versio on yksinkertainen JavaScript-funktio, joka palauttaa React-elementin:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Komponentit voivat olla myös ES6-luokkia:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Komponentit voidaan erottaa erillisiksi toiminnallisiksi paloiksi ja käyttää muissa komponenteissa. Komponentit voivat palauttaa muita komponentteja, taulukoita, merkkijonoja ja numeroita. Hyvä nyrkkisääntö on, että jos jotakin käyttöliittymän osaa käytetään useita kertoja (painike, paneeli, avatar) tai se on riittävän monimutkainen yksin (sovellus, FeedStory, kommentti), on hyvä ehdokas olla uudelleenkäytettävä komponentti . Komponenttien nimien tulisi myös alkaa aina isolla kirjaimella (<Wrapper/>ei<wrapper/>). Katsotästä dokumentaatiostalisätietoja komponenttien renderoinnista.

props

propsovat tuloja React-komponenttiin. Ne ovat tietoja, jotka välitetään vanhemmalta komponentilta alikomponentille.

Muista, ettäpropsovat vain luku -muodossa. Niitä ei saa muuttaa millään tavalla:

// Wrong!
props.number = 42;

Jos sinun on muutettava jotakin arvoa käyttäjän syötteen tai verkkovasteen perusteella, käytä sen sijaanstate.

props.children

props.childrenon saatavana jokaiselle komponentille. Se sisältää komponentin avaavan ja sulkevan tunnisteen välisen sisällön. Esimerkiksi:

<Welcome>Hello world!</Welcome>

MerkkijonoHello world!on käytettävissä kohdassaprops.childrenkomponentissaWelcome:

function Welcome(props) {
  return <p>{props.children}</p>;
}

Luokkiksi määriteltyjen komponenttien osalta käytäthis.props.children:

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

state

Komponentti tarvitseestate, kun osa siihen liittyvistä tiedoista muuttuu ajan myötä. EsimerkiksiCheckboxkomponentti saattaa tarvitaisCheckedtilassaan, jaNewsFeedkomponentti saattaa haluta seurata tilaafetchedPoststilassa.

Tärkein erostate: n japrops: n välillä on se, ettäpropssiirretään pääkomponentista, mutta komponenttiastatehallinnoi itse komponentti. Komponentti ei voi muuttaa senprops, mutta se voi muuttaa senstate.

Kutakin muuttuvaa dataa varten tulisi olla vain yksi komponentti, joka "omistaa" sen tilassa. Älä yritä synkronoida kahden eri komponentin tilaa. Sen sijaannosta se ylöslähimmän jaetun esi-isänsä luo ja välitä se molemmille rekvisiitiksi.

Elinkaarimenetelmät

Elinkaarimenetelmät ovat mukautettuja toimintoja, jotka suoritetaan komponentin eri vaiheiden aikana. Käytettävissä on menetelmiä, kun komponentti luodaan ja lisätään DOM: iin (kiinnitys), kun komponentti päivittyy ja kun komponentti irrotetaan tai poistetaan DOM: sta.

Hallittuvs.Hallitsematon komponentti

Reactilla on kaksi erilaista lähestymistapaa lomakesyötteiden käsittelyyn.

Syöttömuotoelementtiä, jonka arvoa ohjaa React, kutsutaanohjatuksi komponentiksi. Kun käyttäjä syöttää tietoja hallittuun komponenttiin, muutostapahtumakäsittelijä laukaistaan ​​ja koodisi päättää, onko syöte kelvollinen (renderöimällä uudelleen päivitetyllä arvolla). Jos et renderöi uudelleen, lomake-elementti pysyy muuttumattomana.

hallitsematon komponenttitoimii kuten muotoelementitkin Reactin ulkopuolella. Kun käyttäjä syöttää tietoja lomakekenttään (syöttöruutu, avattava valikko jne.), Päivitetyt tiedot heijastuvat ilman, että React tarvitsee tehdä mitään. Tämä tarkoittaa kuitenkin myös sitä, että et voi pakottaa kenttää olemaan tietty arvo.

Useimmissa tapauksissa sinun tulee käyttää valvottuja komponentteja.

Näppäimet

"Avain" on erityinen merkkijonoattribuutti, joka sinun on sisällytettävä luodessasi elementtiryhmiä. Avaimet auttavat reagoimaan tunnistamaan, mitkä kohteet ovat muuttuneet, lisätty tai poistettu. Taulukon sisällä oleville elementeille tulisi antaa avaimet, jotta elementit saisivat vakaan identiteetin.

Avainten on oltava ainutlaatuisia vain saman ryhmän matriisissa. Niiden ei tarvitse olla ainutlaatuisia koko sovelluksessa tai edes yksittäisessä komponentissa.

Älä välitä näppäimille jotainMath.random(). On tärkeää, että avaimilla on "vakaa identiteetti" uudelleentoiminnoissa, jotta React voi määrittää, milloin kohteita lisätään, poistetaan tai järjestetään uudelleen. Ihannetapauksessa avainten tulisi vastata yksilöiviä ja vakaita tunnuksia, jotka ovat peräisin tiedoistasi, kutenpost.id.

Viitteet

React tukee erityistä määritettä, jonka voit liittää mihin tahansa komponenttiin.ref-attribuutti voi ollaReact.createRef()-funktiontai takaisinsoittofunktion tai merkkijonon (vanhassa sovellusliittymässä) luoma objekti. Kunref-attribuutti on takaisinsoittofunktio, funktio vastaanottaa argumenttina alla olevan DOM-elementin tai luokan ilmentymän (elementin tyypistä riippuen). Tämä antaa sinulle suoran pääsyn DOM-elementtiin tai komponentti-ilmentymään.

Käytä viitteitä säästeliäästi. Jos huomaat usein käyttävänne viitteitä sovelluksen "tapahtumien toteuttamiseksi", harkitse tutustumistaylhäältä alas -tietovirtaan.

Tapahtumat

Tapahtumien käsittelyssä React -elementteillä on joitain syntaktisia eroja:

• Reapahtumien käsittelijät on nimetty pienillä kirjaimilla pikemminkin kuin camelCase.
• JSX: llä välität funktion tapahtumakäsittelijänä merkkijonon sijasta.

Sovinto

Kun komponentin rekvisiitta tai tila muuttuu, React päättää, tarvitaanko todellinen DOM -päivitys, vertaamalla juuri palautettua elementtiä aiemmin muodostettuun elementtiin. Kun ne eivät ole samat, React päivittää DOM: n. Tätä prosessia kutsutaan "sovinnoksi".