- Ukuthumela ukwakhiwa kwe-React okulungile kanye nokwenza ngcono i-bundler yakho (izinhlobo zokukhiqiza kanye ne-profiling) kuyisisekelo sanoma yimuphi umsebenzi obalulekile wokusebenza.
- Ukwenza iphrofayili nge-React DevTools kanye namathrekhi okusebenza kwesiphequluli kwembula ukwenziwa okungadingekile, imiphumela ehamba kancane kanye nezithiyo zeseva ongaziqondisa.
- Ukugcina imemori, ukungaguquguquki kanye nokwenza i-virtualization kusebenza ndawonye ukunciphisa imvamisa yokunikeza, ukunciphisa umsebenzi ngokunikeza ngakunye nokugcina ama-UI amakhulu ebushelelezi.
- Ukuhlukaniswa kwamakhodi, i-SSR, i-Web Workers kanye nokuqapha okuqhubekayo kuqinisekisa imithwalo yokuqala esheshayo, ukusebenzisana okusabelayo kanye nokusebenza okuzinzile ngezinga.
I-React ingazwakala ivutha ngokushesha ngaphandle kwebhokisi, kodwa njengoba uhlelo lwakho lokusebenza lukhula, kulula ngokumangazayo ukuhlanganisa ukuhlehla kokusebenza okucashile okuguqula ama-interface abushelelezi abe yizilo ezivilaphayo, ezilambele ibhethri. Uhlu olude, izingxenye ezisindayo, izakhiwo ezingavamile kanye nokwakhiwa kwamaphutha ekukhiqizweni konke kuyahlangana kuze kube yilapho abasebenzisi beqala ukulahla amakhasi akho.
Izindaba ezinhle ukuthi i-React ithumela ngebhokisi lamathuluzi elicebile lokulinganisa, ukuqonda nokuthuthukisa ukusebenza kokunikeza, kanye ne-ecosystem ezungezile (ama-bundler, ama-profiler, ama-windowing libraries, ama-Web Workers, ama-SSR frameworks) ikunikeza konke okudingayo ukuze ugcine i-UI yakho ishesha ngisho nasezingeni eliphezulu. Kulo mhlahlandlela sizobheka lawo mathuluzi ngokujulile, sibonise ukuthi ahlangana kanjani futhi siqokomise amanye amaqhinga angacacile amaqembu avame ukuwaqa kodwa afaneleka ngempela.
Sebenzisa ukwakha okulungile kwe-React: ukuthuthukiswa, ukukhiqizwa kanye nokuphrofayili
Ukuhlolwa kokuqala kokusebenza kwanoma yiluphi uhlelo lokusebenza lwe-React ukuqinisekisa ukuthi uthumela ukwakhiwa komkhiqizo, hhayi okwakhiwayo. Ukwakhiwa konjiniyela kufaka phakathi izixwayiso eziningi ezinobungane, ukuhlolwa okwengeziwe kanye nabasizi bokulungisa amaphutha abahle kakhulu ngenkathi bebhala ikhodi kodwa okubonakala kuhamba kancane futhi kukhulu ekukhiqizeni.
Ungaqinisekisa ukuthi iyiphi i-build oyisebenzisayo ngesandiso sesiphequluli se-React Developer Tools: uma uvula isayithi usebenzisa i-React, isithonjana sesandiso sinesizinda esimnyama ekukhiqizweni kanye nesizinda esibomvu ekuthuthukisweni. Uma uke wabona okubomvu kusayithi lakho elibukhoma, ukulungiselelwa kwe-bundler yakho kuvuza ukwakheka okungalungile.
Kumaphrojekthi ahlanganiswe ne-Create React App, ukudala inqwaba yokukhiqiza elungiselelwe kulula njengokusebenzisa iskripthi sakho sokwakha, okukhipha inqwaba encane ku- build/ isiqondisi. Ngesikhathi sokuthuthukiswa kwendawo kufanele unamathele ku npm start (noma okulingana nakho) bese usebenzisa kuphela ukwakhiwa kokukhiqiza ukuze kusetshenziswe noma ukuze kuhlolwe ukusebenza okungokoqobo.
Uma uthembele ekwakhiweni kwefayela elilodwa le-UMD le-React kanye ne-React DOM (isibonelo endaweni engahlanganisiwe), qiniseka ukuthi ufaka amafayela aphela ngo- .production.min.jsNoma yiliphi ifayela elinganciphisiwe noma elingakhiqizi lihloselwe ukuthuthukiswa kuphela futhi lizothumela imali yokulungisa amaphutha engadingekile kubasebenzisi bakho.
Ama-Bundlers: I-Browserify, i-Rollup, i-Brunch kanye ne-webpack
Ama-bundler ahlukene adinga ukulungiswa okuhlukile ukuze anike amandla ngokugcwele ukulungiswa kokukhiqiza kwe-React, kodwa zonke zilandela umqondo ofanayo oyisisekelo: setha indawo ibe ukukhiqiza, susa amagatsha okuthuthukisa kuphela bese unciphisa iJavaScript ephumayo.
Nge-Brunch, indlela enconywayo ukufaka i-plugin ye-minifier efana ne- terser-brunch, bese usebenzisa ukwakha kwakho ngefulegi lokukhiqiza (isibonelo nge -pLokhu kulungiselelwa kuqinisekisa ukuthi izixwayiso zesikhathi sokuthuthukiswa ziyasuswa futhi inqwaba yokugcina icindezelwa ngamandla.
Ku-Browserify, uvame ukuhlanganisa izinguquko ezimbalwa ngokulandelana okuthile: qala ufake isicelo envify emhlabeni wonke ukuze ujove NODE_ENV="production", bese ufaka isicelo uglifyify emhlabeni jikelele ukusula izindlela zokungenisa intuthuko kanye nekhodi, bese ekugcineni kudluliswa inqwaba terser ngokuphanga kanye nokucindezela. Ukuhleleka kubalulekile lapha ngoba isinyathelo ngasinye silungiselela ikhodi yokuguqulwa okulandelayo.
Uma usebenzisa i-Rollup, uxhumanisa ama-plugin amathathu ukuze ufinyelele ukwakhiwa kokukhiqiza okungenamsoco: replace kubeka imvelo ekukhiqizweni, commonjs ivumela ukuhlanganisa amamojula e-CommonJS, kanye terser yenza i-minification yokugcina kanye ne-mangling. Le nhlanganisela ikhiqiza iphakheji encane, elungele ukukhiqiza ngaphandle kwabasizi bonjiniyela kuphela.
Nge-webpack 4 nangaphezulu, ukuvumela imodi yokukhiqiza kuvula ngokuzenzakalelayo ukulungiswa okuningi okuhlanganisa nokunciphisa. Ukusetha mode: 'production' izintambo ku-Terser ngaphansi kwe-hood futhi kuvumela ukuziphatha kokukhiqiza kwe-React inqobo nje uma NODE_ENV ukufana. Ngokuvamile awudingi ukwengeza i-minifier ehlukile ngaphandle kokuthi unezidingo eziqondile kakhulu.
Ukwakha amaphrofayili e-React
Ngaphezu kokwakhiwa okuvamile kwe-dev kanye ne-prod, i-React iphinde inikeze isakhiwo esikhethekile sephrofayela esigxile ekuhlaziyweni kokusebenza. Lezi zinsimbi ezihlukile zisabela ngaphakathi ukuze amathuluzi afana ne-DevTools Profiler akwazi ukuqoqa ulwazi lwesikhathi olunemininingwane eminingi.
Ukuze usebenzise ukwakheka kwephrofayela endaweni yesiphequluli, ungenisa react-dom/profiling esikhundleni se react-dom/client futhi ngokuvamile ulungiselela i-alias ye-bundler ukuze ungadingi ukuthinta konke ukungenisa ngesandla. Ezinye izinhlaka sezivele ziveza ifulegi noma imodi yokuguqula lokhu kuziphatha kwakho.
Izinguqulo zangaphambilini ze-React (ngaphambi kuka-17) zazithembele ku-User Timing API ejwayelekile ukukhipha amamaki nezilinganiso ezibonakalayo kuphaneli Yokusebenza yesiphequluli. I-Modern React ihlanganisa lawo makhono nethebhu ye-Profiler ezinikele ku-React DevTools ukuze ukwazi ukucwilisa izingxenye ngqo.
Ukuqonda nokulinganisa ukusebenza kwe-React
Awukwazi ukulungisa lokho ongakulinganisi, ngakho-ke umsebenzi wokusebenza ku-React kufanele uqale njalo ngokuphrofayilishaLokho kusho ukusebenzisa amathuluzi esiphequluli kanye namaphrofayili athile e-React ukuze ubone ukuthi isikhathi sichithwa kuphi ngempela nokuthi yiziphi izingxenye eziphinda zinikeze okungaphezu kwalokho okufanele.
Iphaneli yokusebenza ye-Chrome DevTools iyisisekelo sakho sokuqonda ukuthi isiphequluli senzani: Ukwenziwa kwe-JavaScript, izicelo zenethiwekhi, ukwakheka, upende, ukubambezeleka kwe-loop yemicimbi kanye nokulandelela okwenziwe ngokwezifiso konke kuvela kumugqa wesikhathi ohlanganisiwe. I-React ihlangana kulo mbono namathrekhi akhethekile aveza umsebenzi othize wohlaka.
I-Modern React idalula i-Scheduler, Components kanye namathrekhi e-Server ahambisana nezindlela ezijwayelekile zesiphequluliLokhu kukunikeza umbono ovumelanisiwe wezibuyekezo zenethiwekhi, iJavaScript kanye neReact, okuwusizo kakhulu uma ulandela ama-jank noma ama-stall angajwayelekile avela kuphela ngaphansi komthwalo.
Ithrekhi yesihleli kanye nezigaba zokunikeza
I-Scheduler iyisifinyezo sangaphakathi se-React esihlela umsebenzi ezintweni eziza kuqala ezahlukene. Kuma-performance traces uzobona ama-subtrack ahlukene omsebenzi wokuvimba (ngokuvamile izibuyekezo eziqhutshwa ngumsebenzisi ezihambisanayo), umsebenzi wokushintsha (izibuyekezo ze-UI zangemuva ezibangelwa yi startTransition), Imisebenzi ehlobene nokukhathazeka kanye nomsebenzi ongenzi lutho oqhubeka lapho kungekho lutho oluphuthumayo olulindelekile.
Iphasi ngalinye lokunikeza lidlula ezigabeni eziningana ezihlukene ongazihlola kumugqa wesikhathi: isigaba sokubuyekeza (okubangele i-render), isigaba sokunikeza (lapho i-React ibiza khona izingxenye zakho futhi yakha umuthi olandelayo), isigaba sokuzibophezela (lapho i-DOM iguqulwa khona kanye nemiphumela yokwakheka efana useLayoutEffect run) kanye nesigaba semiphumela esele (lapho imiphumela engasebenzi efana useEffect ngokuvamile kuqhutshwa ngemva kokupenda).
Izibuyekezo ezishintshashintshayo—zisho izinguquko ezihleliwe ngesikhathi sokuhumusha—ziwumthombo wakudala wezinkinga zokusebenza ezifihliweEkuthuthukisweni, i-React ingamaka lokhu kumugqa wesikhathi futhi ibonise nokuthi iyiphi ingxenye nendlela ehlele isibuyekezo esengeziwe, okukusiza ukuthi ugweme ama-loop angenziwanga ngengozi noma umsebenzi ophindaphindwayo.
Ithrekhi yezingxenye: ama-flamegraphs okubonisa nemiphumela
Ithrekhi ye-Components ibonisa ukuthi ingxenye ngayinye ithatha isikhathi esingakanani (kanye nenzalo yayo) usebenzisa i-flamegraph. Uma ibhloko egrafuni libanzi, kulapho ingxenye encane echitha khona isikhathi esiningi kuleyo render pass.
I-React iphinde iveze ubude besikhathi somphumela njenge-flamegraph ehlukile ngohlelo lombala olubonisa isigaba esihambisanayo kuthrekhi ye-Scheduler, ukuze ukwazi ukuhlukanisa isikhathi sokunikeza nesikhathi somphumela ngokushesha.
Imicimbi eyengeziwe efana nokufaka, ukususa, ukuxhuma kabusha kanye nokunqamula ivela njengezichasiselo kulezi zithombe ezikhanyayoIsibonelo, ukufaka ingxenye entsha yesihlahla noma ukuyidiliza kuzophawulwa, kanti ezinye izici ezifana nokuthi <Activity> izingxenye zithola amamaki azo okuxhuma kabusha/ukukhipha uxhumano.
Ku-dev, ukuchofoza okufakiwe kokunikeza kuthrekhi ye-Components kwembula ukuthi yiziphi izinto ezishintshile, okuwusizo kakhulu uma uzama ukulandelela ama-render noma ama-props angadingekile aqhubeka nokushintsha izinkomba ngaphandle kokushintsha inani.
Amathrekhi eseva: izicelo kanye nezingxenye zeseva
Uma usebenzisa i-React Server Components, ukusebenzisa amathuluzi okusebenza kungaveza nokuziphatha kweseva eceleni. Ithrekhi ethi “Izicelo Zeseva” ihlanganisa Izithembiso ezigcina zifake idatha ezingxenyeni zeseva, okuhlanganisa izingcingo ku fetch noma imisebenzi yesistimu yamafayela engavumelani.
Imizamo yokusabela ekuhlanganiseni Izithembiso ezidalwe kubasizi beqembu lesithathu ibe yi-span eyodwa ngakho uzobona ukusebenza okukodwa okunengqondo okufana nokuthi getUser kunokuba kube yishumi nambili ezingeni eliphansi fetch izingcingo. Ukuchofoza i-span kukhombisa lapho yadalwa khona, futhi uma itholakala, inani elixazululiwe noma isizathu sokwenqatshwa.
Ithrekhi ehlukile yezingxenye zeseva ibonisa ukuthi izihlahla zezingxenye zeseva kanye nezithembiso zazo ezilindelwe kuthatha isikhathi esingakanani, futhi ngesimo se-flamegraph. Uma i-React inganikeza izingxenye zeseva ngasikhathi sinye idala ithrekhi eyinhloko kanye namathrekhi engeziwe ahambisanayo; uma i-concurrency idlula inombolo ethile, umsebenzi owengeziwe uyahlanganiswa ukuze kugcinwe ukubuka kufundeka.
Ukunciphisa ukuhumusha okungadingekile: i-React.memo, i-useMemo, i-useCallback kanye ne-PureComponent
Enye yezinkinga ezinkulu nezivame kakhulu zokusebenza kuzinhlelo zokusebenza ze-React ukuphinda kwenziwe kabusha okungadingekileNoma nini lapho ingxenye yomzali ibuyekeza, izingane zayo ziphinde zinikeze ngokuzenzakalelayo, noma ngabe okokufaka kwazo (ama-prop) kufana futhi i-DOM ephumayo ngeke ishintshe ngempela.
I-React inikeza amathuluzi amaningana okunciphisa lo msebenzi ochithekile: React.memo izingxenye ezisebenzayo, React.PureComponent ngezingxenye zekilasi, kanye useMemo/useCallback izingwegwe zokuqinisa amanani adluliselwe phansi njengezinto zokusekelaLokhu akulungisi ngomlingo zonke izinkinga zokusebenza, kodwa uma kusetshenziswa ngokucabangela kungenza umehluko omkhulu.
React.memo isonga ingxenye esebenzayo bese yeqa ukuphinda ibonise lapho izakhi zayo zingalingani kakhulu nezangaphambiliniLokhu kubaluleke kakhulu uma ingxenye ivame ukwenza izinto ezifanayo, inomqondo oqinile wokwenza izinto noma unobufakazi obuvela ku-Profiler bokuthi kuyisithiyo.
Uma ukhumbula ingxenye, udinga futhi ukuqinisekisa ukuthi izinto zayo azishintshi ubuwena ngokungadingekileUkudala into entsha noma umsebenzi oqondile ngaphakathi kwe-JSX yomzali kukho konke ukuhumusha kuzokwenza ukuqhathanisa okungajulile kungasebenzi futhi kuphoqe ingane ukuthi iphinde inikeze, noma ngabe idatha enengqondo ifana.
Lapha useMemo futhi useCallback Ngena: useMemo kuzinzisa amanani ento noma uhlu oluvela kwesinye isimo ngakho-ke ashintsha kuphela lapho ukuncika kwawo kwenzeka, futhi useCallback inikeza izinkomba zomsebenzi ezizinzile zokubiza emuva okudluliselwe ezinganeni ezigcinwe ngekhanda.
Izingxenye zekilasi: shouldComponentUpdate kanye ne-React.PureComponent
Ngaphansi kwe-hood, iningi le-React render optimizations lifinyelela ekulawuleni ukuthi ngabe shouldComponentUpdate ibuyisela iqiniso noma amanga. Ukuqaliswa okuzenzakalelayo kuhlala kubuya kuyiqiniso, okusho ukuthi noma yiluphi ushintsho lweprop noma isimo lubangela ukunikezwa kanye nokubuyisana kwaleyo ngxenye kanye nesihlahla sayo esingaphansi.
Ngokudlula shouldComponentUpdate, ungenza umsebenzi wokujikeleza okufushane kwezihlahla ezingaphansi ezingadingi ukubuyekezwaUma ubuyisela amanga, i-React ngeke ikushayele ucingo render() ngaleyo ngxenye noma noma iyiphi inzalo yayo, futhi ngeke iqhathanise ngisho nama-node e-DOM amasha namadala aleyo ngxenye yesihlahla.
Cabanga ngesihlahla esincane sengxenye lapho amanye ama-node ebuya khona engamanga kusuka ku- shouldComponentUpdate: I-React ingadlula ngokuphelele kulawo magatsha, kuyilapho amanye ama-node lapho indlela ibuya khona i-true azocutshungulwa ngokugcwele. Ekugcineni, ama-node kuphela akhishwe yi-rendered ashintshe ngempela azobangela ukuguqulwa kwe-DOM.
Ngoba ukubhala ngokwezifiso shouldComponentUpdate I-logic iyaphindaphinda, imikhumbi ye-React React.PureComponent, esebenzisa ukuqhathanisa okungajulile kwezinto zamanje nezangaphambilini kanye nesimo. Uma kungekho lutho olushintshile ngokungajulile, i-React ingakweqa ngokuphephile ukuphinda inikeze leyo ngxenye yekilasi.
Ukungaguquki nokuthi kungani ukuqhathanisa okungajulile kungahluleka
Ukuqhathanisa okungajulile kucabanga ukuthi uma inani lishintsha, ireferensi yalo izoshintsha—ukucabanga okuphula umzuzu lapho ushintsha ama-array noma izinto ezikhona endaweni.Lokhu kungumthombo wakudala weziphazamisi lapho kuhlanganiswa ukulungiswa okusekelwe ekungaguquki nezakhiwo zedatha eziguquguqukayo.
Cabanga a ListOfWords ingxenye ethola i- words uhlu bese luwenza ahlukaniswe ngamakhoma, kuhlanganiswe nomzali WordAdder ingxenye efaka igama elisha kulolo hlu olufanayo. Uma ListOfWords iyaqhubeka PureComponent, ukuqhathanisa okungajulile kuzobona ireferensi efanayo ye-array futhi kucabange ukuthi akukho okushintshile, ngakho i-UI ngeke ibuyekeze.
Ukulungiswa ukugwema ukuguqula ama-props noma isimo ngqo bese udala ama-array noma izinto ezintsha lapho idatha ishintsha. Esikhundleni se words.push(newWord), ubungasebenzisa words.concat(newWord) noma i-syntax yokusabalalisa [...words, newWord], okudala ireferensi entsha ye-array futhi kuqalise izibuyekezo ezifanele.
Isimiso esifanayo siyasebenza ezintweni: esikhundleni sokunikeza abanye colormap.right = 'blue' entweni ekhona kakade, ubungabuyisela into entsha usebenzisa Object.assign({}, colormap, { right: 'blue' }) noma i-syntax yokusabalala kwento { ...colormap, right: 'blue' }Lokhu kuqinisekisa ukuthi ukuqhathanisa okungajulile kubona ukubhekisela okusha futhi kuyaqaphela ushintsho.
Uma idatha ihlanganiswa ngokujulile, ukugcina ukungaguquguquki ngesandla kungaba nzima ukuyisebenzisaAmalabhulali afana ne-Immer noma i-immutability-helper akuvumela ukuthi ubhale ikhodi ebonakala ibalulekile futhi ishintshashintsha ngenkathi ikhiqiza ngaphakathi izakhiwo ezintsha ezingaguquki, okudlala kahle kakhulu PureComponent futhi React.memo.
Ukwenza uhlu olude lube yi-virtual kanye nama-UI asindayo
Ukunikeza amakhulu noma izinkulungwane zama-DOM node ngesikhathi esisodwa kungenye yezindlela ezisheshayo zokwandisa ukusebenza kwe-React, ikakhulukazi kumadivayisi asezingeni eliphansi noma uma kuhlanganiswa nezakhiwo nezithombe eziyinkimbinkimbi. Ngisho noma kuhlanganiswa kahle, ukuba nama-node amaningi kangako kwimemori nasesikrinini kuyabiza.
I-Windowing, noma i-list virtualization, ibhekana nalokhu ngokuveza kuphela ingxenye yohlu olubonakala njengamanje ku-viewportNjengoba umsebenzisi eskrola, i-React ifaka izinto ezintsha ezifaka umbono bese yehlisa lezo eziskrola ngaphandle, igcina inani lemigqa ehunyushiwe lihlala lifana.
Amalabhulali adumile afana react-window futhi react-virtualized hlinzeka ngezingxenye ezingasetshenziswa kabusha zohlu, amagridi namathebula ezisebenzisa amasu okusebenzisa i-virtualization asebenzayo. Zisingatha izibalo zokuthi yiziphi izinto okufanele ziboniswe, usayizi, ukuskrola izitsha kanye nokuziphatha kokulayisha okungenamkhawulo.
Ukusetha i-virtualization kuvame ukuhilela izingcezu ezintathu: ukukhetha ingxenye efanele (isibonelo, FixedSizeList ngemigqa efanayo noma VariableSizeList ngokuphakama okuguquguqukayo), okunikeza isitsha ukuphakama okuqinile okune overflow: scroll, kanye nokunikeza kuphela ingxenye yento eceliwe umtapo wolwazi, ngokuvamile egcinwa ngekhanda nge React.memo ukugwema ukuphinda kwenziwe okungadingekile.
Kwenziwe kahle, i-virtualization igcina ukusebenza kokuskrola kubushelelezi futhi ukusetshenziswa kwememori kuphansi ngisho noma kusethi yedatha enkuluIzinhlelo zokusebenza zangempela zisebenzise le ndlela ukuze ziphequlule kahle amaqoqo amakhulu—ukubuyekezwa komculo, amakhathalogi e-e-commerce, amabhokisi okungenayo—ngaphandle kokuthi i-UI ime.
Ukufinyeleleka kudinga ukunakwa okwengeziwe ngohlu olubonakalayoUdinga ukuqinisekisa ukuthi ukuzulazula kwekhibhodi kuyasebenza, ukugxila kuphathwa kahle njengoba izinto zifakwa futhi zikhishwa, futhi abafundi besikrini banomongo owanele ngezimfanelo ze-ARIA ukuqonda ingxenye ebonakalayo yohlu njengamanje.
Ukuphathwa kwesifundazwe, i-DOM ebonakalayo kanye nesakhiwo sezingxenye
I-DOM ebonakalayo ivame ukungaqondwa kahle njengenhlamvu yesiliva, kodwa empeleni imane nje iyingqimba ehlakaniphile ehlukanisayoI-React igcina ukumelwa kwe-UI yakho enkumbulo futhi iqhathanisa umuthi omusha nomdala ukuze inqume ukuthi yimiphi imisebenzi ye-DOM edingeka kakhulu.
Ngisho noma kunjalo, ukuhumusha kanye nokwehluka ngakunye kusadla isikhathi, ngakho-ke umgomo wakho ukunciphisa ukuthi izihlahla ezincane ezinkulu kudingeka ziphinde ziboniswe kangakiYilapho ukuphathwa kwesifundazwe, imingcele yezingxenye kanye namasu okugcina izinto ngekhanda konke kuhlangana khona.
Okokuqala, khetha isu lokuphatha lesifundazwe elifanele lobunzima bohlelo lwakho lokusebenza. Isimo se-React sendawo (useState, useReducer) incane futhi ilula ezingxenyeni ezincane, kuyilapho imitapo yolwazi efana neRedux noma izitolo ezilula njengeZustand ingahlanganisa isimo somhlaba wonke esiyinkimbinkimbi ngamaphethini okubhalisela alungiselelwe.
Okwesibili, hlela isimo sakho ukuze idatha ehlobene iqoqwe ngokuhlakaniphaNgezinye izikhathi lokho kusho ukuhlanganisa izinto eziningi useState izingcingo zibe yinto eyodwa ukuze izibuyekezo zivumelane; kwezinye izimo, ukuhlukanisa ukuze ukukhathazeka okuzimele kungaphoqisani ukuthi kuphinde kunikeze kusebenza kangcono.
Uma ubuyekeza isimo esithathwe kumanani angaphambilini, sebenzisa njalo izibuyekezo ezisebenzayo njenge setCount(prev => prev + 1), futhi silondoloze ukungaguquguquki ngokuhlanganisa ama-array nezinto esikhundleni sokuzishintsha endaweni yazo. Lokhu kuholela ekuziphatheni okubikezelwayo futhi kudlala kahle nge-memoization kanye ne-PureComponents.
Umthetho owusizo wesithupha ukugcina isimo sendawo ngangokunokwenzekaUma ugcina inani lesimo liphezulu esihlahleni, kulapho izingxenye eziningi zizophinde zibonakale khona noma nini lapho zishintsha. Ukucindezela isimo phansi kuya ezingxenyeni ezisisebenzisayo kunciphisa irediyasi yokuqhuma yesibuyekezo ngasinye.
Ekugcineni, hlukanisa izingxenye ezinkulu zibe yizicucu ezincane, ezigxile kakhulu lapho izinto zazo ezingavamile ukushintsha khona. Izingxenye zeqabunga ezifakwe engqondweni ezinezisetshenziswa ezizinzile zinciphisa inani le-virtual DOM React edinga ukuguquguquka futhi ifinyeze indlela ibe yisethi encane yezibuyekezo ze-DOM.
Ukuhlukaniswa kwekhodi, ukulayisha okuvilaphayo kanye nokulayisha impahla okungcono
Usayizi wephakheji yeJavaScript unomthelela omkhulu ekusebenzeni kabi, ikakhulukazi kumanethiwekhi eselulaUma i-React bundle yakho ithatha imizuzwana embalwa ukulanda nokuhlaziya, abasebenzisi bazogxuma isikhathi eside ngaphambi kokuba babone i-UI yakho enhle.
Ukuhlukanisa ikhodi nge React.lazy futhi Suspense kusiza ngokulayisha izingxenye uma kudingeka esikhundleni sokuthumela yonke into kusengaphambiliEsikhundleni sokuhlanganisa zonke izici kumthwalo wokuqala, ungenisa ngokuzenzakalelayo izingcezu ezidingeka kuphela emizileni ethile noma ekusebenzelaneni.
Isu elivamile ukuhlukaniswa kwezinga lomzila, lapho ikhasi ngalinye liyisiqephu salo futhi lilayishwa kuphela uma umsebenzisi ezulazula kulo. Ungaya phambili futhi uhlukanise izingxenye ezinkulu zezici noma amaphaneli angasetshenziswa kakhulu, inqobo nje uma uwagoqa Suspense nge-UI yokubuyela emuva efanele.
Ukulayisha okuvilaphayo kusebenza nasezithombeni. Iyangeza loading="lazy" kuya <img> Amathegi ahlehlisa ukulayisha izithombe ezingezansi kokugoqwa kuze kube yilapho ziskrola ziye ekubukweni, okusindisa umkhawulokudonsa futhi kusheshise upende wokuqala. Ukuze uthole imiphumela ethuthukisiwe, amalabhulali afana ne- react-lazy-load-image-component sekela izibambi-ndawo ezifiphalisiwe kanye nokulayisha okuqhubekayo.
Uma usebenzisa ukuhlukaniswa kwekhodi, kubalulekile ukulinganisela ubukhulu bezingcezu kanye nolwazi lomsebenzisi. Ukuhlukana ngokweqile kungadala izicelo eziningi ezincane kakhulu, kuyilapho ukuhlukana okungaphansi kukushiya nenqwaba yokuqala enzima. Amaphutha amahle kanye nemingcele yamaphutha ezungeze izingxenye ezivilaphayo kubalulekile ukuze izicelo zenethiwekhi ezihlulekile zingaphazamisi uhlelo lokusebenza lonke.
Ukunikeza ohlangothini lweseva, Izingxenye Zeseva Yokusabela kanye Nezenzo Zeseva
Ukunikeza uhlangothi lweseva (SSR) kuveza uhlelo lwakho lokusebenza lwe-React kuseva bese kuthumela i-HTML kuklayenti, okungathuthukisa kakhulu ukusebenza okubonwayo kanye ne-SEOAbasebenzisi babona okuqukethwe okuwusizo ngokushesha, futhi izinjini zokusesha zingakhomba amakhasi akho ngendlela enokwethenjelwa.
Amafreyimu afana ne-Next.js enza i-SSR kanye ne-HTML yokusakaza ibe usizo ezinhlelweni zokusebenza zansuku zonkeUlanda idatha kuseva, uguqule izingxenye zibe yi-HTML—ngezinye izikhathi ngisho nanjengomfudlana—bese ufaka amanzi kuleyo markup kuklayenti ukuze isebenziseke.
Ngale kwe-SSR yakudala, izingxenye ze-React Server zisunduza okuningi komqondo wakho we-UI ohlangothini lweseva, okukuvumela ukuthi unikeze izingxenye ezingakaze zithunyelwe kuklayenti nhlobo. Lokhu kunganciphisa kakhulu usayizi wephakheji yeklayenti futhi kube lula ukulanda idatha, njengoba izingxenye zeseva zingabiza izizindalwazi noma ama-API ngqo.
Izenzo Zeseva zandisa lo mbono ngokukuvumela ukuthi uchaze imisebenzi esebenza kuseva kodwa ebangelwa yizingxenye zeklayentiLokhu kususa ama-endpoint amaningi e-boilerplate REST noma abaphathi be-API abenziwe ngokwezifiso futhi kungenza kube lula ukuthi uphatha kanjani izinguquko, ukuthunyelwa kwamafomu kanye neminye imisebenzi ehlelekile.
Uma zisetshenziswa ndawonye, i-SSR, izingxenye zeseva kanye nezenzo zeseva zikunikeza ububanzi bamasu okunikeza: okuqukethwe okubucayi kungasakazwa ngokushesha kusuka kuseva, i-logic esindayo ihlala ingekho kuklayenti, futhi isikhathi sokusebenza se-React sihlanganisa konke ndawonye kube yi-UX ehlangene.
Ukulayisha umsebenzi onzima ne-Web Workers
Ngisho nomuthi we-React olungiselelwe kahle kakhulu uzothuthumela uma usebenzisa imisebenzi esindayo ye-CPU ku-main thread. Ukubala okubizayo kuvimbela ukwenziwa, kulibazise ukuphathwa kwemicimbi futhi kwenze uhlelo lwakho lokusebenza luzizwe lungaphenduli.
Abasebenzi beWebhu banikeza indlela yokuhambisa leyo misebenzi esindayo kuyi-background threadUthumela idatha kumsebenzi, uyivumele ihlukanise izinombolo noma icubungule amasethi edatha amakhulu, bese uthola umphumela ngokudluliswa kwemiyalezo, ushiye intambo eyinhloko ikhululekile ukuphatha izibuyekezo ze-UI.
Imisebenzi ejwayelekile yabasebenzi bewebhu ifaka phakathi ukuqoqwa kwedatha, ukucubungula izithombe, ukuhlaziya ngesikhathi sangempela noma ukulingisa okuyinkimbinkimbiIsibonelo, imidlalo eyakhiwe nge-web stack ivame ukudlulisela i-logic yomdlalo oyinhloko kumsebenzi kuyilapho intambo eyinhloko inikezelwe ekunikezeni nasekuphatheni okufakwayo.
Ukuhlanganisa isisebenzi ne-React kuhilela ukudala ifayela lesikripthi elihlukile, ukulalela onmessage ngaphakathi kwesisebenzi nokuthumela imiyalezo evela ezingxenyeni zakho. Engxenyeni, usungula isisebenzi, usithumelele okokufaka nge postMessage futhi ubuyekeze isimo lapho siphendula, kungcono ukuhlanza isisebenzi lapho ingxenye yehla.
Ama-library afana ne-Comlink, i-workerize noma ama-plugin e-bundler angenza kube lula le patheni Ngokususa umlayezo osezingeni eliphansi odlulayo bese unikeza i-API ezwakala sengathi ibiza imisebenzi ye-async, okulula ukuyicabanga ku-React codebase.
Isiphequluli esiyinhloko kanye nezilinganiso ezigxile kumsebenzisi okufanele uzibuke
Ezingeni eliphezulu, ukusebenza kwewebhu jikelele kuvame ukulandelwa kusetshenziswa izindlela zokulinganisa ezigxile kumsebenzisi njenge-First Contentful Paint (FCP), i-Largest Contentful Paint (LCP) kanye ne-Time to Interactive (TTI). Lokhu kukunikeza umuzwa wokuthi abasebenzisi babona ngokushesha kangakanani okuqukethwe nokuthi bangaxhumana ngokushesha kangakanani nakho.
Izinhlelo zokusebenza ze-Healthy React zihlose i-FCP ngaphansi kwemizuzwana eyi-1.8, i-LCP ngaphansi kwemizuzwana eyi-2.5 kanye ne-TTI ngaphansi kakhulu kwemizuzwana emi-4 kumadivayisi ajwayelekile., yize imikhawulo eqondile ingahluka ngokwephrojekthi. Uma uqhubeka udlula lezo zinombolo, kuyisibonakaliso sokuthi ama-bundle akho, isu lokunikeza noma izikhathi zokuphendula zeseva zidinga ukusebenza.
Amathuluzi afana ne-Lighthouse, i-WebPageTest kanye nephaneli yokusebenza ye-Chrome akusiza ukuthi ulinganise lawa ma-metric ezindaweni zokuhlola zokwenziwaUkuze uthole ulwazi lwangempela, amathuluzi okuqapha abasebenzisi bangempela (i-RUM) afana ne-SpeedCurve, i-Datadog, i-LogRocket noma i-Sentry alandelela izikhathi zangempela zomsebenzisi futhi axhumanise okuhlangenwe nakho okuhamba kancane emuva ekushintsheni kwekhodi.
I-API ye-React's Profiler ihlangana kahle nalesi sithombe: ungazisonga izingxenye zomuthi wakho <Profiler>, faka ama-render ahamba kancane bese uwahlobanisa nokugeleza komsebenzisi othile. Uma kusetshenziswa kanye nokuqapha kwe-backend kanye nenethiwekhi, lokhu kukunikeza umbono ophelele wokusebenza kusukela ekuqaleni kuya ekugcineni.
Ukuhamba komsebenzi weqembu okusebenzayo kokulungisa ukusebenza
Kumaphrojekthi angempela, ukulungiswa kokusebenza kusebenza kahle uma kubhekwa njengomsebenzi ophindaphindwayo kunokuhlanza okukodwaIluphu elula yezigaba ezine—ukuhlonza, ukuphenya, ukusebenzisa, ukuqinisekisa—kusiza ukuvimbela ukuthuthukiswa okuncane okungahleliwe futhi kugcine imizamo igxile lapho ibalulekile khona.
Ukuhlonza kusho ukusebenzisa amaphrofayili, amamethrikhi kanye nemibiko yabasebenzisi ukuthola izimpawu eziqondile njengamakhasi ahamba kancane, amazinga aphansi ozimele noma ukushiywa phansi okuphezulu ngesikhathi sokugeleza okuthile. Ufuna izinkinga ezilinganisekayo, hhayi imizwa yamathumbu.
Uphenyo luphenya imbangela eyinhloko: mhlawumbe ikhasi liqukethe ama-iframe amaningi afihliwe, mhlawumbe ingxenye ethile iphinda ivele kaningi kakhulu noma umtapo wolwazi omkhulu wabathengisi uyalayishwa kuyo yonke imizila. Lapha uncika kakhulu ku-React DevTools Profiler kanye nomugqa wesikhathi we-Chrome.
Ukuqaliswa yilapho usebenzisa khona izilungiso eziqondiwe—ukufaka imemori engxenyeni eshisayo, ukwenza uhlu olude lube yi-virtual, ukuhlukanisa inqwaba, ukulayisha umsebenzi ku-Web Worker, noma ukunika amandla i-SSR yamakhasi athile. Ushintsho ngalunye kufanele lube luncane ngokwanele ukucabanga ngalo.
Ukuqinisekiswa kuyisinyathelo sokugcina futhi ngokuvamile kuyisinyathelo esinganakwa kakhuluUphinda usebenzise izimo zakho zephrofayili bese uhlola amadeshibhodi akho e-metrics ukuqinisekisa ukuthi ushintsho luthuthukise izinombolo futhi aluzange lwethule ukuhlehla kwenye indawo ohlelweni.
Uma uhlanganisa ukwakha okulungile kwe-React, ukukhumbula okucatshangelwe kahle, imikhuba yesimo engaguquki, ukwenza uhlu lube yi-virtualization, ukuhlukaniswa kwekhodi yamasu, i-SSR, i-Web Workers kanye nokulinganisa okuqhubekayo, ugcina unezinhlelo zokusebenza ze-React ezihlala zishesha futhi ziphendula ngisho noma zikhula zibe yinkimbinkimbi kakhulu.; amasu angenhla awaphathelene nokulungisa izinto ezincane ngaphambi kwesikhathi kodwa mayelana nokwakha ukwakheka lapho ukusebenza kuhlala kungumkhiqizo wemvelo esikhundleni sokulwa njalo.
