day27特别：前端处理加载和渲染有哪些特殊“模式”？

时间：2023-03-28 17:56:03 HTML

缁勪欢鍖栨ā寮忎负浠€涔堢粍浠跺寲鍦ㄥ墠绔紝灏ゅ叾鏄熀浜嶫S寮€鍙戠殑React妗嗘灦涓捣鍒颁簡闈炲父閲嶈鐨勪綔鐢紵棣栧厛锛屽畠鍙互瀹炵幇绫讳技浜庢闈㈠簲鐢ㄧ▼搴忕殑鍔熻兘銆傚叾娆★紝瀹冭妭鐪佷簡鎴戜滑鍦ㄦ墜鏈烘垨PC涓婁笅杞藉拰瀛樺偍鐨勮祫婧愩€傜涓夛紝瀹冧娇鎴戜滑鑳藉闅忔椂闅忓湴璁块棶鎴戜滑闇€瑕佺殑鍐呭銆傚彧瑕佹湁缃戠粶锛屽湪React涓緭鍏ヤ竴涓猆RLs灏卞彲浠ヤ娇鐢–omponentization涓嶅悓浜庢垜浠€氬父璁よ瘑鐨刉ebComponent銆傚湪寮€鍙慦ebComponents鐨勬椂鍊欙紝鏇村姞娉ㄩ噸缁勪欢鐨勫皝瑁呭拰閲嶇敤锛岃繖鏄粡鍏哥殑闈㈠悜瀵硅薄璁捐妯″紡鐨勬€濇兂銆俁eactComponent鏇翠晶閲嶄簬浠ュ０鏄庣殑鏂瑰紡鏇村ソ鍦板悓姝OM鍜岀姸鎬佹暟鎹€俁eact寮曞叆浜嗕竴浜涗笉鍚岀殑妯″紡锛氫笂涓嬫枃鎻愪緵鑰呫€佹覆鏌撳睘鎬с€侀珮闃剁粍浠讹紝浠ュ強鍚庢潵鍑虹幇鐨凥ooks銆傛垜浠彲浠ュぇ鑷村皢杩欎簺缁勪欢鍖栨ā寮忓垎涓轰袱绫伙紝涓€绫绘槸Hooks涔嬪墠鐨刢ontextproviders锛宺enderingAttributes锛岄珮闃剁粍浠舵ā寮忥紝涓€绫绘槸Hooks鍑虹幇甯︽潵鐨勬柊妯″紡銆傜粡鍏告ā寮忎笂涓嬫枃鎻愪緵鑰呮ā寮忥紙ContextProviderPattern锛夛細涓€绉嶉€氳繃鍒涘缓涓婁笅鏂囧皢鏁版嵁浼犻€掔粰澶氫釜缁勪欢鐨勭粍浠跺寲鏂瑰紡銆傚畠鐨勪綔鐢ㄦ槸閬垮厤prop-drilling锛屽嵆閬垮厤鏁版嵁浠庣埗缁勪欢閫愬眰鍚戜笅浼犻€掑埌瀛愮粍浠剁殑绻佺悙杩囩▼銆備緥濡傦紝鍋囪鎴戜滑鏈変竴涓寘鍚垪琛ㄥ拰鍒楄〃鍏冪礌鐨勮彍鍗曘€傞€氳繃涓嬮潰鐨勪唬鐮侊紝鎴戜滑鐪嬪埌濡傛灉鏁版嵁鏄竴灞傚眰浼犻€掞紝浼氬彉寰楅潪甯哥箒鐞愩€俧unctionApp(){constdata={...}return();}varMenu=({data})=>varList=({data})=>varListItem=({data})=>{data.listItem}浣跨敤React.createContext锛屾垜浠垱寤轰簡涓€涓富棰樸€傜劧鍚庨€氳繃ThemeContext.Provider锛屾垜浠彲浠ュ垱寤虹浉鍏崇殑涓婁笅鏂囥€傝繖鏍蜂竴鏉ワ紝鎴戜滑灏变笉闇€瑕佸皢鏁版嵁涓€涓€浼犻€掔粰鑿滃崟涓殑姣忎釜鍏冪礌锛岃涓婁笅鏂囦腑鐨勫厓绱犺幏鍙栧埌鐩稿叧鏁版嵁銆倂arThemeContext=React.createContext();鍑芥暟App(){var鏁版嵁={};return(

)}閫氳繃React.useContext锛屽彲浠ヨ幏鍙栧厓绱犱笂涓嬫枃涓殑鏁版嵁杩涜璇诲啓銆傛覆鏌撻亾鍏锋ā寮忥紙RenderPropsPattern锛変緥濡傦紝鍦ㄤ笅闈㈢殑浠锋牸璁＄畻鍣ㄧず渚嬩腑锛屾垜浠笇鏈涚▼搴忔牴鎹緭鍏ョ殑浜у搧璐拱鏁伴噺鏉ヨ绠椾环鏍笺€備絾鏄湪娌℃湁娓叉煋灞炴€х殑鎯呭喌涓嬶紝璁＄畻浠锋牸鐨勭粍浠跺苟娌℃湁寰楀埌杈撳叆鐨勮喘涔版暟閲忥紝鎵€浠ユ棤娉曡绠椾环鏍笺€俥xportdefaultfunctionApp(){return(

PriceCalculator

);}functionInput(){var[value,setValue]=useState("");return(setValue(e.target.value)}/>);}functionAmount({value=0}){return{value*188}鍏?/div>;}涓轰簡瑙ｅ喅杩欎釜闂锛屾垜浠彲浠ヤ娇鐢╮enderprops骞朵娇鐢╝mount浣滀负input鍏冪礌鐨勫瓙鍏冪礌锛屽湪鍏朵腑浼犻€抳alue鍙傛暟銆備篃灏辨槸璇达紝閫氳繃娓叉煋灞炴€э紝鎴戜滑鍙互閫氳繃灞炴€у湪涓嶅悓鐨勭粍浠朵箣闂村叡浜竴浜涙暟鎹垨鑰呴€昏緫銆傚鍑洪粯璁ゅ嚱鏁癆pp(){return(...{value=>(<>)}

);}functionInput(){...return(<>{props.children(value)});}functionAmount({value=0}){...}楂橀樁缁勪欢妯″紡锛圚OC锛孒igherOrderComponentsPattern锛夛細鎴戜滑鍙互浼犻€掍竴涓粍浠朵綔涓哄弬鏁帮紝杩斿洖涓€涓粍浠躲€?[Image]閭ｄ箞瀹冩湁浠€涔堝簲鐢ㄥ憿锛熷亣璁炬垜浠缁欎竴浜涙病鏈夐珮灞傜粍浠剁殑鎸夐挳鎴栬€呮枃鏈粍浠舵坊鍔犲渾杈癸紝鎴戜滑鍙兘闇€瑕佷慨鏀圭粍浠朵腑鐨勪唬鐮侊紝閫氳繃楂樺眰鍑芥暟锛屾垜浠彲浠ヤ娇鐢ㄥ師鏉ョ殑鐩磋鏂囨湰妗嗗拰鎸夐挳缁勪欢base鍖呰浜嗕竴浜涙柟娉曟潵鑾峰緱鍦嗚竟鏁堟灉銆傚湪瀹為檯搴旂敤涓紝瀹冨彲浠ヨ捣鍒扮被浼间簬鈥滆楗板櫒鈥濈殑浣滅敤銆傚畠涓嶄粎鍙互璁╂垜浠笉淇敼缁勪欢鏈韩锛岃繕鍙互璁╂垜浠鐢ㄦ娊璞″嚭鐨勫姛鑳斤紝閬垮厤浠ｇ爜鍐椾綑銆?/楂橀樁鍑芥暟varenhancedFunction=higherOrderFunction(originalFunction);//楂橀樁缁勪欢varenhancedComponent=higherOrderComponent(originalComponent);//楂橀樁缁勪欢浣滀负瑁呴グ鍣╲arRoundedText=withRoundCorners(Text);varRoundedButton=withRoundCorners(鎸夐挳锛?Hooks妯″紡Hooks鏈€鐩存帴鐨勪綔鐢ㄥ氨鏄敤鍑芥暟鏉ヤ唬鏇縀S6寮曞叆鐨勬柊绫诲垱寤虹粍浠躲€備紶缁熺被鏂瑰紡鍒涘缓classAppextendsReact.Component{constructor(props){super(props);this.state={count:0};}render(){return(this.setState({count:this.state.count+1})}>鐐瑰嚮{this.state.count}娆°€?/button>);}}CreateimportReactthroughHook,{useState}from'react';functionAPP(){var[count,setCount]=useState(0);return(

setCount(count+1)}>Clicked{count}times.

);}鍦ㄨ繖涓緥瀛愪腑锛屼綘鍙互鐪嬪埌鎴戜滑鍒氬垰鍒涘缓涓や釜閫氳繃瑙ｆ瀯璁℃暟鐨勭姸鎬佸彉閲忥紝涓€涓槸count锛屼竴涓槸setCount銆傝繖鏍凤紝褰撴垜浠皢杩欎袱涓€艰祴鍊肩粰userState(0)鏃讹紝灏变細鍒嗗埆璧嬬粰瀹冧滑鑾峰彇璁℃暟鍜屾洿鏂拌鏁般€?/鏁扮粍瑙ｆ瀯var[count,setCount]=useState(0);//瀹冪瓑鍚屼簬varcountStateVariable=useState(0);varcount=countStateVariable[0];varsetCount=countStateVariable[1];Hooks鐨勫彟涓€涓姛鑳芥槸璁╃粍浠堕€氳繃鍔熻兘瑙ｈ€︼紝閫氳繃渚濊禆缁勫悎銆備緥濡傦紝鍦ㄦ病鏈塇ooks鐨勬儏鍐典笅锛屾垜浠彲鑳介渶瑕侀€氳繃缁勪欢鐨勭敓鍛藉懆鏈熸潵缁勫悎鍔熻兘銆傚鏋滄垜浠娇鐢ㄥ悓涓€涓粍浠剁殑鐢熷懡鍛ㄦ湡componentDidMount绠＄悊锛岄偅涔堜細灏嗕笉鐩稿叧鐨勫嚱鏁拌仛鍚堝湪涓€璧凤紝閫氳繃useEffect绛塇ook锛屽皢涓嶇浉鍏崇殑鍑芥暟鍒嗙鍑烘潵锛屾寜鐓х浉鍏虫€ц仛鍚堝湪涓€璧枫€傛寕閽╄繕鍙互鏇磋交鏉惧湴鍦ㄧ粍浠朵箣闂村叡浜€昏緫銆侺oadingrenderingmode娓叉煋妯″紡缁欏墠绔崟椤靛簲鐢紙SPA锛夊甫鏉ヤ簡渚垮埄锛屼絾涔熷甫鏉ヤ簡鎬ц兘闂锛屾瘮濡傚畠鐨凢CP锛團irstContentfulPaint锛岄娆″唴瀹圭粯鍒舵椂闂达級銆丩CP锛圠argestContentfulPaint锛屾渶澶у唴瀹圭粯鍒舵椂闂达級Time锛夛紝TTI锛圱imetoInteractive锛岀涓€娆′氦浜掔殑鏃堕棿锛変細鏇撮暱銆傞櫎浜嗘€ц兘闂锛屽墠绔覆鏌撲篃浼氬鑷碨EO闂銆傞€氬父锛屼竴浜涚綉绔欎负浜嗚В鍐砈EO闂锛屼細鍦⊿PA鐨勫熀纭€涓婄敓鎴愪竴濂楀悗绔〉闈緵鎼滅储寮曟搸妫€绱€備絾鏄紝浣滀负鎼滅储鍏ュ彛椤甸潰锛屽悗鍙版覆鏌撶殑椤甸潰涔熶細琚 闂€傚畠鏈€澶х殑闂鏄瀛楄妭鏃堕棿锛圱TFB锛変細姣旇緝闀裤€備负浜嗚В鍐冲墠鍚庣娓叉煋鐨勯棶棰橈紝闈欐€佹覆鏌撶殑姒傚康搴旇繍鑰岀敓銆傞潤鎬佹覆鏌撲娇鐢ㄩ娓叉煋鏂规硶銆備篃灏辨槸璇达紝鍙互鍦–DN涓婄紦瀛樼殑HTML椤甸潰鏄湪鏈嶅姟鍣ㄧ棰勬覆鏌撶殑銆傚墠绔彂璧疯姹傛椂锛岀洿鎺ュ皢娓叉煋鍚庣殑鏂囦欢鍙戦€佺粰鍚庣銆傝繖鏍凤紝鍑忓皯浜員TFB銆傞潤鎬佹覆鏌撲竴鑸О涓洪潤鎬佺敓鎴愶紙SSG锛宻taticgeneration锛夛紝鐢辨寮曞嚭闈欐€佸閲忕敓鎴愶紙iSSG锛宨ncrementalstaticgeneration锛夌殑姒傚康銆傞潤鎬佺敓鎴愪竴鑸敤浜庡鐞嗛潤鎬佸唴瀹广€傚浜庨渶瑕佸姩鎬佹洿鏂扮殑椤甸潰锛岄噰鐢ㄩ潤鎬佹笎杩涘紡鐢熸垚銆俰SSG鍙互鍦⊿SG鐨勫熀纭€涓婄敓鎴愬閲忛〉闈㈠拰閲嶆柊鐢熸垚瀛橀噺閮ㄥ垎銆傝櫧鐒堕〉闈㈢殑鍐呭鏈夐潤鎬佸拰鍔ㄦ€佷箣鍒嗭紝浣嗘槸鏈変簺椤甸潰涓€鑸笉闇€瑕侀绻佺殑浜や簰锛屽鏋滈潤鎬侀〉闈㈤渶瑕佺浉鍏崇殑琛屼负浜や簰銆係SG鍙兘淇濊瘉FCP锛屽緢闅句繚璇乀TI銆傞潤鎬佸姞杞界殑鍏冪礌琚祴浜堝姩鎬佽涓恒€傚綋鐢ㄦ埛鍚姩浜や簰鏃讹紝鍐嶆按鍖栫殑鍔ㄤ綔鏄笎杩涘紡姘村寲銆傞櫎浜嗛潤鎬佹覆鏌撳拰姘村寲鐨勬笎杩涘紡娓叉煋澶栵紝鍚庣娓叉煋涔熷彲浠ラ€氳繃鑺傜偣涓殑娴侊紙progressiveSSR锛夋潵瀹炵幇銆傞€氳繃娴佺▼锛屽彲浠ュ皢椤甸潰鍐呭鍒嗘浼犺緭缁欏墠绔紝鍓嶇鍙互鍏堝姞杞界涓€涓紶鍏ョ殑閮ㄥ垎銆傞€夋嫨鎬ф按鍖栭櫎浜嗛€愭姘村寲澶栵紝杩樺彲浠ヤ娇鐢ㄨ妭鐐规祦鏆傚仠閮ㄥ垎缁勪欢鐨勪紶杈擄紝瀵规渶鍏堜紶杈撳埌鍓嶇鐨勯儴鍒嗚繘琛屾按鍖栥€傝繖绉嶆柟娉曠О涓洪€夋嫨鎬ф按鍚堜綔鐢ㄣ€傝繕鏈変竴涓患鍚堟ā鍨嬪彨鍋氬矝灞挎灦鏋勶細灏卞儚鎴戜滑鍦ㄥ湴鐞嗚涓婂鐨勪竴鏍凤紝鎵€鏈夌殑澶ч檰閮藉彲浠ョ湅浣滄槸婕傛诞鍦ㄦ捣娲嬩笂鐨勨€滃矝灞库€濄€傜粍浠惰瑙嗕负鈥滃矝灞库€濄€傚皢闈欐€佺粍浠惰涓洪潤鎬侀〉闈⑩€滃宀涒€濓紝浣跨敤闈欐€佹覆鏌擄紱鑰屽姩鎬佺粍浠惰瑙嗕负鍗曠嫭鐨勫皬閮ㄤ欢鈥滃宀涒€濓紝骞朵娇鐢ㄥ悗绔按鍖栨潵娓叉煋銆傚姞杞芥柟寮忛厤鍚堜笂闈㈢殑娓叉煋鏂瑰紡锛屼篃闇€瑕佺浉搴旂殑鍔犺浇鏂瑰紡銆傚浜庨潤鎬佸唴瀹癸紝閫氳繃static瀵煎叆锛涘浜庡姩鎬佸唴瀹癸紝閫氳繃dynamic瀵煎叆銆傚熀浜庢笎杩涚殑鎬濇兂锛屾垜浠篃鍙互鍦ㄤ竴浜涘唴瀹圭Щ鍔ㄥ埌鐗瑰畾鍖哄煙鎴栦氦浜掑悗锛岄€愭瀵煎叆闇€瑕佹樉绀虹殑鍐呭銆傚彲浠ュ瀵煎叆鐨勫唴瀹硅繘琛屾崋缁戞墦鍖咃紙bundlesplitting锛夛紝骞舵牴鎹矾鐢卞姞杞界浉鍏崇粍浠舵垨璧勬簮锛坮outebasedsplitting锛夈€侾RPL锛圥ushRender锛孭re-Cache锛孡azy-load锛夛細PRPL妯″紡鐨勬牳蹇冩€濇兂鏄湪鍒濆鍖栨椂鍏堟帹閫佹渶灏忕殑鍒濆鍖栧唴瀹硅繘琛屾覆鏌撱€備箣鍚巗erviceworker浼氬湪鍚庡彴缂撳瓨鍏朵粬缁忓父璁块棶鐨勮矾鐢辩浉鍏冲唴瀹癸紝鐒跺悗褰撶敤鎴锋兂瑕佽闂浉鍏冲唴瀹规椂锛屼笉闇€瑕佸啀娆¤姹傦紝鐩存帴浠庣紦瀛樹腑鎳掑姞杞界浉鍏冲唴瀹广€侾RPL鐨勬€濇兂鏄浣曞疄鐜扮殑锛熻儗鏅細涓嶩TTP1.1鐩告瘮锛孒TTP2涓彁渚涚殑鏈嶅姟绔帹閫佸彲浠ヤ竴娆℃€у悜瀹㈡埛绔帹閫侀櫎鍒濆鍖栨墍闇€璧勬簮涔嬪鐨勬墍鏈夐澶栫礌鏉愩€侾RPL鍒╃敤浜咹TTP2鐨勮繖涓壒鎬с€備絾鏄粎浠呮湁杩欎釜鍔熻兘鏄笉澶熺殑锛屽洜涓鸿櫧鐒惰繖浜涚礌鏉愪細淇濆瓨鍦ㄦ祻瑙堝櫒鐨勭紦瀛樹腑锛屼絾鏄畠浠苟涓嶅湪HTTP缂撳瓨涓紝鎵€浠ョ敤鎴蜂笅娆¤闂椂锛岃繕鏄渶瑕侀噸鏂板彂璧疯姹傘€傞棶棰樿В鍐虫柟妗堬細PRPL浣跨敤serviceworkers棰勫厛缂撳瓨鏈嶅姟鍣ㄦ帹閫佺殑鍐呭銆傚悓鏃讹紝瀹冭繕閲囩敤浠ｇ爜鎷嗗垎鐨勬柟寮忥紝鏍规嵁涓嶅悓椤甸潰鐨勮矾鐢遍渶姹傦紝瀵逛笉鍚岀殑缁勪欢鍜岃祫婧愯繘琛屽垝鍒嗗拰灏佽锛屼互鎸夐渶鍔犺浇涓嶅悓鐨勫唴瀹广€傚彟澶栦竴涓渶瑕佹敞鎰忕殑姒傚康鏄痯re-fetch涓嶇瓑浜巔re-load銆俻re-fetch鏇村鐨勬槸鎸囦粠server绔鍙栵紝鐩殑鏄紦瀛橈紝浠ヤ究鍚庨潰闇€瑕佺殑鏃跺€欏彲浠ュ揩閫熷姞杞姐€傚彟涓€鏂归潰锛岄鍔犺浇鏄姞杞藉垵濮嬪寲鏃堕渶瑕佺敤鍒扮殑绱犳潗鐨勪竴绉嶆柟寮忥紝姣斿涓€浜涚壒娈婄殑瀛椾綋銆傛垜浠笇鏈涢鍔犺浇瀹冧滑锛屼互渚垮畠浠湪鍔犺浇鍐呭鏃惰兘澶熶互姝ｇ‘鐨勬牱寮忔祦鐣呭湴鏄剧ず瀛椾綋銆傛€ц兘浼樺寲妯″紡tree-shaking浼樺寲tree-shaking浼樺寲鐨勪綔鐢ㄦ槸鍘婚櫎JavaScript涓婁笅鏂囦腑鏈紩鐢ㄧ殑浠ｇ爜锛堟浠ｇ爜锛夈€傞偅涔堜负浠€涔堟垜浠渶瑕佸垹闄よ繖娈典唬鐮佸憿锛熷洜涓鸿繖浜涙湭浣跨敤鐨勪唬鐮佸鏋滃瓨鍦ㄤ簬涓婃鍔犺浇鐨勫唴瀹逛腑浼氬崰鐢ㄥ甫瀹藉拰鍐呭瓨锛屽鏋滃湪绋嬪簭鎵ц涓病鏈変娇鐢ㄥ埌锛屽彲浠ヤ紭鍖栨帀銆傚叾鍚嶇О涓殑鈥滆櫄鎷熷寲鈥濅簩瀛椾粠浣曡€屾潵锛熻繖鏈夌偣鍍忔垜浠湪閲忓瓙鍔涘涓彁鍒扮殑鈥滆枦瀹氳皵鐨勭尗鈥濇€濇兂锛屽嵆鐪煎墠鐨勪簨鐗╁彧浼氬湪瑙傚療鐨勯偅涓€鐬棿鍛堢幇鍑烘潵锛岃€屾垜浠繖閲岀殑涓栫晫灏卞儚涓€涓€滆櫄鎷熲€濈殑娌欑洅銆傚湪铏氭嫙鍒楄〃涓紝鎴戜滑涔熷彧鍏虫敞娓叉煋绐楀彛绉诲姩鍒扮殑浣嶇疆銆傝繖鑺傜渷浜嗚绠楄兘鍔涘拰鐩稿叧鐨勮€楁椂銆傚熀浜嶳eact鐨勪笁鏂瑰伐鍏蜂腑锛屾湁鏀寔铏氭嫙鍒楄〃浼樺寲鐨剅eact-window鍜宺eact-virtualized銆傝繖绡囨枃绔犳槸浜屾湀浠紻ay6鐨勫涔犵瑪璁般€傚唴瀹规潵鑷瀬瀹㈡椂闂淬€奐vascript杩涢樁瀹炴垬璇俱€嬶紝涓€璧疯繘姝ヰ煉煉?/p>