赶紧来了解一下React18的新特性
锛歊eact17React17鐨勬柊鐗规€э細瀵逛簬鐢ㄦ埛鏉ヨ锛屾病鏈夋柊鐗规€э紝瀹樻柟鐨勮瘽锛歊eact17release鏄笉瀵诲父鐨勶紝鍥犱负瀹冩病鏈夋坊鍔犱换浣曢潰鍚戝紑鍙戣€呯殑鏂扮壒鎬с€傜浉鍙嶏紝杩欎釜鐗堟湰涓昏涓撴敞浜庤鍗囩骇React鏈韩鍙樺緱鏇村鏄撱€備簨浠剁郴缁熼噸鏋勪綔涓篟eact搴撶殑娣卞害浣跨敤鑰咃紝鎴戜釜浜哄緢鍠滄杩欑AllInJs鐨勫紑鍙戞柟寮忥紝鏁翠釜椤甸潰閫昏緫閮藉彲浠ョ敤js鏉ュ啓锛岃€屼笉鏄笉鏂湴鍦╤tml鍜宩s涔嬮棿鍒囨崲鍜岀浉浜掕璁★紱浣嗚繕鏈変竴鐐瑰緢閲嶈锛屽氨鏄紑鍙戣繃绋嬩笉闇€瑕佽€冭檻浜嬩欢鐨勮法娴忚鍣ㄥ吋瀹规€э紝鍥犱负React宸茬粡閫氳繃鍚堟垚浜嬩欢锛圫yntheticEvent锛夊仛鍒颁簡涓绘祦娴忚鍣ㄧ殑鍏煎銆傝櫧鐒剁敤娉曞ぇ浣撶浉鍚岋紝浣嗕笌鍘熶簨浠跺苟涓嶅畬鍏ㄧ浉鍚屻€傚尯鍒湪浜庯細浜嬩欢鑺傜偣鐨勬寕杞芥満鍒躲€俁eact浣跨敤鎵€鏈夌殑鑺傜偣浜嬩欢鎸傝浇鍒版枃妗ｈ妭鐐逛笂锛岄€氳繃浜嬩欢濮旀墭鍜屾敞鍐屽垎鍙戠殑鏈哄埗瀹炵幇锛涗簨浠惰Е鍙戠殑鏃舵満涓嶄竴鑷淬€傝櫧鐒堕兘鏄悜涓嬫崟鑾峰悜涓婂啋娉★紝浣嗘槸鍚堟垚浜嬩欢浼氬湪鍚庨潰鎷嶆憚锛涘叿浣撹〃鐜颁负锛宯ative浜嬩欢鎹曡幏->native浜嬩欢鍐掓场->react浜嬩欢鎹曡幏->react浜嬩欢鍐掓场锛涘洖璋冧簨浠惰緭鍏ュ弬鏁颁笉鍚屻€傚師濮嬬殑鏄簨浠跺璞★紝鑰孯eact鏄悎鎴愮殑浜嬩欢瀵硅薄锛屽畠鏈夎嚜宸辩殑浜嬩欢姹犳潵绠＄悊杩欎簺瀵硅薄锛汻eact17瀵逛簨浠剁郴缁熻繘琛屼簡閲嶆瀯锛屽叾鍙樺寲锛氫簨浠惰妭鐐规寕杞芥満鍒剁敱document鏀逛负鏍硅妭鐐癸紝杩欑鍙樺寲涓嶄細瀵艰嚧鏍硅妭鐐瑰鐨凱ortals鐩戝惉澶辫触锛沬mportReactfrom'react'锛沬mportReactDOM鏉ヨ嚜'react-dom';classFooextendsReact.Component{enter(e){console.log('clickfoo');e.stopPropagation();}render(){returnFoo
;}}exportdefaultclassBarextendsReact.Component{enter(e){console.log('clickbar');}componentDidMount(){ReactDOM.render(
,this.refs.c);}render(){return
Bar ;}}鐪嬩笂闈㈢殑渚嬪瓙锛岄〉闈I濡備笅鍥撅紝濡傛灉鏄?7涔嬪墠锛屽綋鎴戜滑鐐瑰嚮Foo鍖哄煙鍐咃紝棰勮Bar鍖哄煙涓嶄細鍝嶅簲锛屽嵆浣垮姞涓妔topPropagation涔熸棤娉曢樆姝紱浣嗘槸闅忕潃17鐨勫埌鏉ワ紝杩欎釜bug灏卞彲浠ラ伩鍏嶄簡锛岃繖涔熸槸涓洪€愭鍗囩骇鍋氶摵鍨€備簨浠跺洖璋冪殑鏃舵満涓庡師鐢熶簨浠跺悓姝ワ紙杩欑湡鐨勬槸涓€涓緢澶х殑杩涙锛夛紱SyntheticEvent涓嶅啀瀛樺偍鍦ㄤ簨浠舵睜涓紝鍥犳e.persit()灏嗕笉鍐嶇敓鏁堬紱v17寮€鍚疪eact澧為噺鍗囩骇鏂扮瘒绔狅紙鐣ュ敩浜猴級17鍚庡厑璁稿湪鍚屼竴涓〉闈娇鐢ㄦ牴鎹畼鏂筪emo绀轰緥锛屼笉鍚孯eact鐗堟湰鍩轰簬鎳掑姞杞界壒鎬у疄鐜帮紝鐢ㄦ硶涓烘湁鐐圭被浼间簬SPA寰簲鐢ㄧ▼搴忋€傚氨涓汉鑰岃█锛屾垜璁や负杩欐病鏈変粈涔堥粦榄旀硶銆傚鏋滀綘涓嶉渶瑕佸姞杞戒袱娆★紝浣嗘湡鏈涗竴涓粍浠朵娇鐢ㄥ崟鐙殑react鐗堟湰锛屼綘搴旇鎶ラ敊杩樻槸鎶ラ敊锛屽涓嬶細鎵€浠ラ€氳繃鐞嗚В鍓嶄袱涓壒鎬э紝纭疄鍗拌瘉浜嗗畼鏂圭殑涓€鍙ヨ瘽锛?7鍙槸涓?8鍙婁互鍚庣殑鐗堟湰鍋氶摵鍨紝涓轰簡鏂逛究鐢ㄦ埛鍗囩骇鏂扮増鏈殑React18銆傛洿濂界殑鎬ц兘锛堟洿灏戠殑娓叉煋鏃堕棿锛夈€傚湪React18涔嬪墠锛屾壒閲忔洿鏂板彧鍙戠敓鍦≧eact浜嬩欢鍥炶皟涓紝Promise銆乻etTimeOut銆佸師鐢熶簨浠跺洖璋冩垨浠讳綍鍏朵粬浜嬩欢涓殑鏇存柊閮芥病鏈変娇鐢ㄦ壒澶勭悊锛屼緥濡傪煂?//Before18:銆俿etTimeout(()=>{setCount(c=>c+1);setFlag(f=>!f);//娓叉煋2娆,1000);//18鍙婃洿楂樼増鏈細setTimeout(()=>{setCount(c=>c+1);setFlag(f=>!f);//娓叉煋1娆,1000);缁曡繃榛戦瓟娉曪細flushSync鑷畾涔夋覆鏌撲紭鍏堢骇褰搑eact16閫€鍑哄紓姝ユ覆鏌撴椂锛屾彁鍑轰簡娓叉煋浼樺厛绾х殑姒傚康锛屽儚锛氱敤鎴疯緭鍏?鍔ㄧ敾>鍒楄〃鏄剧ず銆傚綋澶氫釜娓叉煋浠诲姟鍒拌揪鏃讹紝瀹冧細浼樺厛娓叉煋楂樹紭鍏堢骇鐨勪换鍔°€備絾鐢变簬杩欐槸涓€涓悊鎯崇殑鎯虫硶锛岀▼搴忔湰韬緢闅惧垽鏂粈涔堝繀椤绘槸楂樹紭鍏堢骇鐨勶紝鍥犱负鐢ㄦ埛浣跨敤鍦烘櫙澶鏉備簡锛涙墍浠?8杩涗竴姝ユ墦閫氫簡杩欎釜搴曞眰鑳藉姏锛屽紩鍏ヤ簡鍑犱釜hook锛歴tartTransition銆乽seTransition銆乽seDeferredValue绛夛紝杩欎簺hook鍏佽鐢ㄦ埛鑷畾涔夋覆鏌撲紭鍏堢骇銆傛瘮濡傝緭鍏ユ悳绱㈡锛岀洿瑙傦細涓嬮潰鏄吉浠ｇ爜锛岀洿鎺ョ湅demo婕旂ず鍗冲彲锛歩mport{startTransition}from'react';//highpriorityLevel:InputdataechosetInputValue(input);//浣跨敤Transition鏍囪浣庝紭鍏堢骇娓叉煋startTransition(()=>{setQuery(input);});瀹樻柟渚嬪瓙锛屾垜瑙夊緱鍥惧舰鍖栫殑鐢ㄦ埛浼氭洿瀹规槗鎰熷彈鍒帮紝鏈夊叴瓒ｇ殑鍙互鐪嬬湅锛?瀹樻柟渚嬪瓙>鎵€浠ユ渶鏂扮増鏈殑React灏嗙姸鎬佹洿鏂板垎涓轰袱绫伙細绱ф€ユ洿鏂帮紙Urgentupdates锛変細鐩存帴褰卞搷鐢ㄦ埛浜や簰锛屽杈撳叆銆佺偣鍑荤瓑銆傝繃娓℃洿鏂帮紙Transitionupdates锛夐€氳繃杩欎簺閽╁瓙灏哢I浠庝竴涓鍥捐繃娓″埌鍙︿竴涓鍥炬垜浠彲浠ヨ嚜瀹氫箟娓叉煋浼樺厛绾с€傛柊鍏ュ彛鎸傝浇API锛歝reateRoot//18涔嬪墠锛歩mport{render}from'react-dom';constcontainer=document.getElementById('app');render(
,container);//18涔嬪悗:import{createRoot}from'react-dom/client';constcontainer=document.getElementById('app');constroot=createRoot(瀹瑰櫒锛?//root.render(
);鍊煎緱涓€鎻愮殑鏄紝18瀵规棫鐨勬寕杞芥柟寮忎篃鏄吋瀹圭殑锛屼絾鏄繖绉嶇敤娉曚笉鑳戒娇鐢ㄦ柊鐗规€э紙寮€鍙戠幆澧冧細鎻愮ず锛夛紝杩欎篃鏄€愭鍗囩骇鐨勪竴閮ㄥ垎銆傚師璇濓細浠庢妧鏈笂璁诧紝骞跺彂娓叉煋鏄竴涓獊鐮存€х殑鍗囩骇銆傚洜涓哄苟鍙戞覆鏌撴槸鍙腑鏂殑锛屽惎鐢ㄦ椂缁勪欢鐨勮涓轰細鐣ユ湁涓嶅悓锛岃繖涓瘮渚嬬害涓?.2%銆傛墍浠ワ紝涓轰簡澶у鏇撮『鍒╃殑鍗囩骇鍒?8锛屽畼鏂瑰缓璁€愭鍗囩骇锛屾彁渚涗竴涓猄trictModeAPI锛屼娇鐢ㄨ繖涓ā鍧楀寘瑁圭殑Nodes浼氶伒寰弗鏍兼ā寮忥紝杩欐湁鍔╀簬锛氳瘑鍒笉瀹夊叏鐨勭敓鍛藉懆鏈焨sedeprecatedstringrefAPIwarningsusedeprecatedfindDOMNodemethodsdetectunexpectedsideeffectsdetectdeprecatedcontextAPIs纭繚鍙鐢ㄧ姸鎬佷笅鐨刣emo,Header,Footer浼氫互鏅€氭ā寮忔覆鏌擄紝琚玈trictMode鍖呰９鐨凜omponent鑺傜偣浼氫互涓ユ牸妯″紡娓叉煋importReactfrom'react';functionExampleApplication(){return(
);}涓ユ牸妯″紡涓嶈兘鑷姩妫€娴嬩綘鐨勫簲鐢ㄧ増鏈崌绾х殑鍓綔鐢紝鍙兘閫氳繃鏁呮剰閲嶅璋冪敤涓€浜涘０鏄庡嚱鏁版潵甯姪鍙戠幇瀹冧滑骞朵娇瀹冧滑鏇村叿纭畾鎬э紙璇﹁瀹樻柟鏂囨。锛?/姝ｅ父妯″紡*React鎸傝浇缁勪欢銆?甯冨眬鏁堟灉宸插垱寤恒€?Effectsarecreated.//strictmode*React鎸傝浇缁勪欢銆?甯冨眬鏁堟灉宸插垱寤恒€?Effecteffects琚垱寤恒€?React妯℃嫙鍦ㄥ畨瑁呯殑缁勪欢涓婅鐮村潖鐨勬晥鏋溿€?甯冨眬鏁堟灉琚牬鍧忋€?鏁堟灉鏄痙estroyed.*React妯℃嫙鍦ㄥ凡瀹夎缁勪欢涓婇噸鏂板垱寤虹殑鏁堟灉銆?甯冨眬鏁堟灉鍒涘缓*鏁堟灉璁剧疆浠ｇ爜杩愯铏界劧杩欎釜妯″潡鍙湪寮€鍙戠幆澧冧笅鏈夋晥锛屼絾鏄粏蹇冪殑浜轰細鍙戠幇锛岄噸澶嶇殑閿€姣佸拰鎸傝浇浠嶇劧浼氬甫鏉ユ柊鐨勯棶棰橈紝渚嬪锛歝onst[value,setValue]=useState(0);useEffect(()=>{setValue(val=>val+1);})//鏅€氭ā寮忔墦鍗?锛屼絾鏄弗鏍兼ā寮忎細鎵撳嵃2锛涘浗鍐呭凡缁忔湁鏂囩珷璁ㄨ杩欎釜闂锛宺eact浠撳簱涔熸湁涓€涓猧ssue璁ㄨ杩欎釜闂銆傛湁鍏磋叮鐨勫彲浠ョ偣姝ゅ垎鏋愬苟鍙戞覆鏌撱€傞鍏堝湪璁瞨eact娓叉煋涔嬪墠鍥為【涓€涓煡璇嗙偣锛氭祻瑙堝櫒涓殑js鎵ц鍜孶I娓叉煋鍦ㄤ竴涓嚎绋嬩腑椤哄簭鍙戠敓锛堝寘鎷琷s鎵ц銆佷簨浠跺搷搴斻€佸畾鏃跺櫒銆乁I娓叉煋锛夛紝鑰宩s鐨勬墽琛屾槸鍗曠嚎绋嬬殑锛堝熀浜庝簨浠跺惊鐜級銆傝繖涓崟绾跨▼鏄‘瀹氱殑锛屽鐞嗕簡A灏变笉鑳藉鐞咮銆傛湁浜嗚繖涓叡璇嗭紝鎴戜滑鍐嶆潵鐪嬬湅react娓叉煋鐨勫巻鍙插悓姝ユ覆鏌撴渶鏃╃殑react锛?6骞村墠锛夋槸鍚屾鐨勶紝涔熷氨鏄褰撶敤鎴烽€氳繃setState瑙﹀彂鏇存柊锛岀洿鍒版洿鏂版覆鏌撳埌椤甸潰锛屾墠浼氬幓閫氳繃涓や釜杩囩▼锛歞iff闃舵锛氬湪鏍硅妭鐐瑰紑濮媎iff锛屾壘鍑篸om鏍戞洿鏂板墠鍚庣殑宸紓锛沜ommit闃舵锛氭牴鎹甦iff鐨勭粨鏋滄洿鏂伴〉闈㈢殑UI锛涚敱浜庢暣涓繃绋嬫槸鍚屾鐨勶紝鎵€浠ヤ細涓€鐩村崰鐢╦s绾跨▼锛涙墍浠ュ湪涓€涓洿鏂拌繃绋嬩腑锛岄〉闈㈢殑鐐瑰嚮銆佽緭鍏ョ瓑浜や簰浜嬩欢浼氫竴鐩寸瓑鍒版洿鏂板畬鎴愩€傛樉鐒讹紝杩欑浣撻獙寰堢碂绯曘€備负浜嗚В鍐冲悓姝ユ覆鏌撻樆濉炰富绾跨▼鐨勯棶棰橈紝寮傛娓叉煋璁╂覆鏌撴洿鍔犵伒娲烩€斺€旀渶澶х殑闂涓嶆槸鎬ц兘锛岃€屾槸璋冨害锛圧eactConf2018锛夈€傚熀浜庢锛岃癁鐢熶簡涓€涓桨鍔ㄥ墠绔湀鐨勫悕璇嶁€斺€擣iber銆傛柊鐨勬覆鏌撴灦鏋勬渶澶х殑鐗圭偣鏄皢涔嬪墠鐨勫崟鍚戦粦鐜╂硶鍒嗕负涓や釜闃舵锛氭覆鏌撻樁娈碉細閾捐〃缁撴瀯鐨勪换鍔￠摼锛屽彲浠ヤ腑鏂紱鎻愪氦闃舵锛氬氨鏄繘绋婾I鍒扮晫闈㈢殑鏇存柊锛屾槸鍚屾鐨勶紝涓嶅彲涓柇锛況ender闃舵鑺傜偣涔嬮棿鐨勫叧绯荤敤閾捐〃琛ㄧず锛屽姞鍏ユ椂闂村垎鐗囩殑鏂规硶妫€鏌ラ摼琛ㄤ笂鐨勮妭鐐规槸鍚︾户缁悜鍚庢瘮杈冿紝鍙栧喅浜庡綋鍓嶇嚎绋嬫槸鍚︾┖闂诧紱鑰宺eact浼氭爣璁版瘡涓洿鏂颁换鍔＄殑浼樺厛绾э紝濡傛灉鏂扮殑鏇存柊浼樺厛绾ч珮浜庢鍦ㄥ鐞嗙殑浠诲姟锛岄偅涔堜箣鍓嶇殑浠诲姟灏变細琚墦鏂涪寮冿紝浠庤€屽鐞嗘洿楂樹紭鍏堢骇鐨勪换鍔★紝杩欓噷闇€瑕佺悊瑙ｇ殑鏄細涓€娆℃洿鏂颁换鍔¤涓柇涓㈠純锛岄珮浼樺厛绾т换鍔℃墽琛屽悗锛岄渶瑕侀噸鏂颁粠澶磋绠楄浠诲姟銆傝繕鏈変竴鐐硅璁颁綇鐨勬槸锛屽厛鏈塅iber锛屽悗鏈塰ooks锛岃€屼笉鏄痟ooks甯︽潵Fiber銆傚苟鍙戞覆鏌撳彧瑕佺湅杩嘡eact18鐨勪竴浜涙枃绔狅紝浣犲彲鑳藉惉璇磋繃ConcurrentMode锛孋oncurrentReact鎴栬€匔oncurrentfeatures锛岃繖浜涘悕璇嶅苟涓嶉噸瑕侊紝閲嶈鐨勬槸鐞嗚В浠栫殑鐩殑銆傞鍏堢籂姝ｄ竴涓ぇ瀹跺彲鑳藉惉璇磋繃鐨勫叧浜庡紓姝ユ覆鏌撶殑璇В锛氬紓姝ユ覆鏌撳苟涓嶆槸鎸囦竴妫垫爲鐨勪袱涓垨澶氫釜鍒嗘敮鍚屾椂琚覆鏌撱€傚姩鍔ㄨ剼灏栨兂涓€鎯筹紝杩欐€庝箞鍙兘锛岃繖鏈韩灏辫繚鑳屼簡娴忚鍣ㄦ覆鏌撶殑鍘熺悊銆傚畼鏂圭殑璇濓細骞跺彂鏈韩骞朵笉鏄竴涓壒鎬с€傝繖鏄竴绉嶆柊鐨勫箷鍚庢満鍒讹紝浣縍eact鑳藉鍚屾椂鍑嗗澶氫釜鐗堟湰鐨刄I銆備綘鐨勫涓増鏈殑UI閮借鍦堝嚭鏉ヤ簡锛岃€冭瘯闇€瑕佽€冦€傚苟鍙戞覆鏌撴垚鍔熻В鍐充簡寮傛娓叉煋涓殑涓柇鍜屾斁寮冮棶棰橈紝涓柇鍚庡彲浠ユ仮澶嶏紱浣嗘槸鍦ㄦ煇浜涘満鏅笅锛屼篃浼氬嚭鐜颁腑鏂拰涓㈠純鐨勯棶棰樸€傝繖涓兘鍔涗篃鍙互鍦ㄦ湭鏉ヨВ閿佸彟涓€涓娇鐢ㄥ満鏅細鐘舵€佸鐢ㄣ€傛瘮濡倀ab鐨勫垏鎹紝褰撲粠a鍒囨崲鍒癰锛屽啀浠巄鍒囨崲鍥瀉鏃讹紝杩欎釜鏃跺€欙紝閫氳繃涓€浜涘疄鐜帮紝鎴戜滑鍙互澶嶇敤鐘舵€侊紝蹇€熷皢a鏄剧ず鍦ㄥ睆骞曚笂锛涘苟鍙戞覆鏌撶殑鎰忎箟杩滀笉姝簬姝わ紙鍖呮嫭鏈嶅姟绔拰native绔級锛屾垜鍙槸鎸戜簡涓€浜涙垜鑳界悊瑙ｇ殑涓滆タ鍒嗕韩缁欏ぇ瀹躲€傚弽姝ｅ畼鏂瑰啓鐨勫緢濂斤紝涓汉杩樻槸姣旇緝鏈熷緟鐨勩€傛帹鑽愰槄璇伙細浠€涔堟槸ConcurrentReact锛烺eact鐨勫苟鍙戞ā寮忔槸鍚﹁繃搴﹁璁★紵React骞跺彂娓叉煋鐨勫墠涓栦粖鐢熸€荤粨閫氳繃瀵箁eact18鏂扮壒鎬х殑鐔熸倝鍜屾覆鏌撴ā寮忕殑璁茶В锛屾垜浠彲浠ユ劅鍙楀埌杩欎釜鐗堟湰浼氱粰鎴戜滑鐨勫簲鐢ㄤ綋楠屽甫鏉ヨ倝鐪煎彲瑙佺殑鎻愬崌锛屽墠鎻愭槸浣犱笉瑕佹互鐢ㄥ畠骞跺皢浣跨敤銆傝€屼笖闅忕潃搴曞眰鐨勪笉鏂毚闇插拰骞跺彂妯″瀷鐨勪笉鏂瀯寤猴紝鎴戜滑浠ュ悗鍙兘涓嶄細鐢╮eact锛岃€屾槸Remix锛孨ext锛屼竴涓熀浜巖eact搴撶殑鐢熸€佹鏋讹紝杩欎篃鏄畠鐨勬剰涔変箣涓€鎴愮珛React宸ヤ綔缁勯鍏堬紝鏇村ソ鍦版瀯寤篟eact鐢熸€佺郴缁熴€傚緢闅炬兂璞★紝杩欏眳鐒舵槸鎴?022骞寸殑绗竴绡囨枃绔狅紝浠婂勾涓浗鏈€杩疯尗鐨勬槸涓浗缁忔祹锛屽叾娆″彲鑳芥槸鎴戙€傛垜甯屾湜杩欐槸涓€涓浆鎶樼偣锛侊紒锛?/p>
