缂撳瓨鐘舵€佸拰璋冭瘯宸ュ叿鍐欏湪鍓嶉潰鐢变簬鍥藉唴姣旇緝绯荤粺鐨剅eact-query鏁欑▼寰堝皯锛屾墍浠ヤ綔鑰呯粨鍚堝畼鏂规枃妗ｅ拰瀹樻柟璇剧▼锛屽笇鏈涘啓涓€绡囨瘮杈冨叏闈㈢殑鏁欑▼銆傛湰鏂囧皢浠ュ悇绉嶅疄渚嬩负鍒囧叆鐐癸紝瀵圭浉鍏崇煡璇嗙偣杩涜灏藉彲鑳介€氫織鏄撴噦鐨勮瑙ｃ€傚鏈夐敊璇紝璇峰湪璇勮鍖烘寚鍑猴紝浣滆€呬細绗竴鏃堕棿鏀规銆傜洰褰曟潯鐩畆eact-query2022-06-04鏇存柊娣卞叆鏌ヨ閿拰鏌ヨ鍑芥暟2022-06-08鏇存柊骞惰璇锋眰鍜屼緷璧栬姹?022-06-19鏇存柊鏌ヨ缁撴灉缂撳瓨鐘舵€佸拰璋冭瘯宸ュ叿2022-鏇存柊-06-23鏇存柊鐢变簬缂撳瓨鐘舵€佸湪骞曞悗锛屽緢闅剧洿瑙傚湴鏄剧ず鐩稿叧鍙樺寲銆傚洜姝わ紝鏈珷杩樺皢浠嬬粛璋冭瘯宸ュ叿鐨勭浉鍏充娇鐢紝瀵圭浉鍏崇姸鎬佸彉鍖栬繘琛岃缁嗚鏄庡拰鐩磋灞曠ず銆傜紦瀛樼姸鎬乺eact-query涓€鑸湪鎸傝浇缁勪欢鏃惰幏鍙栨暟鎹紱鑾峰彇鍒版暟鎹悗锛屽皢鏁版嵁瀛樺偍鍦ㄧ紦瀛樹腑锛屽苟鎻愪緵缁欑粍浠朵娇鐢ㄣ€俽eact-query鍦ㄨ幏鍙栨暟鎹殑杩囩▼涓紝涓昏浼氱粡鍘嗕互涓嬩笁绉嶇姸鎬侊細loadingerrorsuccess杩欎笁绉嶇姸鎬侊紙status锛夌殑娴佽浆鍏崇郴濡備笅锛歡raphTDloading-->successloading-->errorIt鏈夊紑鍙戠粡楠岀殑鍚屽搴旇涓嶉毦鐞嗚В锛岃姹備竴涓帴鍙ｅ悗锛岃涔堟垚鍔燂紝瑕佷箞澶辫触銆備互涓婁笁绉嶇姸鎬佸叾瀹炲搴旂殑鏄痷seQueryhook涓殑isLoading銆乮sSuccess銆乮sError灞炴€с€傝繕鍙互閫氳繃status灞炴€ц幏鍙杔oading銆乻uccess銆乪rror銆傚綋react-query杩涜鍚庣璇锋眰鏌ヨ鏃讹紝浼氭湁浠ヤ笅涓夌鐘舵€侊細idle锛氱┖闂诧紝琛ㄧず涓嶉渶瑕佷粠鍚庣鑾峰彇鏁版嵁fetching锛氭鍦ㄨ幏鍙栨暟鎹紝琛ㄧず褰撳墠姝ｅ湪浠庡悗绔幏鍙栨暟鎹畃aused:paused锛岃〃绀哄師鏉ry浠庡悗绔幏鍙栨暟鎹紝浣嗛€氬父fetchStatus浼氬惊鐜痠dle銆乫etching銆佹柇寮€杩炴帴鏆傚仠涓夌鐘舵€侊細graphTDidle-->fetchingfetching-->pausedpaused-->fetchingfetching-->idle馃摙娉ㄦ剰鍦╮eact-query涓紝statusisloading锛堟垨鑰卛sLoading涓簍rue锛夋寚鐨勬槸鍚庡彴绗竴娆℃垚鍔熷墠鐨勭姸鎬侊紝鍙互鏌ョ湅杩欎釜鍦ㄧ嚎渚嬪瓙浜嗚В杩欎釜鐘舵€佺殑杩炵画寰幆锛歏iew鍦ㄧ嚎绀轰緥鑰宖etchStatus鏄痜etching鐘舵€侊紙鎴栬€卛sFetching涓簍rue锛夋寚鐨勬槸姣忔浠庡悗绔痜etch鏁版嵁锛堝寘鎷涓€娆etch鏁版嵁锛夌殑loading鐘舵€併€傛暣涓敓鍛藉懆鏈燂紝渚嬪锛氬鏋滀綘浣跨敤react-query鍚慓ithub鎺ュ彛璇锋眰react鐨刬ssue鍒楄〃锛屼綘杩欐璇锋眰鐨勭粨鏋滃湪鐘舵€佷腑浼氳鏍囪涓烘垚鍔熸垨鑰呴敊璇紝鎴栬€呭彲浠ュ垽鏂姹傛潵鑷猧sSuccess鍜宨sError鎴愬姛鎴栧け璐ャ€傚悗绔暟鎹姹傛垚鍔熷悗锛屽啓鍏ョ紦瀛樻椂锛屾鏃剁紦瀛樼姸鎬佷负fresh锛堟渶鏂帮級鐘舵€侊紝浣嗗緢蹇紙榛樿杩囨湡鏃堕棿涓?ms锛夊氨浼氬彉涓簊tale锛堟棫锛夌姸鎬併€傚鏋滀娇鐢≧eact鐨勯棶棰樺垪琛ㄧ殑姣忎釜缁勪欢閮借鍗歌浇锛岄偅涔堥棶棰樺垪琛ㄦ暟鎹殑缂撳瓨鐘舵€佸皢琚爣璁颁负闈炴椿鍔紙inactive锛夈€傛鏃舵暟鎹笉浼氳鍒犻櫎锛岃杩囦竴娈垫椂闂达紙榛樿5鍒嗛挓锛夛紝react-query鎵嶄細浠庣紦瀛樹腑鍒犻櫎鏁版嵁銆傚湪鍙樹负inactive锛堜笉娲昏穬锛変箣鍓嶏紝杩欐潯鏁版嵁浼氬湪fresh锛堟渶鏂帮級鍜宻tale锛堟棫锛変箣闂存潵鍥炲垏鎹紝鎺ュ彛璇锋眰鐘舵€佷篃浼氬湪idle鍜宖etching涔嬮棿鍒囨崲銆傪煈囸煆讳笅闈細璇︾粏浠嬬粛绀轰緥娴佺▼鐨勭粏鑺傘€備娇鐢―evTools瑙傚療缂撳瓨鐘舵€佸彉鍖栥€備负浜嗘洿鐩磋鐨勮瀵熺紦瀛樼姸鎬佸彉鍖栵紝鍙互浣跨敤DevTools杩涜鍙鍖栧睍绀恒€傛偍闇€瑕佸湪鎮ㄧ殑鍏ュ彛鏂囦欢涓坊鍔犱互涓嬩唬鐮乺eact-query';+import{ReactQueryDevtools}from'react-query/devtools';importAppfrom'./App';constrootElement=document.getElementById('root');constroot=createRoot(rootElement);constqueryClient=newQueryClient();root.render(+);鍦ㄤ笂闈㈢殑绀轰緥浠ｇ爜涓紝鎴戜滑寮曞叆骞惰缃簡ReactQueryDevtools缁勪欢鐨刬nitialIsOpen灞炴€э紝鎵€浠ヨ皟璇曞伐鍏蜂細榛樿鎵撳紑銆傜劧鍚庢垜浠紑濮嬭姹傛帴鍙ｏ紝鍦ㄨ皟璇曞伐鍏蜂腑鍙互鐪嬪埌褰撳墠鎵€鏈夌紦瀛樼姸鎬佺殑姒傝锛屽涓嬪浘锛氫篃鍙互鎵撳紑鍦ㄧ嚎demo瑙傚療锛岀偣鍑荤ず渚嬩腑鐨勩€愬埛鏂般€戞寜閽瀵熺紦瀛樼姸鎬佺殑鍙樺寲銆俧resh(latest)鏁版嵁鍜宻tale(old)鏁版嵁react-query鏄惁浼氳Е鍙戞煡璇㈠姛鑳斤紝浠庡悗绔帴鍙ｈ幏鍙栨暟鎹紝涓庣紦瀛樼姸鎬佹湁鍏筹細fresh(latest)鐘舵€佹垨stale(old)鐘舵€併€傚鏋滅紦瀛樼姸鎬佹槸闄堟棫鐨勶紙鏃х殑锛夛紝杩欐剰鍛崇潃鏌ヨ灏嗘湁璧勬牸琚噸鏂拌幏鍙栵紝浣嗗鏋滅紦瀛樼姸鎬佹槸鏂伴矞鐨勶紙鏈€鏂扮殑锛夛紝鍒欎笉浼氳閲嶆柊鑾峰彇銆傛敞鎰忦煋㈠鏋滀綘鎯虫洿濂藉湴鎺у埗鎺ュ彛璇锋眰鐨勯鐜囷紝璇峰姟蹇呯墷璁拌繖浜涖€傞粯璁ゆ儏鍐典笅锛屽悗绔繑鍥炴暟鎹殑缂撳瓨鐘舵€佷細绔嬪嵆锛坽staleTime:0}锛変粠fresh锛堟渶鏂帮級鐘舵€佸彉涓簊tale锛堟棫锛夌姸鎬併€傚叾瀹炶繖涓篃涓嶉毦鐞嗚В锛屽洜涓哄綋浣犺姹傛暟鎹殑鏃跺€欙紝鍚庣鐨勬暟鎹彲鑳戒細鍙戠敓鍙樺寲锛屾墍浠ュ綋浣犳嬁鍒板悗绔繑鍥炵殑鏁版嵁鏃讹紝缂撳瓨鐘舵€佹槸闄堟棫鐨勶紙stale锛夈€傚彲浠ュ湪閰嶇疆涓缃畇taleTime涓轰竴涓绉掓暟锛岄偅涔堢紦瀛樹細鍦╯taleTime姣鍚庤繃鏈燂紙浠巉resh锛堟渶鏂帮級鍒皊tale锛坥ld锛夛級娉ㄦ剰锛氭鏃禨taleTime涓嶈兘涓?锛屽惁鍒欐棤鎰忎箟銆備笅闈㈢殑渚嬪瓙涓璼taleTime璁剧疆涓?0s锛屽彲浠ュ湪DevTools涓瀵熺紦瀛樼姸鎬侊細鐐瑰嚮鏌ョ湅鍦ㄧ嚎婕旂ずimport*asReactfrom'react';import{useQuery}from'react-query';import'./鏍峰紡.css';瀵煎嚭榛樿鍑芥暟App(){constgetRepos=(username)=>fetch(`https://api.github.com/users/${username}/repos`).then((res)=>res.json());constreposQuery=useQuery(['repos','facebook'],()=>getRepos('facebook'),+{staleTime:1000*60});return(
{reposQuery.refetch();}}>>鍒锋柊{reposQuery.isLoading&&'绗竴娆″姞杞?..'}{reposQuery.isFetching&&'Refreshing...'}
{JSON.stringify(reposQuery.data)}
);}濡傛灉staleTime璁剧疆涓篒nfinity锛岃〃绀哄綋鍓嶆煡璇㈡暟鎹彧浼氳鑾峰彇涓€娆★紝骞朵笖浼氬湪缃戦〉鐨勬暣涓敓鍛藉懆鏈熶腑缂撳瓨銆傜幇鍦ㄥ簲璇ユ竻妤氱紦瀛樼姸鎬佸浣曚粠鏂伴矞锛堟渶鏂帮級鍙樹负闄堟棫锛堟棫锛夈€傞偅涔堜竴鏃︽暟鎹彉寰楅檲鏃э紙鏃э級锛屾槸鍚︿細琚噸鏂拌幏鍙栵紵涓嶆槸锛屼絾闇€瑕佹弧瓒虫煇浜涜Е鍙戞潯浠躲€傝繖浜涜Е鍙戝櫒鎻忚堪濡備笅锛氫粈涔堟椂鍊欒Е鍙戣幏鍙栨暟鎹搷浣滐紵鍦╮eact-query涓紝骞朵笉鏄綋缂撳瓨浠巉resh锛堟渶鏂帮級鐘舵€佽浆鎹负stale锛堟棫锛夌姸鎬佹椂锛屾墠浼氶噸鏂拌幏鍙栥€傝€屾槸渚濊禆浠ヤ笅浜斾釜瑙﹀彂鏉′欢閲嶆柊鑾峰彇鏁版嵁锛氣憼缁勪欢鎸傝浇鏃讹紝绗竴娆″姞杞界粍浠舵椂锛屼細瑙﹀彂鏁版嵁鑾峰彇銆傚鏋滅粍浠惰鍗歌浇骞跺啀娆″姞杞斤紝涔熶細瑙﹀彂鏁版嵁閲嶆柊鑾峰彇銆傗憽褰搎uerykey鏀瑰彉鏃跺墠闈㈢珷鑺傜殑渚嬪瓙涓彁鍒帮紝褰搎uerykey鏀瑰彉鏃讹紝浼氳嚜鍔ㄨЕ鍙戞暟鎹绱€俻s锛氬鏋滀綘鐨剄uerykey涓湁瀵硅薄锛屼笉鐢ㄦ媴蹇價eact-query妫€娴嬩笉鍒板彉鍖栵紝鍥犱负react-query浼氳繘琛屾繁搴︽瘮杈冦€傗憿褰撶敤鎴烽噸鏂拌仛鐒︽祻瑙堝櫒鏃堕〉闈㈤噸鏂拌仛鐒︼紙姣斿鍦ㄦ祻瑙堝櫒涓墦寮€瑕佽皟璇曠殑椤甸潰锛岀劧鍚庡垏鎹㈠埌vscode缂栬緫浠ｇ爜锛岀紪杈戝畬闇€瑕佺湅鍒拌皟璇曢〉闈㈢殑鏁堟灉锛屽啀鍒囨崲鍒版祻瑙堝櫒锛夛紝鎴栬€呭垏鎹㈡爣绛鹃〉锛堟瘮濡傛墦寮€涓や釜娴忚鍣ㄦ爣绛鹃〉锛屼竴涓槸鐧惧害锛屼竴涓槸浣犵殑椤甸潰锛屼粠鐧惧害鏍囩椤靛垏鎹㈠埌浣犵殑椤甸潰锛夛紝react-query浼氳嚜鍔ㄩ噸鏂拌幏鍙栨暟鎹€傞粯璁ゆ儏鍐典笅鍚敤姝よЕ鍙戞潯浠躲€傚鏋滆绂佺敤姝よЕ鍙戞潯浠讹紝鍙互灏唕efetchOnWindowFocus閫夐」璁剧疆涓篺alse浠ョ鐢ㄥ畠銆傗懀缃戠粶閲嶈繛褰撳墠鐢ㄦ埛鏂紑缃戠粶骞堕噸杩炵綉缁滃悗锛宺eact-query浼氶噸鏂拌幏鍙栨暟鎹€備緥濡傦紝濡傛灉鎮ㄧ殑鐢ㄦ埛鍦ㄥ湴涓嬮€氶亾涓嬁鐫€鎵嬫満锛屼俊鍙蜂腑鏂苟涓旂綉缁滄柇寮€銆傚綋鐢ㄦ埛浠庡湴涓嬮€氶亾鍑烘潵鏃讹紝淇″彿鎺ラ€氾紝缃戠粶閲嶆柊杩炴帴銆傝繖鏃跺€欙紝鏁版嵁鍙堜細琚彇鍥炪€傛瑙﹀彂鏉′欢涔熼粯璁ゅ惎鐢ㄣ€傚鏋滆鍏抽棴姝よЕ鍙戞潯浠讹紝鍙互灏唕efetchOnReconnect閫夐」璁剧疆涓篺alse浠ョ鐢ㄥ畠銆傗懁瀹氭椂鍒锋柊杩欐槸涓€涓Е鍙戞潯浠讹紝闇€瑕佷綘鑷繁閰嶇疆銆傚綋浣犲湪閰嶇疆涓皢refetchInterval璁剧疆涓轰竴涓暟瀛楋紙浠ｈ〃xxx姣锛夋椂銆備笉绠℃鏃舵暟鎹槸鏂伴矞鐨勶紙latest锛夎繕鏄檲鏃х殑锛坥ld锛夌紦瀛樼姸鎬侊紝react-query閮戒細鍦ㄤ綘璁剧疆鐨勬绉掗棿闅斿唴閲嶆柊鑾峰彇鏁版嵁銆備互涓婁簲涓槸react-query鍐呯疆鐨勯噸鏂拌幏鍙栬Е鍙戞潯浠躲€傛敞鎰忊潡锔忊潡锔忊潡锔忊潡锔忦煋㈤櫎浜嗗畾鏃跺埛鏂帮紝鍏朵粬瑙﹀彂鍣ㄩ兘闇€瑕佸浜巗tale鐘舵€佹墠鑳借Е鍙戙€傚湪鍓嶉潰鐨勪緥瀛愪腑锛屼綘鍙互灏濊瘯鍏堟暎鐒﹂〉闈㈠啀鑱氱劍锛堝嵆鈶?瑙﹀彂鏉′欢锛夛紝浣犱細鍙戠幇褰撴暟鎹浜巉resh锛堟渶鏂帮級鐘舵€佹椂锛屽苟娌℃湁閲嶆柊璇锋眰鏁版嵁銆侰learcache褰撶紦瀛樼姸鎬佷负inactive锛堟湭婵€娲伙級鎴栬€呬娇鐢ㄨ鏌ヨ鏁版嵁鐨勭粍浠惰鍗歌浇鍚庯紝瓒呰繃5鍒嗛挓鍚庯紙榛樿锛夛紝react-query浼氳嚜鍔ㄦ竻闄ょ紦瀛樸€傚鏋滀綘鎯宠嚜瀹氫箟杩欎釜鏃堕棿锛屼綘鍙互浣跨敤cacheTime閰嶇疆銆傚湪涓嬮潰鐨勪緥瀛愪腑锛宑acheTime璁剧疆涓?锛屼綔鐢ㄦ槸褰撴煡璇㈡暟鎹浜巌nactive鐘舵€佹椂锛屼細绔嬪嵆浠庣紦瀛樹腑鍒犻櫎銆俢onstuserQuery=useQuery(["user",username],()=>fetch(`https://api.github.com/users/${username}`).then(res=>res.json()),{缂撳瓨鏃堕棿:0});褰撴煡璇㈡暟鎹粠缂撳瓨涓垹闄ゆ椂锛屾鏃剁殑鎬ц兘涓庢煡璇㈡暟鎹粠鏈鍔犺浇鏄竴鏍风殑銆傚湪鏌ヨ鏁版嵁浠庡悗绔繑鍥炰箣鍓嶏紝浼氱湅鍒板姞杞界姸鎬併€傝幏鍙栨暟鎹悗锛屼細鐪嬪埌鏌ヨ鏁版嵁銆?/p>
