{"id":1209,"date":"2023-05-06T13:43:45","date_gmt":"2023-05-06T13:43:45","guid":{"rendered":"https:\/\/sora.sound.moe\/?p=1209"},"modified":"2023-05-06T13:43:45","modified_gmt":"2023-05-06T13:43:45","slug":"react-18-%e5%bc%82%e6%ad%a5%e7%bb%84%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/sora.sound.moe\/?p=1209","title":{"rendered":"React 18: \u5f02\u6b65\u7ec4\u4ef6"},"content":{"rendered":"\n<!--more-->\n\n\n\n<p><a href=\"https:\/\/sora.sound.moe\/?p=1170\">\u4e4b\u524d\u7684\u6587\u7ae0<\/a>\u63d0\u5230\uff0cReact 18 \u901a\u8fc7\u7ea6\u5b9a throw Promise \u7684\u65b9\u5f0f\u652f\u6301\u7ec4\u4ef6\u6267\u884c\u5f02\u6b65\u51fd\u6570\u65f6\u8fdb\u884c\u6682\u505c\uff08Suspense\uff09\u3002\u8fd9\u4e2a\u64cd\u4f5c\u6211\u7684\u8bc4\u4ef7\u662f\uff1a\u5f53\u7406\u89e3\u4e86\u5b83\u7684\u539f\u7406\u4e4b\u540e\u4f1a\u89c9\u5f97\u5341\u5206\u5de7\u5999\uff0c\u4f46\u5e26\u6765\u4e86\u989d\u5916\u7684\u7406\u89e3\u6210\u672c\u3002<\/p>\n\n\n\n<h2>\u5728 React \u7ec4\u4ef6\u91cc\u7528 Async\/Await \u4f1a\u53d1\u751f\u4ec0\u4e48<\/h2>\n\n\n\n<p>\u4f46\u8fd9\u4e2a\u4e8b\u60c5\u4e3a\u4ec0\u4e48\u8981\u8fd9\u6837\u505a\uff0c\u4e3a\u4ec0\u4e48\u4e0d\u76f4\u63a5\u4f7f\u7528 async\/await\uff1f<\/p>\n\n\n\n<p>\u5f53\u5e74 React \u56e2\u961f\u5728 React Server Componet \u7684 RFC \u4e2d\u662f<a href=\"https:\/\/github.com\/josephsavona\/rfcs\/blob\/2ccdbf093cbe73cad1a04f25750138e80dfa4abe\/text\/0000-server-components.md#why-dont-use-just-use-asyncawait\">\u8fd9\u4e48\u8bf4\u7684<\/a>\uff1a<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>Why don\u2019t use just use async\/await?<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>We\u2019d still need a layer on top, for example, to deduplicate fetches between components within a single request. This is why there are wrappers around async APIs. You will be able to write your own. We also want to avoid delays in the case that data is synchronously available \u2014 note that async\/await uses Promises and incurs an extra tick in these cases.<\/p>\n<\/blockquote>\n\n\n\n<p>\u542c\u7740\u5c31\u6709\u70b9\u626f\u6de1\u554a\uff01\u4f60\u5728\u8bb2\u4ec0\u4e48 1 tick \u7684 overhead?? \u505a deduplicate \u4e5f\u4e0d\u662f\u4e0d\u7528 async\/await \u7684\u7406\u7531\u5427\uff01<\/p>\n\n\n\n<p>\u4f46\u5176\u5b9e\u786e\u5b9e\u5b58\u5728\u4e00\u4e2a\u95ee\u9898\uff1a<\/p>\n\n\n\n<p>\u4f17\u6240\u5468\u77e5\uff0c\u5728 JavaScript \u4e2d\u9047\u5230\u9700\u8981 await \u7684\u64cd\u4f5c\uff0c\u5f53\u524d\u6267\u884c\u4f1a\u88ab\u6302\u8d77\uff0c\u76f4\u81f3 Promise resolve \uff08\u51c6\u786e\u7684\u8bf4\u5e94\u8be5\u662f settle \uff0c\u8981\u4e48 resolve\uff0c\u8981\u4e48 reject\uff09\u4e4b\u540e\uff0c\u56de\u5230\u5f53\u524d\u4e0a\u4e0b\u6587\u7ee7\u7eed\u6267\u884c\u3002<\/p>\n\n\n\n<p>Async\/Await \u548c throw \u7684\u533a\u522b\u5728\u4e8e\u524d\u8005\u662f\u6682\u505c\uff0c\u540e\u8005\u662f\u4e2d\u65ad\u3002\u5f02\u6b65\u64cd\u4f5c\u5b8c\u6210\u4e4b\u540e\uff0cAwait \u4e4b\u540e\u7684\u8bed\u53e5\u8fd8\u4f1a\u88ab\u7ee7\u7eed\u6267\u884c\uff0c\u800c\u5047\u5982\u4f7f\u7528 throw \u5219\u4e0d\u4f1a\u3002\u5728\u8fd9\u4e2a\u60c5\u666f\u4e0b\uff0c\u5047\u5982\u4e0a\u4e0b\u6587\u53d1\u751f\u53d8\u5316\uff0c\u90a3\u6211\u4eec\u81ea\u7136\u5e94\u8be5\u671f\u671b\u6574\u4e2a\u7ec4\u4ef6\u7684 Render \u91cd\u65b0\u6267\u884c\u3002<\/p>\n\n\n\n<p>\u5728 React \u7684\u89d2\u5ea6\uff0c\u5982\u679c\u7528 Async\/Await\uff0c\u9047\u5230\u7ec4\u4ef6\u53d1\u751f\u5f02\u6b65\u64cd\u4f5c\uff0c\u5c31\u5f97\u7b49\u5f02\u6b65\u64cd\u4f5c\u7ed3\u675f\u4e4b\u540e\u518d\u820d\u5f03\u6389\u8fd9\u6b21\u7684\u7ed3\u679c\uff0c\u518d\u6e32\u67d3\u4e00\u6b21\u3002\u8fd9\u6837\u505a\u7684\u8bdd\u7b2c\u4e00\u6b21\u6e32\u67d3\u65f6 await \u8bed\u53e5\u540e\u9762\u7684\u903b\u8f91\u4e5f\u4f1a\u88ab\u7ee7\u7eed\u6267\u884c\uff0c\u8fd9\u91cc\u4f1a\u9020\u6210\u989d\u5916\u7684\u5f00\u9500\uff0c\u5e76\u4e14\u7ea6\u675f\u7ec4\u4ef6\u5185\u903b\u8f91\u4e0d\u80fd\u6709\u526f\u4f5c\u7528\uff08\u5c3d\u7ba1 React \u7ec4\u4ef6\u786e\u5b9e\u672c\u6765\u5c31\u4e0d\u5e94\u8be5\u6709\u526f\u4f5c\u7528\uff09\u3002\u8981\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u4f3c\u4e4e\u53ef\u4ee5\u4ece complier \u5c42\u9762\u505a\uff0c\u5728 await \u8bed\u53e5\u4e4b\u540e\u52a0\u5165\u68c0\u67e5\u70b9\uff0c\u5f15\u5165 AbortSignal \u4e4b\u7c7b\u7684\u673a\u5236\uff0c\u542c\u8d77\u6765\u5c31\u5f88\u9ebb\u70e6\u3002<\/p>\n\n\n\n<p>\u6b64\u5916\uff0c\u9047\u5230\u5f02\u6b65\u64cd\u4f5c\u540e\u9700\u8981\u7b49\u5f85\u5f02\u6b65\u64cd\u4f5c\u5b8c\u6210\u8fdb\u884c\u518d\u6b21\u6e32\u67d3\uff08React \u79f0\u4e4b\u4e3a Replay\uff09\uff0c\u4f46\u53ea\u8981\u662f await \u5fc5\u5b9a\u4f1a\u53d1\u751f \u6682\u505c \u2013 \u4e0b\u4e00\u4e2a microtask \u7ee7\u7eed\u7684\u6d41\u7a0b\uff0c\u8fd9\u91cc React \u81f3\u5c11\u8981\u7b49\u4e00\u4e2a microtask\uff0c\u7b2c\u4e8c\u6b21\u6e32\u67d3\u6ca1\u6cd5\u505a\u5230\u540c\u6b65\uff0c\u8fd9\u91cc\u6709\u4e00\u4e2a\u989d\u5916\u5f00\u9500\u3002<\/p>\n\n\n\n<p>\u603b\u7ed3\u4e00\u4e0b\uff0c\u7528 throw \u6bd4 Async\/Await \u81f3\u5c11\u5b58\u5728\u4ee5\u4e0b\u4e24\u4e2a\u4f18\u52bf\uff1a<\/p>\n\n\n\n<ol>\n<li>\u4e0d\u7528\u518d\u6267\u884c await \u8bed\u53e5\u540e\u7684\u903b\u8f91\u3002<\/li>\n\n\n\n<li>\u5982\u6709\u540c\u6b65\u7684\u7f13\u5b58\u673a\u5236\uff0c\u5219 Replay \u53ef\u4ee5\u540c\u6b65\u5b8c\u6210\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u8fd8\u6709\u522b\u7684\u5417\uff1f\u8ba9\u6211\u4eec\u770b\u770b React \u5b98\u65b9\u662f<a href=\"https:\/\/github.com\/acdlite\/rfcs\/blob\/9c21ca1a8e39d19338ba750ee3ff6f6c0724a51c\/text\/0000-first-class-support-for-promises.md#why-cant-client-components-be-async-functions\">\u600e\u4e48\u8bf4\u7684<\/a>\uff1a<\/p>\n\n\n\n<p>\uff08\u6709\u70b9\u957f\uff0c\u4e0d\u5f15\u7528\u4e86\uff0c\u94fe\u63a5\u6233\u6233\uff09<\/p>\n\n\n\n<p>\u7531\u4e8e\u4e0a\u9762\u8bf4\u7684 await \u5fc5\u7136\u6682\u505c\u7684\u95ee\u9898\uff0c\u91cd\u6e32\u67d3\u7ec4\u4ef6\u65f6\u4e5f\u4f1a\u53d1\u751f\u95ee\u9898\u3002React \u7ec4\u4ef6\u5728\u5b9e\u9645\u4f7f\u7528\u4e2d\u7ecf\u5e38\u53d1\u751f\u91cd\u6e32\u67d3\uff0c\u800c\u5f88\u591a\u91cd\u6e32\u67d3\u90fd\u662f\u4e0d\u5e94\u8be5\u518d\u6b21\u89e6\u53d1\u5f02\u6b65\u64cd\u4f5c\u7684\uff0c\u4f8b\u5982\u65e0\u5173 props \u53d1\u751f\u53d8\u5316\u3002\u4f46\u5982\u679c\u4f7f\u7528 await \u5c31\u5fc5\u7136\u4f1a\u8fdb\u5165\u5f02\u6b65\u6d41\u7a0b\uff0c\u7528 throw \u914d\u5408\u540c\u6b65\u7684\u7f13\u5b58\u673a\u5236\u5219\u4e0d\u9700\u8981\uff0c\u8fd9\u610f\u5473\u7740\u6bcf\u6b21\u91cd\u6e32\u67d3\u81f3\u5c11\u6d6a\u8d39\u4e00\u4e2a microtask tick\uff01\u8fd9\u5c31\u6bd4\u8f83\u81f4\u547d\u4e86\u3002\u800c\u4e14\u8fd9\u4e2a\u95ee\u9898\u8fd8\u65e0\u89e3\uff0cJavaScript \u7684\u8bed\u6cd5\u5c31\u89c4\u5b9a\u4e86 await \u5fc5\u7136\u662f\u5f02\u6b65\u8fd4\u56de\u7684\uff0c\u8fd9\u4e5f\u662f\u4e3a\u4ec0\u4e48 React \u56e2\u961f\u8bf4\u5047\u5982\u5c06\u6765\u652f\u6301\u4e86\u5728\u7ec4\u4ef6\u4e2d\u76f4\u63a5\u7528 await \u4e5f\u662f\u4f1a\u4f7f\u7528\u7f16\u8bd1\u5668\u7f16\u8bd1\u5230\u7279\u6b8a\u7684 generator \u4ee3\u7801\u800c\u975e\u76f4\u63a5\u7528 await\u3002<\/p>\n\n\n\n<h2>\u4f46\u5728 RSC \u91cc\u7528\u4e5f\u4e0d\u662f\u4e0d\u884c<\/h2>\n\n\n\n<p>\u54ce\u4f60\u53ef\u80fd\u53c8\u8981\u8bf4\u4e86\uff0c\u90a3\u6211 Server Component \u6ca1\u6709\u8fd9\u4e9b\u95ee\u9898\u5440\uff0c\u6bd5\u7adf Server Componet \u53ea\u6e32\u67d3\u4e00\u6b21\uff0c\u4e5f\u6ca1\u6709\u72b6\u6001\u3002\u4f60\u8bf4\u5f97\u5bf9\uff0c\u6240\u4ee5\u5728\u65b0\u7684 RFC \u91cc\uff0cReact <a href=\"https:\/\/github.com\/acdlite\/rfcs\/blob\/9c21ca1a8e39d19338ba750ee3ff6f6c0724a51c\/text\/0000-first-class-support-for-promises.md#example-await-in-server-components\">\u5c06\u4f1a\u652f\u6301<\/a>\u5728 React Server Componet \u4e2d\u76f4\u63a5\u4f7f\u7528 Async\/Await\u3002<\/p>\n\n\n\n<p>\u4e4b\u524d\uff0cReact \u56e2\u961f\u4e3b\u8981\u662f\u8003\u8651\u5230\u670d\u52a1\u7aef\u548c\u5ba2\u6237\u7aef\u7684\u8bed\u6cd5\u4e00\u81f4\u6027\uff0c\u6240\u4ee5\u6ca1\u6709\u652f\u6301\u76f4\u63a5\u5728 RSC \u4f7f\u7528 Async\/Await \u8bed\u6cd5\uff0c\u4f46\u540e\u7eed\u53cd\u9988\u548c\u4f7f\u7528\u8ba9\u4ed6\u4eec\u610f\u8bc6\u5230\u8bed\u6cd5\u4e00\u81f4\u6027\u7684\u6536\u76ca\u5e76\u6ca1\u6709\u90a3\u4e48\u5927\u3002\u5728 RSC \u76f4\u63a5\u7528 Async\/Await \u66f4\u52a0\u7b80\u660e\u76f4\u767d\u3001\u5bb9\u6613\u7406\u89e3\u3002\u6b64\u5916\u4ed6\u4eec\u8fd8\u8bf4\uff0c\u4e24\u8fb9\u7528\u4e0d\u4e00\u6837\u7684\u8bed\u6cd5\u53ef\u4ee5\u66f4\u597d\u533a\u5206\u4ee3\u7801\u73af\u5883\u2026\u2026\uff08\u5443\u8fd9\u4e2a\u5c31\u6709\u70b9\u7275\u5f3a<\/p>\n\n\n\n<h2>\u7b80\u5316\u5f02\u6b65\u7ec4\u4ef6\uff0c\u505a\u4eba\u6c11\u7fa4\u4f17\u559c\u6b22\u7684 React<\/h2>\n\n\n\n<p>\u6240\u4ee5\u6211\u4eec\u521a\u521a\u8ba8\u8bba\u4e86\uff0c\u76ee\u524d\u6765\u8bf4\u5728 Client Componet \u4e2d\uff0c\u5982\u679c\u6709\u5f02\u6b65\u64cd\u4f5c\uff0c\u8fd8\u662f\u5f97\u7528 throw &#8211; Suspense \u8fd9\u4e00\u5957\u64cd\u4f5c\u3002<\/p>\n\n\n\n<p>\u7b80\u5355\u6765\u8bf4\u5c31\u662f\u9047\u5230\u5f02\u6b65\u64cd\u4f5c\u65f6\u5019\u901a\u8fc7 throw \u8bed\u6cd5\u4e2d\u65ad\u8fd0\u884c\uff0cReact \u8c03\u5ea6\u7b49\u5f85\u5f02\u6b65\u64cd\u4f5c\u5b8c\u6210\u540e\u91cd\u65b0\u6e32\u67d3\uff08Replay\uff09\u5f53\u524d\u7ec4\u4ef6\u3002\u5728\u4e4b\u524d\u7684 React \u7248\u672c\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u628a Promise \u6254\u51fa\u53bb\uff0c\u518d\u628a\u7ec4\u4ef6\u7528 Suspense \u5305\u4e00\u5305\uff0c\u5c31\u80fd\u5b8c\u6210\u8fd9\u4e2a\u4e8b\u60c5\u3002<\/p>\n\n\n\n<p>\u542c\u8d77\u6765\u5e76\u4e0d\u590d\u6742\uff0c\u4f46\u5176\u5b9e\u3010\u5982\u4f55\u628a\u4e00\u4e2a Promise \u6b63\u786e throw \u51fa\u53bb\u3011\u662f\u4e00\u4ef6\u5b9e\u73b0\u8d77\u6765\u5bb9\u6613\u8e29\u5751\u7684\u4e8b\u60c5\u3002\u5728\u4e4b\u524d\u6587\u7ae0\u4e2d\u4e00\u5f00\u5934\uff0c\u6211\u5199\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u4f8b\u5b50\u6f14\u793a\u5982\u4f55\u6254\u8fd9\u4e2a Promise\uff0c\u4f46\u662f\u8fd9\u4e2a\u5b9e\u73b0\u662f\u6709\u95ee\u9898\u7684\uff1a<\/p>\n\n\n\n<p>\u9996\u5148\u6211\u4eec\u9700\u8981\u8bb0\u5f55\u8fd9\u4e2a Promise \u7684\u72b6\u6001\uff0c\u6240\u4ee5\u6211\u5f15\u5165\u4e86\u4e00\u4e2a&nbsp;<code>isLoaded<\/code>&nbsp;\u6807\u5fd7\uff0c\u8fd9\u4e2a\u6807\u5fd7\u5fc5\u987b\u5728\u7ec4\u4ef6\u5916\uff0c\u56e0\u4e3a Suspense \u4e0d\u4f1a\u4fdd\u5b58\u4efb\u4f55\u7ec4\u4ef6\u72b6\u6001\uff0c\u5305\u62ec Hooks \u72b6\u6001\u3002\u8fd9\u6837\u4f3c\u4e4e\u89e3\u51b3\u4e86\u95ee\u9898\uff0c\u4f46\u8fd9\u4e2a\u53d8\u91cf\u5355\u7eaf\u653e\u5728\u7ec4\u4ef6\u5916\u4f9d\u7136\u662f\u6709\u95ee\u9898\u7684\uff0c\u56e0\u4e3a\u4f1a\u5bfc\u81f4\u7ec4\u4ef6\u7684 Tearing\uff08\u4f8b\u5982\u4e24\u4e2a\u7ec4\u4ef6\u7528\u4e86\u540c\u4e00\u4e2a Promise\uff0c\u4f46\u5728\u4e24\u4e2a\u7ec4\u4ef6\u6e32\u67d3\u7684\u4e2d\u95f4\u65f6\u95f4 Promise \u72b6\u6001\u53d8\u5316\uff09\u3002<\/p>\n\n\n\n<p>\u54ce\u4f60\u80af\u5b9a\u8981\u8bf4\u4e86\uff0c\u6211\u7b2c\u4e09\u65b9\u7684\u5c01\u88c5\u4e0d\u5c31\u597d\u4e86\u3002\u4f60\u8bf4\u5f97\u5bf9\uff0c\u6240\u4ee5 React \u641e\u4e86\u4e00\u4e2a\u5c01\u88c5\uff0c\u8fd9\u4e2a\u65b0\u7684 Hooks \u53eb&nbsp;<code>use<\/code>&nbsp;\u3002<\/p>\n\n\n\n<p>\uff08\u771f\u60f3\u5410\u69fd\u8fd9\u4e2a\u547d\u540d\u554a\uff09<\/p>\n\n\n\n<p><code>use<\/code> \u505a\u7684\u4e8b\u60c5\u5c31\u662f\u5c06 Promise \u89e3\u5305\u51fa\u7ed3\u679c\uff0c\u7c97\u7565\u7b49\u4ef7\u4e8e\u4f7f\u7528 await\uff0c\u533a\u522b\u5c31\u5728\u4e8e\u5b83\u7684\u5185\u90e8\u5b9e\u73b0\u662f\u4f7f\u7528\u4e86 throw\u3002\u5728\u5185\u90e8\u5b9e\u73b0\u4e2d\uff0c\u65b0\u7684 <code>use<\/code> \u4e5f\u5e76\u975e throw \u4e00\u4e2a Promise\uff0c\u800c\u662f throw \u4e86\u4e00\u4e2a\u7279\u5236\u7684\u5f02\u5e38\uff0c\u800c\u72b6\u6001\/\u7ed3\u679c\u5b57\u6bb5\u5219\u662f\u76f4\u63a5\u6269\u5c55\u5728\u4e86 Promise \u672c\u8eab\u4e0a\u3002<\/p>\n\n\n\n<p>\u5b83\u7684\u8868\u73b0\u548c\u4e4b\u524d\u7684 throw Promise \u57fa\u672c\u4e0a\u4e00\u81f4\uff0c\u8fd9\u91cc\u5c31\u4e0d\u8fc7\u591a\u505a\u4ecb\u7ecd\u3002<\/p>\n\n\n\n<p>\u91cd\u70b9\u770b\u4e0b\u5728\u7ec4\u4ef6\u91cd\u6e32\u67d3\u7684\u65f6\u5019\uff0c <code>use<\/code> \u5982\u4f55\u505a\u5230\u5c3d\u91cf\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u5f02\u6b65\u64cd\u4f5c\u3002<\/p>\n\n\n\n<ul>\n<li>\u5982\u679c\u4f20\u7ed9 <code>use<\/code> \u7684 Promise \u5b9e\u4f8b\u6ca1\u6709\u53d1\u751f\u53d8\u5316\uff08\u6bd4\u5982\u7528 <code>useMemo<\/code> \u505a\u4e86\u7f13\u5b58\uff09\uff0c\u90a3\u4e48\u76f4\u63a5\u901a\u8fc7\u6302\u5728 Promise \u4e0a\u7684\u4fe1\u606f\u8fd4\u56de\u4e4b\u524d\u7684\u7ed3\u679c\u3002\u8fd9\u4e2a\u8fc7\u7a0b\u662f\u540c\u6b65\u7684\u3002<\/li>\n\n\n\n<li>\u5982\u679c\u7ec4\u4ef6 Props\/State \u53d1\u751f\u53d8\u5316\uff0c\u4f46\u53d8\u5316\u7684\u662f\u65e0\u5173\u5165\u53c2\uff0c\u4f8b\u5982\uff1a<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>async function fetchTodo(id) {\n  const data = await fetchDataFromCache(`\/api\/todos\/${id}`);\n  return {contents: data.contents};\n}\n\nfunction Todo({id, isSelected}) {\n  const todo = use(fetchTodo(id));\n  return (\n    &lt;div className={isSelected ? 'selected-todo' : 'normal-todo'}&gt;\n      {todo.contents}\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\u8fd9\u91cc\u7684 Promise \u5e94\u8be5\u6839\u636e\u4e0d\u540c <code>id<\/code> \u8fd4\u56de\u4e0d\u540c\u7ed3\u679c\u3002\u4f46\u5982\u679c\u662f <code>isSelected<\/code> \u53d1\u751f\u4e86\u53d8\u5316\uff0cPromise \u5e94\u8be5\u4f1a\u8fd4\u56de\u76f8\u540c\u7684\u503c\u3002\u8fd9\u91cc\u6700\u7406\u60f3\u7684\u65b9\u6848\u81ea\u7136\u662f\u5c06 Promise \u5305\u88c5\u4e00\u5c42\u5b9e\u73b0\u4e00\u4e2a\u540c\u6b65\u7f13\u5b58\uff0c\u6216\u8005\u7528 <code>useMemo<\/code> \u786e\u4fdd Promise \u4e0d\u53d1\u751f\u53d8\u5316\u3002\u4f46\u5982\u679c\u7f13\u5b58\u53ea\u505a\u5728\u4e86 Promise \u5185\u90e8\uff0c\u90a3\u4e48 React \u4f1a\u7b49\u4e00\u4e2a micotask tick\uff0c\u770b\u770b Promise \u662f\u5426\u7acb\u5373\u8fd4\u56de\u4e86\uff0c\u5982\u679c\u7acb\u5373\u8fd4\u56de\u5219\u7ec4\u4ef6\u4e0d\u4f1a\u8fdb\u5165 Suspend \u72b6\u6001\u3002<\/p>\n\n\n\n<p>\u8fd9\u662f\u4e0d\u662f\u542c\u8d77\u6765\u6709\u70b9\u8033\u719f\uff1f\u8fd9\u5c31\u662f\u7528 Async\/Await \u4f1a\u9047\u5230\u7684\u95ee\u9898\uff0c\u53ea\u662f\uff0c\u73b0\u5728\u6211\u4eec\u81f3\u5c11\u53ef\u4ee5\u6709\u65b9\u6cd5\u53bb\u907f\u514d\u3002<\/p>\n\n\n\n<ul>\n<li>\u6700\u540e\uff0c\u5982\u679c\u771f\u7684\u662f Promise \u7684\u5165\u53c2\u53d8\u4e86\uff0c\u90a3\u4e48\u81ea\u7136\u7ec4\u4ef6\u8fdb\u5165 Suspend \u72b6\u6001\uff0c\u7b49\u5f85 Promise \u8fd4\u56de\u3002<\/li>\n<\/ul>\n\n\n\n<h2>\u7f13\u5b58\uff0c\u8fd8\u662f\u5f97\u7f13\u5b58<\/h2>\n\n\n\n<p>\u6709\u6ca1\u6709\u53d1\u73b0\u4e4b\u524d\u7684\u8ba8\u8bba\u4e2d\u51e0\u4e4e\u6bcf\u53e5\u8bdd\u90fd\u8981\u8ba8\u8bba\u7f13\u5b58\u3002\u5728\u73b0\u5728\u7684 React \u4e2d\uff0c\u6d89\u53ca\u5230\u5f02\u6b65\u64cd\u4f5c\uff0c\u7f13\u5b58\u662f\u7ed5\u4e0d\u5f00\u7684\u70b9\u3002\u5b9e\u9645\u4e0a\u5728\u8fd9\u6837\u7684\u8bbe\u8ba1\u6a21\u5f0f\u4e2d\uff0c\u7ed9 React \u7f16\u7a0b\u63d0\u51fa\u4e86\u4e00\u4e9b\u65b0\u7684\u8981\u6c42\uff1a<\/p>\n\n\n\n<ul>\n<li>\u7ec4\u4ef6\u5e42\u7b49\u3002\u5c3d\u7ba1 React \u7684\u7ec4\u4ef6\uff0c\u6309\u9053\u7406\u6765\u8bf4\u5c31\u662f\u5e94\u8be5\u5e42\u7b49\u7684\uff0c\u5373 f(State) = UI \u7684\u6982\u5ff5\uff0c\u5bf9\u4e8e\u4e0d\u53d8\u7684 State \u5fc5\u7136\u5e94\u8be5\u6e32\u67d3\u51fa\u4e0d\u53d8\u7684\u7ed3\u679c\u3002\u4f46\u5b9e\u9645\u4e0a\u5728\u4e4b\u524d\u7684\u65f6\u4ee3\u91cc\uff0c\u4f60\u975e\u8981\u5199\u4e2a\u4e0d\u5e42\u7b49\u7684\u7ec4\u4ef6\uff0c\u4e5f\uff0c\u4e5f\u4e0d\u662f\u4e0d\u884c\uff0c\u53ea\u8981\u522b\u628a\u81ea\u5df1\u641e\u6210\u6b7b\u5faa\u73af\u2026 \u4f46\u73b0\u5728\uff0c\u7531\u4e8e\u7ec4\u4ef6 Suspend \u4e4b\u540e\u9700\u8981 Replay\uff0c\u4f60\u8981\u662f\u5199\u4e2a\u4e0d\u5e42\u7b49\u7684\u73a9\u610f\uff0c\u6211\u90fd\u4e0d\u6562\u60f3\u4f1a\u53d1\u751f\u5565\u3002<\/li>\n\n\n\n<li>\u540c\u6b65\u7f13\u5b58\u3002\u5982\u679c\u5728\u7ec4\u4ef6\u91cc\u505a\u4e86\u5f02\u6b65\u7684\u6570\u636e\u83b7\u53d6\uff0c\u7531\u4e8e React \u7ec4\u4ef6\u65f6\u5e38\u91cd\u65b0\u6e32\u67d3\uff0c\u6700\u7406\u60f3\u7684\u7f13\u5b58\u5b9e\u73b0\u5e94\u8be5\u662f\u5bf9\u4e8e\u5df2\u7ecf\u6709\u7ed3\u679c\u7684\u8c03\u7528\u80fd\u591f\u505a\u5230\u540c\u6b65\u8fd4\u56de\uff0c\u8fd9\u6837\u53ef\u4ee5\u6700\u5927\u7a0b\u5ea6\u51cf\u5c11\u91cd\u6e32\u67d3\u7684\u5f00\u9500\u3002\u5bf9\u6b64\uff0cReact \u540e\u7eed\u4f1a\u63a8\u51fa\u4e00\u4e2a <code>cache<\/code> \u65b9\u6cd5\u5e2e\u52a9\u5f00\u53d1\u8005\u505a\u8fd9\u4e2a\u6216\u8bb8\u53ef\u80fd\u4f1a\u6709\u4e00\u4e9b tricky \u7684\u4e8b\u60c5\u3002React \u56e2\u961f\u4e5f\u8868\u793a <code>cache<\/code> \u548c <code>use<\/code> \u5728\u6b63\u5f0f\u63a8\u51fa\u7684\u65f6\u5019\u5c06\u4f1a\u6346\u7ed1\u5728\u4e00\u8d77\u3002\u5b83\u53ef\u80fd\u4f1a\u957f\u8fd9\u6837\uff1a<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ A cached function returns the same response for a given set of inputs \u2014\n\/\/ id, in this example. The `cache` proposal will also have a mechanism to\n\/\/ invalidate the cache, and to scope it to a particular part of the UI.\nconst fetchNote = cache(async (id) =&gt; {\n  const response = await fetch(`\/api\/notes\/${id}`);\n  return await response.json();\n});\n\nfunction Note({id}) {\n  \/\/ The `fetchNote` call returns the same promise every time until a new id\n  \/\/ is passed, or until the cache is refreshed.\n  const note = use(fetchNote(id));\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;{note.title}&lt;\/h1&gt;\n      &lt;section&gt;{note.body}&lt;\/section&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>\u5b9e\u9645\u4e0a swr\u3001react-query \u7b49\u7b2c\u4e09\u65b9\u5e93\u4e4b\u524d\u5df2\u7ecf\u90fd\u6709\u505a\u4e86\u6bd4\u8f83\u5b8c\u5584\u7684\u7f13\u5b58\u548c\u53bb\u91cd\uff0c\u63a5\u5230 React \u8fd9\u5957\u65b0\u4e1c\u897f\u91cc\u5e94\u8be5\u6539\u52a8\u4e5f\u4e0d\u5927\u3002<\/p>\n\n\n\n<h2>\u788e\u788e\u5ff5<\/h2>\n\n\n\n<ul>\n<li>\u6700\u8fd1\u7684\u4e00\u4e9b\u6587\u7ae0\u90fd\u662f\u5728 Notion \u91cc\u5b8c\u6210\u7684\uff0cNotion \u7684\u7f16\u8f91\u5668\u786e\u5b9e\u633a\u8212\u670d\u7684\u3002<\/li>\n\n\n\n<li>\u8fd9\u7bc7\u6587\u7ae0\u81f3\u5c11\u7b80\u5355\u63a2\u8ba8\u4e86\u4e00\u4e0b\u53bb\u5e7410\u6708 React \u56e2\u961f\u641e\u51fa\u6765\u7684\u8fd9\u7bc7\u65b0\u7684 RFC\uff08\u6211\u771f\u80fd\u62d6\uff09\uff0c\u5982\u679c\u8981\u8be6\u7ec6\u4e86\u89e3\uff0c\u5927\u5bb6\u5e94\u8be5\u770b\u4e00\u4e0b RFC \u7684\u539f\u6587\u3001\u722c\u4e00\u4e0b Issue \u7684\u697c\u3002\u94fe\u63a5\u5728\u8fd9\uff1a<a href=\"https:\/\/github.com\/reactjs\/rfcs\/pull\/229\"><\/a><a href=\"https:\/\/github.com\/reactjs\/rfcs\/pull\/229\">https:\/\/github.com\/reactjs\/rfcs\/pull\/229<\/a><\/li>\n\n\n\n<li>React \u771f\u662f\u8d8a\u6765\u8d8a\u590d\u6742\u4e86\u3002<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"twentyseventeen-featured-image":false,"twentyseventeen-thumbnail-avatar":false},"uagb_author_info":{"display_name":"Sora","author_link":"https:\/\/sora.sound.moe\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/sora.sound.moe\/index.php?rest_route=\/wp\/v2\/posts\/1209"}],"collection":[{"href":"https:\/\/sora.sound.moe\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sora.sound.moe\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sora.sound.moe\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sora.sound.moe\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1209"}],"version-history":[{"count":5,"href":"https:\/\/sora.sound.moe\/index.php?rest_route=\/wp\/v2\/posts\/1209\/revisions"}],"predecessor-version":[{"id":1215,"href":"https:\/\/sora.sound.moe\/index.php?rest_route=\/wp\/v2\/posts\/1209\/revisions\/1215"}],"wp:attachment":[{"href":"https:\/\/sora.sound.moe\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sora.sound.moe\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sora.sound.moe\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}