react-query鍏ラ棬鍐欏湪鍓嶉潰鐢变簬鍥藉唴姣旇緝绯荤粺鐨剅eact-query鏁欑▼寰堝皯锛屼綔鑰呭笇鏈涘鍐欎竴绡囧熀浜庡畼鏂规枃妗ｅ拰瀹樻柟璇剧▼鏁欑▼鐨勭患鍚堟€ф暀绋嬨€傛湰鏂囧皢浠ュ悇绉嶅疄渚嬩负鍒囧叆鐐癸紝瀵圭浉鍏崇煡璇嗙偣杩涜灏藉彲鑳介€氫織鏄撴噦鐨勮瑙ｃ€傚鏈夐敊璇紝璇峰湪璇勮鍖烘寚鍑猴紝浣滆€呬細绗竴鏃堕棿鏀规銆傜洰褰曟潯鐩畆eact-query2022-06-04鏇存柊娣卞叆鏌ヨ閿拰鏌ヨ鍑芥暟2022-06-08鏇存柊骞惰璇锋眰鍜屼緷璧栬姹?022-06-19鏇存柊鏌ヨ缁撴灉缂撳瓨鐘舵€佸拰璋冭瘯宸ュ叿2022-鏇存柊-06-23鏇存柊鐗堟湰璇存槑鏈暀绋嬪熀浜巖eact-query@4鐗堟湰缂栧啓锛岀洰鍓嶏紙2022-06-05锛変负alpha鐗堟湰銆傜嚎涓奷emo鍩轰簬stackblitz骞冲彴锛屼粠react涓殑鍚庣璇锋眰鏁版嵁寮€濮嬨€傚湪鏃ュ父寮€鍙戜腑锛岄毦鍏嶈姹傚悗绔帴鍙ｃ€傚湪璇锋眰鎺ュ彛鏃讹紝寰€寰€浼氭秹鍙婂埌鍔犺浇鐘舵€佺殑濡備笅澶勭悊銆傚悗绔繑鍥炴暟鎹瓨鍌ㄣ€傚鏋滅晫闈㈡湁閿欒淇℃伅锛屾樉绀洪敊璇俊鎭埛鏂版暟鎹瓑銆傛垜浠潵鐪嬩竴涓弧瓒充笂杩板鐞嗙殑渚嬪瓙鐐规垜鏌ョ湅渚嬪瓙鈶犲湪绾挎紨绀篜S锛氫笅闈㈢殑浠ｇ爜浼氳姹備竴涓猌en-like鏉ヨ嚜github鐨勫彞瀛愶紝骞舵樉绀哄湪椤甸潰涓娿€備緥瀛愨憼馃憞馃徎import*asReactfrom'react';exportdefaultfunctionApp(){//瀛樺偍鍚庣杩斿洖鐨勬暟鎹甤onst[zen,setZen]=React.useState('');//瀛樺偍鍔犺浇鐘舵€乧onst[isLoading,setIsLoading]=React.useState(false);//瀛樺偍璇锋眰鏄惁鎴愬姛const[isError,setIsError]=React.useState(false);//瀛樺偍鍚庣杩斿洖鐨勯敊璇暟鎹甤onst[errorMessage,setErrorMessage]=React.useState('');constfetchData=()=>{//寮€濮嬭幏鍙栨暟鎹紝灏唅sLoading璁剧疆涓簍ruesetIsLoading(true);fetch('https://api.github.com/zen').then(async(response)=>{//濡傛灉璇锋眰杩斿洖鐨剆tatus涓嶆槸200锛屼細鎶涘嚭鍚庣閿欒if(response.status!==200){const{message}=awaitresponse.json();thrownewError(message);}returnresponse.text();}).then((text:string)=>{//璇锋眰瀹屾垚灏哹eLoading璁剧疆涓篺alsesetIsLoading(false);//鎺ュ彛璇锋眰鎴愬姛锛岃缃甶sError涓篺alse璁剧疆閿欒锛堝亣锛夛紱//瀛樺偍鍚庣杩斿洖鐨勬暟鎹畇etZen(text);}).catch((error)=>{//璇锋眰瀹屾垚鏃惰缃甶sLoading涓篺alsesetIsLoading(false);//鎺ュ彛璇锋眰閿欒锛岃缃甋etisError涓簍ruesetIsError(true);//瀛樺偍杩斿洖鐨勯敊璇暟鎹€氳繃鍚庣setErrorMessage(error.message);});};React.useEffect(()=>{//鍒濆鍖栬姹傛暟鎹甪etchData();},[]);杩斿洖(

);}涓婇潰鐨勪緥瀛愪腑锛屼娇鐢╥sLoading瀛樺偍鍔犺浇鐘舵€侊紝浣跨敤isError瀛樺偍鐣岄潰鏄惁鏈夐敊璇紝浣跨敤errorMessage鏉ュ瓨鍌ㄥ悗绔繑鍥炵殑閿欒淇℃伅浣跨敤zen瀛樺偍鍚庣杩斿洖鏁版嵁瀛樺偍鍐嶁€嬧€嬫璋冪敤fetchData鏂规硶鍒锋柊鏁版嵁鍐欎簡寰堝閲嶅鐨勪唬鐮佹潵婊¤冻涓氬姟闇€姹傦紙os鍐咃細鍏跺疄浠ｇ爜鍐欏浜嗗奖鍝嶆晥鐜囷紝浣犱笉鑳芥棭鐐逛笅鐝?锟锟?锛岃€屼笖缁存姢鎴愭湰楂?_姝ゆ椂寮曞叆react-query鍙互鍑忓皯鎺ュ彛涓巖equest鐩稿叧鐨勪唬鐮侊紝涓婇潰鐨勪緥瀛愪娇鐢╮eact-query閲嶅啓濡備笅:鐐规垜鐪嬩緥瀛愨憽鍦ㄧ嚎婕旂ず渚嬪瓙鈶○煈囸煆籭mport*asReactfrom'react';import{use鏌ヨ}鏉ヨ嚜鈥滃弽搴旀煡璇⑩€濓紱constfetchData=()=>{returnfetch('https://api.github.com/zen').then(async(response)=>{//濡傛灉璇锋眰杩斿洖status濡傛灉涓嶆槸200锛屼竴涓悗绔鏋?response.status!==200){const{message}=awaitresponse.json();thrownewError(message);}returnresponse.text();});灏嗘姏鍑洪敊璇瘆;瀵煎嚭榛樿鍑芥暟App(){constzenQuery=useQuery(['zen'],fetchData);//鈶爎eturn();}浣滀负瀵规瘮锛屽紩鍏eact-query鍚庯紝鑲夌溂鍙浠ｇ爜閲忓湪鍑忓皯锛侊紒涓嶉渶瑕佸啓useState鍒扮鐞嗚姹傛帴鍙ｅ甫鏉ョ殑棰濆鐘舵€侊紙濡傛灉浣跨敤react-redux銆乵obx绛夌姸鎬佺鐞嗗簱锛屼篃浼氶亣鍒扮被浼肩殑闂锛夛紝涓嶉渶瑕佸湪useEffect(()=>{},[])璋冪敤鎺ュ彛锛宺eact-query浼氬府鎴戜滑澶勭悊銆備笂渚嬩唬鐮佲憼涓紩鍏seQueryhook鏃讹紝浣犲彲鑳戒笉鐭ラ亾浼犲叆鐨勫弬鏁般€傛帴涓嬫潵锛屾垜浠皢浠嬬粛杩欎簺浼犲叆鐨勫弬鏁般€俀ueryKeysandQueryFunctions浠€涔堟槸QueryKeys鍜孮ueryFunctions锛熷湪浣犳棩甯哥殑寮€鍙戣繃绋嬩腑锛岃姹傚悗绔暟鎹椂锛氫綘浼氬厛鍐欎竴涓姹傚悗绔帴鍙ｆ暟鎹殑鍑芥暟锛堝涓婁緥鈶犱腑鐨刦etchData鍑芥暟锛夛紝鐒跺悗鎸囧畾涓€涓彉閲忥紙濡倆en涓婇潰渚嬪瓙涓殑鈶?鐢ㄦ潵瀛樺偍鐩稿叧鍚庣杩斿洖鐨勬暟鎹紝姣忎釜鎺ュ彛鐨勫彉閲忛兘浼氭湁涓嶅悓鐨勫悕瀛楋紝涓嶅悓鐨勬帴鍙ｆ爣璇嗕笉鍚岀殑鏁版嵁銆傞偅涔堝湪react-query涓浣曞尯鍒嗕笉鍚屾帴鍙ｈ幏鍙栫殑涓嶅悓鏁版嵁鍛紵鍥炲埌渚嬪瓙鈶★紝鎴戜滑浣跨敤useQueryhook鑾峰彇鍚庣鏁版嵁锛屼唬鐮佸涓嬶細constzenQuery=useQuery(['zen'],fetchData);鍏朵腑['zen']鏄痳eact-query鐨剄uerykey锛宺eact-query閫氳繃涓嶅悓鐨剄uerykey鏉ユ爣璇嗭紙鏄犲皠锛変笉鍚屾帴鍙ｏ紙鎴栧悓涓€鎺ュ彛鐨勪笉鍚屽弬鏁拌姹傦級杩斿洖鐨勬暟鎹€傚湪react-query@4涓紝querykey蹇呴』鏄暟缁勩€傝€宖etchData灏辨槸鎴戜滑璇锋眰鍚庣鎺ュ彛鐨勫嚱鏁帮紝涔熷氨鏄煡璇㈠嚱鏁般€侾S锛歲uerykey涓殑鍏冪礌鍙互宓屽鏁扮粍銆佸璞°€佸瓧绗︿覆銆佹暟瀛楋紝渚嬪锛歔'zen',{form:'confucius'}]鎴栬€匸'zen',['confucius','LaoTzu']]涓轰簡鏂逛究璁板繂锛屾瘮濡傚瓨鍌╨ocalStorage鏃跺彲浠ユ妸querykey褰撳仛key锛寁alue灏辨槸閫氳繃query鍑芥暟鏌ヨ鏁版嵁鍚庢妸鎴戜滑闇€瑕佺殑鐘舵€佹暟鎹叏閮ㄥ瓨鍌ㄥ埌valuePS涓細褰撶劧瀹為檯澶勭悊鍜屽瓨鍌ㄤ俊鎭細寰堝鏉傦紝浣嗘槸鎬濊矾鍩烘湰鏄竴鏍风殑銆傜紪鍐欐煡璇㈤敭鐨勪竴浜涙妧宸у湪瑙ｉ噴浜嗘煡璇㈤敭鍜屾煡璇㈠嚱鏁颁箣鍚庯紝鎴戝笇鏈涙偍鑰冭檻涓€涓棶棰樸€傝繖涓帴鍙ｆ瘮杈冪畝鍗曪紝鎵€浠ユ垜浠彲浠ヤ娇鐢▃en浣滀负鏌ヨ閿€傚鏋滄垜鏈変竴涓鏉傜殑鎺ュ彛锛岃繖涓椂鍊欐垜璇ユ€庝箞鍔烇紵鏇村ソ鐨勮璁℃煡璇㈤敭鎬庝箞鏍凤紵杩樻槸浠ithub鐨勬帴鍙ｄ负渚嬶紝濡傛灉鎯宠幏鍙杇ithub涓煇涓粨搴撶殑issue鍒楄〃锛屽彲浠ヨ皟鐢ㄦ帴鍙ttps://api.github.com/repos/{owner}/{repo}/issues鍏蜂綋鏉ヨ锛屽鏋滀綘鎯宠幏鍙杛eact浠撳簱issue鍒楄〃锛屽彲浠ヨ皟鐢ㄥ涓嬫帴鍙ｏ紝浣犲彲浠ュ湪娴忚鍣ㄤ腑鎵撳紑璇曡瘯锛歨ttps://api.github.com/repos/facebook/react/issues姝ゆ椂鍙互璇锋眰鎺ュ彛锛岃幏鍙杛eact浠撳簱涓殑issue鍒楄〃銆備互杩欎釜鑾峰彇浠撳簱闂鍒楄〃鐨勬帴鍙ｄ负渚嬶紝浣犲彲浠ヨ繖鏍峰啓鏌ヨkey鐨勪緥瀛愨憿馃憞馃徎['issues',owner,repo]鍦ㄨ繖涓煡璇ey涓紝鎴戜滑閬靛惊涓€涓師鍒欙細浠庝竴鑸埌鐗规畩锛屽厛鎬讳箣锛屾垜浠幏鍙栫殑鏁版嵁绫诲瀷鏄痠ssue锛屾垜浠渶瑕佸湪鏁扮粍鐨勫紑澶存斁涓€涓瓧绗︿覆鏉ユ爣璇嗘暟鎹被鍨嬶紝鎵€浠ユ垜浠皢绗竴涓弬鏁拌缃负issues銆俫ithub閲岄潰鏈夊緢澶氫粨搴撱€傝繖浜涗粨搴撻€氬父浠ョ敤鎴蜂负涓€绾ф爣璇嗭紝浠撳簱鍚嶇О涓轰簩绾ф爣璇嗐€傚涓嬪浘锛岀浜屼釜鍜岀涓変釜鍙傛暟渚濇涓簅wner鍜宺epo銆傚湪涓婇潰鐨勪緥瀛愪腑锛屾垜浠箣鎵€浠ユ病鏈変娇鐢╗'issues','facebook','react']鑰屼娇鐢╗'issues',owner,repo]鏄负浜嗗湪react-query鍏冪礌涓紩鍏ュ彉閲忎綔涓烘煡璇㈤敭鐨勪娇鐢紝褰撳彉閲忕殑鍊煎彂鐢熷彉鍖栨椂锛宺eact-query浼氶噸鏂拌皟鐢╢etchData鏂规硶鑾峰彇鏂扮殑鏁版嵁锛屽苟浣滀负key缂撳瓨鍒板彉閲忓€煎搴旂殑缂撳瓨涓€傚嵆褰撳彂鐢熷涓嬪彉鍖栨椂锛宺eact-query浼氬啀娆¤皟鐢╢etchData鏂规硶锛屽皢浠庡悗绔幏鍙栫殑鏁版嵁缂撳瓨鍦╭uerykey['issues','vuejs','vue']瀵瑰簲鐨剉alue涓紝鍚岀悊锛屽綋鎴戜滑鍒濆鍖栬皟鐢ㄦ帴鍙ｆ椂锛屽皢鑾峰彇鍒扮殑鏁版嵁缂撳瓨鍦ㄦ煡璇㈤敭涓篬'issues','facebook','react']鐨勫搴斿€间腑锛歔'issues','facebook','react']->['issues','vuejs','vue']//鐢辨煡璇eact浠撳簱鐨刬ssue鏀逛负鏌ヨvue浠撳簱鐨刬ssue銆備笅闈㈢殑渚嬪瓙浼氳幏鍙杛eact浠撳簱涓殑鏈€鏂颁竴鏈熴€傜ず渚嬬綉涓婂彲浠ユ煡鐪嬧懀婕旂ず灏嗙ず渚嬩腑鐨勮緭鍏ユ锛歠acebook鏇挎崲涓簐uejs锛屽皢react鏇挎崲涓簐ue锛岀偣鍑汇€愭煡鐪嬫渶鏂板彂甯冧俊鎭€戞寜閽紝鍙互鐪嬪埌vue浠撳簱鐨勬渶鏂板彂甯冧俊鎭紙鐩稿叧鏁版嵁缂撳瓨锛屽ぇ瀹跺彲浠ユ兂鎯虫垜浠笂闈㈡彁鍒扮殑渚嬪瓙锛夌偣鎴戞煡鐪嬩緥瀛愨懀鍦ㄧ嚎婕旂ず渚嬪瓙鈶ｐ煈囸煆籭mport*asReactfrom'react';浠?react-query'瀵煎叆{useQuery}锛沜onstfetchData=({queryKey})=>{const[,owner,repo]=queryKey;returnfetch(`https://api.github.com/repos/${owner}/${repo}/issues`,{headers:{Authorization:'',},}).then(async(response)=>{//濡傛灉璇锋眰杩斿洖鐨勭姸鎬佷笉鏄?00锛屽皢鎶涘嚭鍚庣閿欒if(response.status!==200){const{message}=awaitresponse.json();thrownewError(message);}returnresponse.json();});};瀵煎嚭榛樿鍑芥暟App(){const[inputOwner,setInputOwner]=React.useState('facebook');const[inputRepo,setInputRepo]=React.useState('react');const[queryKey,setQueryKey]=React.useState([inputOwner,inputRepo]);constissueQuery=useQuery(['issues',...queryKey],fetchData);return();}鍦ㄦ湰渚嬩腑锛屽綋鏌ヨ閿彉閲忕殑鍊煎彂鐢熷彉鍖栨椂锛宺eact-query浼氳嚜鍔ㄨ姹傚彉鍖栧搴旂殑data锛岃€屽湪鏌ヨ鍑芥暟浼犲叆鐨勫弬鏁颁腑锛屾垜浠篃鍙互鍦ㄨ皟鐢ㄦ煡璇㈠嚱鏁扮殑鏃跺€欏緱鍒版煡璇ey鐨勫€笺€傚彲浠ュ湪DevTool涓煡鐪媟eact-query鐨勭紦瀛樹俊鎭紝甯姪鐞嗚В锛?/p>