鍦≧eact缁勪欢涓紝鎴戜滑浼氭墽琛寀seEffect()涓殑鏂规硶锛岃繑鍥炰竴涓嚱鏁版潵娓呴櫎瀹冪殑鍓綔鐢ㄣ€備笅闈㈡槸鎴戜滑涓氬姟涓殑涓€涓満鏅€傝嚜瀹氫箟Hooks鐢ㄤ簬璋冪敤鎺ュ彛姣?s鏇存柊涓€娆℃暟鎹€備粠'鍙嶅簲'瀵煎叆{useState锛寀seEffect}锛涘鍑哄嚱鏁皍seFetchDataInterval(fetchData){const[list,setList]=useState([]);useEffect(()=>{constid=setInterval(async()=>{constdata=awaitfetchData();setList(list=>list.concat(data));},2000);return()=>clearInterval(id);},[fetchData]);returnlist;}馃悮杩欎釜鏂规硶鐨勯棶棰橀棶棰樻槸娌℃湁鑰冭檻fetchData()鏂规硶鐨勬墽琛屾椂闂淬€傚鏋滃畠鐨勬墽琛屾椂闂磋秴杩?s锛屽氨浼氶€犳垚杞浠诲姟鐨勫爢绉€傝€屼笖浠ュ悗杩橀渶瑕佹妸杩欎釜瀹氭椂鍋氭垚鍔ㄦ€佺殑锛岀敱鏈嶅姟鍣ㄤ笅鍙戦棿闅旀椂闂达紝鍑忚交鏈嶅姟鍣ㄧ殑鍘嬪姏銆傛墍浠ヨ繖閲屾垜浠彲浠ヨ€冭檻鐢╯etTimeout浠ｆ浛setInterval銆傜敱浜庢瘡娆￠兘鍦ㄤ笂娆¤姹傚畬鎴愬悗璁剧疆寤惰繜鏃堕棿锛屾墍浠ュ彲浠ヤ繚璇佸畠浠笉浼氱疮鍔犮€備笅闈㈡槸淇敼鍚庣殑浠ｇ爜銆備粠'鍙嶅簲'瀵煎叆{useState锛寀seEffect}锛涘鍑哄嚱鏁皍seFetchDataInterval(fetchData){const[list,setList]=useState([]);useEffect(()=>{letid;asyncfunctiongetList(){constdata=awaitfetchData();setList(list=>list.concat(data));id=setTimeout(getList,2000);}getList();杩斿洖()=>clearTimeout(id);},[fetchData]);returnlist;}浣嗘槸鏀规垚setTimeout鍙堜細鍑虹幇鏂扮殑闂銆傚洜涓轰笅娆℃墽琛宻etTimeout闇€瑕佺瓑寰協etchData()瀹屾垚鍚庢墠浼氭墽琛屻€傚鏋滄垜浠湪fetchData()缁撴潫涔嬪墠鍗歌浇缁勪欢锛屾鏃禼learTimeout()鍙兘鏃犳剰涔夌殑娓呴櫎褰撳墠鎵ц鐨勫洖璋冿紝fetchData()涔嬪悗璋冪敤getList()鍒涘缓鐨勬柊鐨勫欢杩熷洖璋冧粛鐒朵細缁х画鎵ц銆傚湪绾跨ず渚嬶細CodeSandbox鍙互鐪嬪埌鐐瑰嚮鎸夐挳闅愯棌缁勪欢鍚庯紝鎺ュ彛璇锋眰鏁颁笉鏂鍔犮€傞偅涔堝浣曡В鍐宠繖涓棶棰樺憿锛熶笅闈㈡彁渚涗簡鍑犵瑙ｅ喅鏂规銆傪煂熷浣曡В鍐仇煇婸romiseEffect鍑虹幇杩欎釜闂鐨勫師鍥犳槸Promise鎵ц杩囩▼涓紝鍚庣画娌℃湁瀹氫箟鐨剆etTimeout()鏃犳硶鍙栨秷銆傛墍浠ラ鍏堟兂鍒扮殑鏄垜浠笉搴旇鐩存帴璁板綍timeoutID锛岃€屽簲璇ュ悜涓婅褰曟暣涓€昏緫Promise瀵硅薄銆傚綋Promise鎵ц鏃讹紝鎴戜滑娓呴櫎瓒呮椂浠ョ‘淇濇垜浠瘡娆￠兘鑳藉噯纭湴娓呴櫎浠诲姟銆傚湪绾跨ず渚嬶細CodeSandboximport{useState,useEffect}from'react';exportfunctionuseFetchDataInterval(fetchData){const[list,setList]=useState([]);useEffect(()=>{letgetListPromise;asyncfunctiongetList(){constdata=awaitfetchData();setList((list)=>list.concat(data));returnsetTimeout(()=>{getListPromise=getList();},2000);}getListPromise=getList();return()=>{getListPromise.then((id)=>clearTimeout(id));};},[fetchData]);returnlist;}馃惓涓婇潰AbortController鐨勬柟妗堝彲浠ヨ緝濂界殑瑙ｅ喅闂锛屼絾鏄綋缁勪欢鍗歌浇鐨勬椂鍊橮romise浠诲姟杩樺湪鎵ц锛屼細閫犳垚璧勬簮鐨勬氮璐广€備簨瀹炰笂锛岃鎴戜滑鎹釜瑙掑害鎬濊€冦€侾romise寮傛璇锋眰瀵逛簬缁勪欢鏉ヨ搴旇涔熸槸鍓綔鐢紝鍚屾牱闇€瑕佲€滄竻闆垛€濄€傚彧瑕佹竻闄romise浠诲姟锛屽悗闈㈢殑娴佺▼鑷劧涓嶄細鎵ц锛屼篃灏变笉瀛樺湪杩欎釜闂浜嗐€侰learingPromise鐩墠鍙互浣跨敤AbortController鏉ュ疄鐜般€傞€氳繃鍦╱ninstall鍥炶皟涓墽琛宑ontroller.abort()鏂规硶锛屾垜浠粓浜庤浠ｇ爜杩涘叆浜哛eject閫昏緫锛岄樆姝簡鍚庣画浠ｇ爜鐨勬墽琛屻€傚湪绾跨ず渚嬶細CodeSandboximport{useState,useEffect}from'react';鍑芥暟fetchDataWithAbort({fetchData,signal}){if(signal.aborted){returnPromise.reject("aborted");}returnnewPromise((resolve,reject)=>{fetchData().then(resolve,reject);signal.addEventListener("abort",()=>{reject("aborted");});});}functionuseFetchDataInterval(fetchData){const[list,setList]=useState([]);useEffect(()=>{letid;constcontroller=newAbortController();asyncfunctiongetList(){try{constdata=awaitfetchDataWithAbort({fetchData,signal:controller.signal});setList(list=>list.concat(data));id=setTimeout(getList,2000);}catch(e){console.error(e);}}getList();杩斿洖()=>{clearTimeout(id);controller.abort();};},[fetchData]);returnlist;}馃惉StatusMark涓婇潰鐨勬柟妗堬紝鎴戜滑鐨勬湰璐ㄦ槸璁╁紓姝ヨ姹傛姏鍑轰竴涓敊璇紝涓柇鍚庣画浠ｇ爜鐨勬墽琛屻€傚鏋滄垜璁剧疆涓€涓猣lag鍙橀噺锛屽彧鍦╢lag澶勪簬闈炲嵏杞界姸鎬佸悗鎵嶆墽琛屽悗缁€昏緫鍙互鍚楋紵浜庢槸绋嬪簭搴旇繍鑰岀敓銆傚鏋滃湪鍗歌浇鍥炶皟涓爣璁颁负鐪燂紝鍒欏畾涔変竴涓嵏杞藉彉閲忋€傚紓姝ヤ换鍔″悗锛屽垽鏂鏋渦nmounted===true锛屽垯涓嶆墽琛屽悗缁€昏緫锛岃揪鍒扮被浼兼晥鏋溿€傚湪绾跨ず渚嬶細CodeSandboximport{useState,useEffect}from'react';exportfunctionuseFetchDataInterval(fetchData){const[list,setList]=useState([]);useEffect(()=>{letid;letunmounted;asyncfunctiongetList(){constdata=awaitfetchData();if(unmounted){return;}setList(list=>list.concat(data));id=setTimeout(getList,2000);}getList();return()=>{unmounted=true;clearTimeout(id);}},[fetchData]);returnlist;}馃巸鍚庤闂鐨勬湰璐ㄦ槸鍦ㄩ暱鏃堕棿鐨勫紓姝ヤ换鍔′腑锛屽浣曟竻闄ょ粍浠跺嵏杞藉悗鐨勫悗缁壇浣滅敤銆傚叾瀹烇紝杩欎笉浠呴檺浜庢湰鏂囦腑鐨凜ase銆傛垜浠竴鑸妸璇锋眰鎺ュ彛鍐欏湪useEffect涓紝杩斿洖鍚庢洿鏂癝tate鐨勯€昏緫涔熶細鏈夌被浼肩殑闂銆傚彧鏄痵etState鍦ㄤ竴涓湭鍔犺浇鐨勭粍浠朵腑鏄病鏈変綔鐢ㄧ殑锛屽湪鐢ㄦ埛灞傞潰鏄病鏈夋劅鐭ョ殑銆傝€孯eact浼氬府鎴戜滑璇嗗埆鍦烘櫙銆傚鏋滅粍浠跺凡缁忓嵏杞斤紝鍐嶈繘琛宻etState鎿嶄綔锛屼細鏈塛arning鎻愮ず銆傚彟澶栦竴鑸紓姝ヨ姹傛瘮杈冨揩锛屾墍浠ュぇ瀹朵笉浼氭敞鎰忓埌杩欎釜闂銆傞偅涔堝浜庤繖涓棶棰橈紝鎮ㄨ繕鏈夊叾浠栬В鍐虫柟妗堝悧锛熸杩庤瘎璁虹暀瑷€~娉細棰樺浘鏉ヨ嚜銆奌ow To Call Web APIs with the useEffect Hook in React銆?/p>
