鍏嶈矗澹版槑锛氭覆鏌撲紭鍖栨槸鎵€鏈夊簲鐢ㄧ▼搴忕殑楂樼骇涓婚銆俁eactQuery宸茬粡鏈夊緢澶氬紑绠卞嵆鐢ㄧ殑鎬ц兘浼樺寲锛岃€屼笖澶у鏁版椂鍊欎笉闇€瑕佽繘涓€姝ョ殑浼樺寲銆傗€滀笉蹇呰鐨勯噸鏂版覆鏌撯€濇槸寰堝浜洪兘闈炲父鍏虫敞鐨勮瘽棰橈紝杩欏氨鏄垜鍐欒繖绡囨枃绔犵殑鍘熷洜銆備絾鎴戣鍐嶆鎸囧嚭锛屽湪澶у鏁版儏鍐典笅锛屽浜庡ぇ澶氭暟搴旂敤绋嬪簭鑰岃█锛屾覆鏌撲紭鍖栧彲鑳藉苟涓嶅儚鎮ㄦ兂璞＄殑閭ｄ箞閲嶈銆傞噸鏂版覆鏌撴槸涓€浠跺ソ浜嬨€傚畠纭繚鎮ㄧ殑搴旂敤绋嬪簭鏄剧ず鏈€鏂扮姸鎬併€備笌閲嶆柊娓叉煋鐩告瘮锛屾垜鏇村叧蹇冪敱浜庣己灏戞覆鏌撹€屽鑷寸殑娓叉煋閿欒銆傛湁鍏虫涓婚鐨勬洿澶氳璁猴紝璇峰弬闃呬互涓嬪唴瀹癸細鍦ㄤ慨澶嶉噸鏂版覆鏌撲箣鍓嶄慨澶嶆參閫熸覆鏌揁ryanflorence鐨勮繖绡囧叧浜庤繃鏃╀紭鍖栫殑鏂囩珷鎴戝凡缁忓湪浠嬬粛閫夋嫨浼樺寲鐨勭浜岀瘒鏂囩珷涓皥鍒颁簡娓叉煋銆傜劧鑰岋紝鈥滀负浠€涔圧eactQuery鍦ㄦ病鏈夋暟鎹彉鍖栫殑鎯呭喌涓嬫覆鏌撶粍浠朵袱娆♀€濇槸鎴戠粡甯歌闂埌鏈€澶氱殑闂銆傝鎴戣瘯鐫€娣卞叆瑙ｉ噴涓€涓嬨€俰sFetching鍦ㄥ墠闈㈢殑渚嬪瓙涓紝鎴戣浜嗕笅闈㈢殑缁勪欢鍙湁鍦╰odos鐨勯暱搴﹀彂鐢熷彉鍖栨椂鎵嶄細閲嶆柊娓叉煋銆傚叾瀹炴垜鍙浜嗕竴閮ㄥ垎浜嬪疄锛歟xportconstuseTodosQuery=(select)=>useQuery(['todos'],fetchTodos,{select})exportconstuseTodosCount=()=>useTodosQuery((data)=>data.length)functionTodosCount(){consttodosCount=useTodosCount()return
{todosCount.data}
}姣忔鍚庡彴鍒锋柊鍙戠敓鏃讹紝璇ョ粍浠朵細鍒嗗埆娓叉煋濡備笅鏁版嵁锛歿status:'success',data:2,isFetching:true}{status:'success',data:2,isFetching:false}杩欐槸鍥犱负ReactQuery鍦ㄦ瘡娆℃煡璇腑閮戒細杩斿洖寰堝鍩虹淇℃伅锛宨sFetching灏辨槸鍏朵腑涔嬩竴銆傚綋璇锋眰鍙戠敓鏃讹紝姝ゅ睘鎬ц缃负true銆傚綋鎮ㄦ兂瑕佷负鍚庡彴璇锋眰鏄剧ず鍔犺浇鏍囧織鏃讹紝杩欏挨鍏舵湁鐢ㄣ€備絾濡傛灉浣犱笉闇€瑕佺殑璇濓紝杩欑‘瀹炰細瀵艰嚧涓€浜涗笉蹇呰鐨勬覆鏌撱€俷otifiOnChange瀵逛簬涓婇潰鎻愬埌鐨勫満鏅紝ReactQuery鎻愪緵浜唍otifyOnChangeProps鍙傛暟銆傚畠鍙互涓烘瘡涓満鏅崟鐙缃互鍛婅瘔ReactQuery锛氫粎褰撹繖浜涘睘鎬у彂鐢熷彉鍖栨椂閫氱煡鎴戙€傞€氳繃灏嗘鍙傛暟璁剧疆涓篬'data']锛屾垜浠彲浠ュ疄鐜颁竴涓柊鐗堟湰锛歟xportconstuseTodosQuery=(select,notifyOnChangeProps)=>useQuery(['todos'],fetchTodos,{select,notifyOnChangeProps})exportconstuseTodosCount=()=>useTodosQuery((data)=>data.length,['data'])淇濇寔鍚屾灏界涓婇潰鐨勪唬鐮佸伐浣滄甯革紝浣嗗畠寰堝鏄撳け鍘诲悓姝ャ€傚鏋滄垜浠兂瑕佸閿欒杩涜鐗规畩澶勭悊鎬庝箞鍔烇紵鎴栬€呮垜浠槸鍚﹂渶瑕佷娇鐢╥sLoading灞炴€э紵鎴戜滑蹇呴』纭繚notifyOnChangeProps灞炴€т笌鎴戜滑瀹為檯浣跨敤鐨勬暟鎹悓姝ャ€傚鏋滄垜浠繕璁扮粰灞炴€ф坊鍔犱竴浜涙暟鎹紝鍙洃鍚暟鎹睘鎬х殑鍙樺寲锛屽綋鏌ヨ杩斿洖閿欒鑰屾垜浠篃鎯虫樉绀鸿繖浜涢敊璇椂锛屾垜浠殑缁勪欢灏嗕笉浼氶噸鏂版覆鏌撱€傚綋鎴戜滑鍦ㄨ嚜瀹氫箟閽╁瓙涓‖缂栫爜杩欎簺灞炴€ф椂锛岃繖涓棶棰樺挨鍏舵槑鏄撅紝鍥犱负鎴戜滑涓嶇煡閬撲娇鐢ㄨ嚜瀹氫箟閽╁瓙鐨勭粍浠跺疄闄呬笂浼氫娇鐢ㄤ粈涔堟暟鎹細exportconstuseTodosCount=()=>useTodosQuery((data)=>data.length,['data'])functionTodosCount(){//馃毃鎴戜滑姝ｅ湪浣跨敤閿欒锛屼絾濡傛灉閿欒鍙戠敓鍙樺寲锛屾垜浠笉浼氭敹鍒伴€氱煡锛乧onst{error,data}=useTodosCount()return({error?error:null}{data?data:null}
)}姝ｅ鎴戝湪鏂囩珷寮€澶寸殑鍏嶈矗澹版槑涓墍璇达紝鎴戣涓鸿繖姣斿伓灏斾笉蹇呰鐨勯噸鏂版覆鏌撴洿绯熺硶銆傚綋鐒讹紝鎴戜滑鍙互缁欒嚜瀹氫箟鐨刪ooks浼犻€掑弬鏁帮紝浣嗚繖杩樻槸闇€瑕佹墜鍔ㄥ鐞嗐€傛湁娌℃湁鍔炴硶鑷姩澶勭悊杩欑鎯呭喌锛熻鍙傞槄锛氳窡韪煡璇㈣繖鏄竴涓垜鐗瑰埆寮曚互涓鸿豹鐨勫姛鑳斤紝涔熸槸鎴戝璇ュ簱鐨勭涓€涓富瑕佽础鐚€傚鏋滄偍灏唍otifyOnChangeProps璁剧疆涓?tracked'锛孯eactQuery灏嗚窡韪偍鍦ㄦ覆鏌撴湡闂翠娇鐢ㄧ殑鏁版嵁骞惰嚜鍔ㄨ绠椾緷璧栭」鍒楄〃銆傛渶鍚庣殑鏁堟灉鍜屾墜鍔ㄧ淮鎶よ繖涓垪琛ㄦ槸涓€鏍风殑锛屽彧涓嶈繃浣犱笉鐢ㄥ啀鍏虫敞杩欎釜闂浜嗐€傛偍杩樺彲浠ュ叏灞€鍚敤姝ゅ姛鑳斤細constqueryClient=newQueryClient({defaultOptions:{queries:{notifyOnChangeProps:'tracked',},},})functionApp(){return({queryInfo.data}div>}缁撴瀯鍖栧叡浜玆eactQuery榛樿鍚敤鐨勪竴涓笉鍚屼絾涓嶅お閲嶈鐨勬覆鏌撲紭鍖栨槸缁撴瀯鍖栧叡浜€傛鍔熻兘纭繚鏁版嵁鍦ㄤ换浣曞湴鏂归兘琚敮涓€寮曠敤銆備緥濡傦紝鍋囪鎴戜滑鏈変互涓嬫暟鎹粨鏋勶細[{"id":1,"name":"LearnReact","status":"active"},{"id":2,"name":"LearnReactQuery","status":"todo"}]鐜板湪鍋囪鎴戜滑灏嗙涓€涓猼odo鍙樹负done锛岀劧鍚庢墽琛屽悗鍙伴噸鏂拌幏鍙栥€傛垜浠細浠庡悗绔緱鍒颁竴涓叏鏂扮殑json:{"id":1,"name":"LearnReact","status":"active"},{"id":1,"name":"LearnReact","status":"done"},{"id":2,"name":"LearnReactQuery","status":"todo"}]鐜板湪ReactQuery灏嗗皾璇曟瘮杈冩柊鏃х姸鎬佸敖鍙兘澶氬湴閲嶇敤鏃х姸鎬併€傚湪涓婇潰鐨勭ず渚嬩腑锛屽緟鍔炰簨椤规暟鎹皢鏄竴涓柊瀵硅薄锛屽洜涓烘垜浠洿鏂颁簡寰呭姙浜嬮」銆傜涓€涓猧d涓?鐨勫璞′篃灏嗘槸涓€涓柊瀵硅薄锛屼絾鏄浜巌d涓?鐨勫璞★紝鎴戜滑灏嗕繚鐣欎笌鐩稿簲鏃ф暟鎹浉鍚岀殑寮曠敤鈥斺€擱eactQuery浼氬皢鐩稿悓鐨勫紩鐢ㄥ鍒跺埌鏂版暟鎹腑锛屽洜涓鸿繖閮ㄥ垎鏁版嵁娌℃湁鏀瑰彉銆傝繖浣垮緱浣跨敤閫夋嫨鍣ㄥ浜庨儴鍒嗚闃呯壒鍒弸濂斤細//鉁呬粎褰搕odo涓甫鏈塱d:2鐨勫唴瀹瑰彂鐢熷彉鍖栨椂鎵嶄細閲嶆柊娓叉煋//鎰熻阿缁撴瀯鍏变韩const{data}=useTodo(2)姝ｅ鎴戜箣鍓嶆彁鍒扮殑锛屽浜庨€夋嫨鍣?structuredsharing浼氱敤鍒颁袱娆★細涓€娆＄敤鍦╭ueryFn杩斿洖鐨勭粨鏋滀笂锛屽彟涓€娆＄敤鍦╯elector杩斿洖鐨勭粨鏋滀笂銆傚湪鏌愪簺鍦烘櫙涓嬶紝灏ゅ叾鏄暟鎹噺澶х殑鍦烘櫙涓嬶紝缁撴瀯鍖栧叡浜細鎴愪负鐡堕銆傚悓鏃跺畠鍙兘鐢ㄤ簬JSON鍙簭鍒楀寲鏁版嵁銆傚鏋滀笉闇€瑕佹浼樺寲锛屽彲浠ラ€氳繃灏唖tructuralSharing璁剧疆涓篺alse鏉ュ叧闂鍔熻兘銆?/p>