10 ReactJS-asiantuntijavinkkiä, jotka sinun on tiedettävä tänään

Asiantuntija ReactJS-vinkkejä

React on kasvanut yhdeksi suosituimmista työkaluista, joita löytyy verkkokehittäjien kirjastosta, mutta kuten kaikki, sinun on opittava käyttämään sitä oikein, jotta saat kaiken irti.

Jos kamppailet Reactin kanssa, sinulla on onnea. Kun olemme koonneet valikoiman tärkeitä tekniikoita, jotka parantavat koodilähtöäsi. Lue lisää siitä, miten saat kaiken irti kehyksestä. Haluatko luoda sivuston ilman koodausta? Käytä verkkosivujen rakentaja . Ja jos olet huolissasi sivustosi tarpeiden ylläpitämisestä, kunnollinen sivujen ylläpito palvelu voi tukea sinua.



01. Korkeamman tilauksen komponentit

Komponentit jakavat usein toimintoja keskenään, kuten kirjaamista tai verkkopyyntöjä. Näitä voi olla vaikea ylläpitää tätä logiikkaa käyttävän määrän kasvaessa. Kehittäjiä kehotetaan tiivistämään jaettu koodi ja sisällyttämään se tarvittaessa.



Tavallisessa JavaScript-sovelluksessa käsite a ylempi määräys toiminto on yksi tapa lähestyä sitä. Lyhyesti sanottuna ne ovat toimintoja, jotka ottavat muita toimintoja argumentteina ja antavat käyttäytymistä niihin. Matriisimenetelmät, kuten kartta ja suodattaa ovat esimerkkejä näistä.

Korkeamman asteen komponentit (HOC) ovat Reactin tapa saavuttaa sama asia. Ne ovat komponentteja, jotka antavat käyttäytymistä ohitetulle komponentille.



const Logger = WrappedComponent => ( class Logger extends Component { componentDidMount() { console.log(‘mounted’); } render() { return } } ); export default Logger(MyComponent);

Tässä tässä esimerkissä funktio palauttaa uuden käärityn komponentin, joka tekee alkuperäisen, joka siirrettiin kaikkien rekvisiitojen rinnalle. HOC: t ovat säännöllisiä komponentteja, ja ne voivat tehdä mitä vain voi, kuten kuljettaa omat rekvisiittaansa ja kytkeä elinkaaren takaisinkutsuihin. Toiminto kääri sitten alkuperäisen viennissä. Käyttämällä HOC: ita se helpottaa yleisesti käytettyjen koodinpalojen ylläpitoa ja testaamista. Kun tarvitaan erityisiä toimintoja, ne on helppo pudottaa, turvallisesti tietäen, että se käyttäytyy odotetusti.

02. Kontti- ja esittelykomponentit

kalenterin käyttöliittymä

Monimutkaisille käyttöliittymille, kuten kalenterille, on hyväksyttävää sijoittaa säilö esityskomponenttiin, kunhan niiden käyttäytyminen pysyy erillisenä

Aina on tärkeää pitää huolta toisistaan ​​sovelluksen eri osia kehitettäessä. Pidä mahdollisuuksien mukaan tietojen noutomenetelmät poissa niiden näyttötavasta. React-ohjelmassa käytetään samanlaista käsitettä kontti- ja esityskomponenteissa.



musta perjantai macbook pro tarjoukset 2015
class ProductsContainer extends Component { [...] componentDidMount() { fetchProducts() .then(products => this.setState({products})); } render() { return ; } }

Täältä tuotteet haetaan ulkoisella menetelmällä astian sisälle, pidetään omassa varastossaan ja siirretään sitten rekvisiitta esittelykomponentille. Tuotteet joka näyttää ne.

Säilön komponentti ei osaa näyttää tietoja, se osaa vain hakea ja säätää niitä. Samoin esityskomponentti ei tiedä mistä data on peräisin. Kummankin komponentin toimivuus voi muuttua vaikuttamatta toiseen.

Sovelluksessa voi olla toinen osa tai erillinen sovellus kokonaan - joka voi käyttää samaa esityskomponenttia. Kun se toimii vain rekvisiitassa, jokaisen sovelluksen osan tarvitsee vain luoda oma kontti sen ympärille.

Tämä lähestymistapa helpottaa myös yksikkötestausta. Säiliötestien täytyy vain huolehtia asetetusta tilasta, kun taas esityskomponentille voidaan siirtää staattisia rekvisiitta ennustettavan tuloksen saavuttamiseksi.

03. Virherajat

Ei ole väliä kuinka hyvin projekti on koottu, virheet löytävät kuitenkin tien sisään. Ne voivat tapahtua hyvin erityisissä olosuhteissa, niitä on vaikea diagnosoida ja jättää sovellus epävakaaseen tilaan - ehdoton painajainen sekä käyttäjille että kehittäjille.

React v16 julkaistiin takaisin syyskuussa 2017. Osana tätä päivitystä käsittelemättömät virheet puraisivat nyt koko sovelluksen. Tämän torjumiseksi otettiin käyttöön virherajojen käsite. Kun komponentissa tapahtuu virhe, se kuplii vanhempiensa kautta, kunnes se joko osuu sovelluksen päähakemistoon, josta se puretaan, tai löytää komponentin, joka käsittelee virheen. Ajatus virherajasta on yleinen komponentti, joka huolehtii virheistään lapsilleen.

componentDidCatch(error, info) { this.setState({ error: error.message }); } render() { return this.state.error ? : this.props.children; }

Liittämällä uusi elinkaarimenetelmä virhe voidaan tallentaa tilassa ja korvata lapsen sisältö. Tämä sulkee tehokkaasti tämän sovelluksen haaran muusta.

Rajat toimivat kuten try / catch lohkot. Ne voidaan sijoittaa sisäkkäin ongelmitta, mutta niiden sisällä esiintyvät virheet jäävät kiinni seuraavaan rajaan asti. On parasta, että ne pidetään mahdollisimman yksinkertaisina.

04. Portaalit

Portaalin sisältö näkyy alkuperäisen komponentin sisällä Reactissa

Portaalin sisältö näkyy alkuperäisen komponentin sisällä Reactin DevTools-sovelluksessa

Toisinaan komponentin on irrotettava vanhemmistaan ​​ollakseen muualla DOM: ssa. Esimerkiksi modaaliset ikkunat kuuluvat sivun ylimmälle tasolle, jotta vältetään z-indeksin ja paikannuksen ongelmat.

Portaalit ovat myös osa versiota 16, jonka avulla React voi renderoida komponentit DOM-solmuihin täysin erillään muusta sovelluksesta. Sisältö säilyttää paikkansa Reactin rakenteessa, mutta tekee sen muualla. Tämä tarkoittaa sitä, että kaikki portaalin sisällä laukaistavat tapahtumat kuplivat vanhemman kautta Reactissa pikemminkin kuin itse portaalin konttielementtiin.

ReactDOM.createPortal( this.props.children, document.getElementById(‘modal’), );

Luomalla oma komponentti, portaali voidaan palauttaa renderöintitoiminnon avulla. Kun sisältö on näytettävä, se voidaan kääriä tähän komponenttiin ja näyttää sitten toisessa elementissä.

05. CSS tyylikkäillä komponenteilla

oletus ja ensisijainen Reactjs

Komponenteille annetaan satunnaistettu className, joka sopii tyyliin, mikä valitettavasti voi vaikeuttaa uudelleenmuotoilua DevTools-sovelluksessa

Sovelluksen muotoilu uudelleenkäytettävillä komponenteilla voi johtaa luokkien nimien ristiriitaisuuteen. BEM: n kaltaiset yleissopimukset auttavat lieventämään ongelmaa, mutta niiden tavoitteena on pikemminkin hoitaa oireita kuin ongelmaa.

Komponentit voivat ottaa vastuun omista tyylistään. Tämä tarkoittaa, että heillä on tapa säätää grafiikkaa lennossa tarvitsematta sisäisiä tyylejä tai luokan vaihtoja. Yksi tällainen ratkaisu on tyylitetyt komponentit , joka käyttää JavaScriptiä hyödyksi.

Kuten nimestä voi päätellä, se luodaan classNamesin sijaan pikemminkin uusia valmiita komponentteja. Järjestelmä käyttää ES2015-koodattuja mallilitraaleja, jotka voivat hyväksyä tavallisen CSS: n ja soveltaa sitä pyydettyyn elementtiin.

const Button = styled.button` font-size: 2rem; background: ${props => props.primary ? ‘#3CB4CB’ : ‘white’}; `;

Paikkamerkkiä käyttämällä tyyliä voidaan muuttaa dynaamisesti. Tässä esimerkissä painikkeen tausta muuttuu sen mukaan, siirretäänkö painike a ensisijainen potkuri Mitä tahansa lauseketta voidaan käyttää tässä tarvittavan tyylin laskemiseen.

Luotua komponenttia voidaan käyttää aivan kuten mitä tahansa muuta ja kaikki rekvisiitta kulkee läpi. Mukautetut komponentit voidaan myös muotoilla samalla tavalla käyttämällä tyylillä (komponentin nimi) sen sijaan.

06. React-spesifisen nukkauksen käyttö

Visual Studio -koodi

Koodieditorit, kuten Visual Studio Code, voivat integroitua nukkujen kanssa ja antaa käyttäjille reaaliaikaista palautetta komponenttien kirjoittamisen aikana

Yksi parhaista tavoista pitää koodi puhtaana on käyttää sintraustyökalua. He määrittelevät joukon sääntöjä, joita koodin tulisi noudattaa, ja korostavat sen, missä se epäonnistuu. Varmistaen, että kaikki koodit läpäisevät nämä säännöt ennen sulautumista koodipohjaan, projektit pysyvät ylläpidettävinä ja koodin laatu paranee.

ESLint on suosittu suodatin useille JavaScript-projekteille. Saatavilla on laajennuksia, jotka analysoivat tiettyjä koodityylejä. Yksi yleisimmistä
React on npm-paketti nimeltä eslint-plugin-reagoi .

Oletusarvoisesti se tarkistaa useita parhaita käytäntöjä, ja säännöt tarkistavat asioita iteraattoreiden avaimista täydelliseen potkurityyppiin. Lisää vaihtoehtoja voidaan ottaa käyttöön projektikohtaisesti päivittämällä .eslintrc-määritystiedosto.

Toinen suosittu laajennus on eslint-plugin-jsx-a11y , joka auttaa ratkaisemaan yleisiä esteettömyysongelmia. Koska JSX tarjoaa hieman erilaista syntaksia kuin tavallinen HTML, ongelmat liittyvät kaikki teksti ja tabindex Esimerkiksi tavalliset laajennukset eivät noudata sitä. Se myös ottaa esiin React-kohtaisia ​​kysymyksiä, kuten määrittämisen ilmaa rekvisiitta eri syntaksilla.

07. Yksittäiskuvien testaus Jestin kanssa

On

Jest näyttää tarkalleen, mikä on muuttunut kahden tilannekuvan välillä, mikä voi auttaa tunnistamaan tahalliset muutokset tahattomista

Vaikka täydellä testikattavuudella on ilmeisiä etuja, se maksaa. Kun kirjoitetaan paljon pieniä komponentteja, testien koodaaminen voi kestää kauemmin kuin itse komponentti. Suurimman osan ajasta on todellakin tarpeen tarkistaa vain, ettei mikään ole muuttunut.

Jest on Facebookin luoma testauskehys. Yksi sen ainutlaatuisista ominaisuuksista antaa kehittäjille mahdollisuuden kaapata komponentin näkymä kerrallaan ja verrata sitä tuleviin muutoksiin. Muutokset - tahalliset tai ei - merkitään joko hyväksymistä tai hylkäämistä varten. Testit muuttuvat nopeasti, ennustettaviksi ja helposti debugattaviksi, kun on helppo nähdä tarkalleen, mikä muuttui.

nvidia quadro m2000 4g korkea profiili (dpx4)
test('Button renders', () => { const button = renderer .create(Button) .toJSON(); expect(button).toMatchSnapshot(); });

Kun testi suoritetaan ensimmäisen kerran, Jest muuntaa näkymän JSONiksi ja tallentaa sen erityiseen hakemistoon, joka voidaan sitouttaa lähteen hallintaan. Kun se seuraavan kerran suoritetaan, se tarkistaa tiedoston ja merkitsee mahdolliset erot. Jos muutos oli tarkoituksellinen, tilannekuva korvataan ja testi läpäisee. Lue lisää Jest- ja snapshot-testauksista .

08. Koodin jakaminen

Kuten minkä tahansa yhden sivun sovelluksen kohdalla, kaikki niputetaan yhdeksi tiedostoksi, joka voi nopeasti kukkia, ellei sitä pidetä kurissa. Webpackin kaltaiset työkalut voivat auttaa jakamaan tämän paketin hallittavampiin paloihin, joita voidaan sitten pyytää tarvittaessa.

Koska React kannustaa luomaan paljon pienempiä komponentteja, on paljon mahdollisuuksia hajottaa nippu. voidaan ladata uudelleen paketin avulla komponentti voi määritellä tarkalleen, mitä sen on hahmoteltava, ja Webpack voi jakaa sen automaattisesti sen mukaan.

const LoadableButton = Loadable({ loader: () => import(‘./Button’), loading: () => Loading... , });

Ladattava on HOC, joka tuo dynaamisesti kaiken komponentin tarvitseman. Se vaatii muutaman asetuksen, kuten mitä näytetään, kun kaikki latautuu, mikä tekee siitä erittäin muokattavissa. Ladattava painike voidaan sitten käyttää tavallisena komponenttina ongelmitta.

Suuremmissa sovelluksissa, joissa on reititys, voi olla edullisempaa jakaa reitti komponentin sijaan. Yhteiset polut voidaan vetää yhdellä pyynnöllä, ja ne voivat auttaa nopeuttamaan asioita. On tärkeää, että nippujen lukumäärä ja niiden koko ovat tasapainossa, mikä muuttuu sovelluksen tarpeiden mukaan.

toiminnan tallentaminen photoshop cc: hen

Lisätietoja voidaan ladata uudelleen voidaan löytää tässä .

09. Palvelimen hahmontaminen

Suurilla sovelluksilla käyttäjät voivat katsoa tyhjää näyttöä, kun sivusto latautuu. Ihannetapauksessa sen pitäisi olla mahdollisimman pieni. Renderoimalla aloitusnäkymä palvelimelle, havaittua latausaikaa voidaan lyhentää, mikä tuo lisäetuna indeksoijien mahdollisuuden jäsentää sisältöä helpommin.

React on jo varustettu käsittelemään hahmonnusta Node-palvelimilla. DOM-renderöinnistä on saatavana erityisversio, joka noudattaa samaa mallia kuin asiakaspuolella.

import ReactServer from 'react-dom/server'; import App from './App'; [...] ReactServer.renderToString();

Tämä menetelmä tuottaa tavallisen HTML: n merkkijonona, joka voidaan sitten sijoittaa sivurungon sisään osana palvelimen vastausta. Asiakkaan puolella React tunnistaa ennalta renderoidun sisällön ja jatkaa saumattomasti siitä, mihin se jäi.

Palvelinten hahmontaminen sovelluksissa, jotka käyttävät koodinjakoa, reititystä tai tilakontteja, voi olla monimutkaisempaa, mutta se on silti mahdollista. Esimerkiksi Redux rakentaa palvelimeen esiladatun tilaobjektin, joka voi hydratoida asiakaspuolta myymälää luotaessa.

10. Kansainvälistyminen

Intl API

Intl-sovellusliittymää tuetaan useimpien selainten uusimmissa versioissa, ja muille on saatavana polyfill-täytteitä

Globaalien verkkosivustojen kannalta kansainvälistyminen (i18n) on välttämätöntä paikallisen yleisön sitouttamiseksi. React-kaltaisille asiakaspuolen kirjastoille ainoa vaihtoehto oli palvella hitaita, suuria kirjastoja esimerkiksi käännösten ja numeroiden muotoilun käsittelemiseksi. Viime aikoina natiivi Intl-sovellusliittymä on ollut saatavana selaimissa raskaiden latauskustannusten välttämiseksi.

Yahoo-tiimin React Intl -kirjasto auttaa tuomaan uuden API: n React-projekteihin. Erityinen komponenttisarja kääntää merkkijonot ja muotoilunumerot, päivämäärät ja valuutan automaattisesti. Se on osa kokoelmansa i18n-työkaluja nimeltä FormatJS.

Jokainen komponentti ottaa rekvisiitta, joka peilaa Intl API: n käytettävissä olevat asetukset. Antamalla vaaditun päivämäärämuodon API voi käyttää merkkijonon laskemiseen sitä, mitä tietää selaimen kielialueesta. Aina kun jokin näistä rekvisiidoista muuttuu, merkkijono päivittyy automaattisesti.

Merkkijonokäännökset edellyttävät sopivan käännöksen lisäämistä viestejä ehdotus palveluntarjoajalle sovelluksen juuressa, mutta jota voidaan käyttää koko sovelluksessa. Kirjasto tunnistaa tunnuksen ja korvaa sisällön tarpeen mukaan. Tämän ominaisuuden kaikkien vaihtoehtojen yksityiskohdat löytyvät tässä . Jos haluat tallentaa verkkosivujen testit, harkitse vientiä PDF-tiedostoina ja tallentamista jaettaviin tiedostoihin pilvitallennus .

Tämä artikkeli julkaistiin alun perin vuoden 2018 numerossa netto , maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti. Tilaa täällä .

Aiheeseen liittyvät artikkelit: