{"id":107,"date":"2025-05-10T11:05:35","date_gmt":"2025-05-10T03:05:35","guid":{"rendered":"https:\/\/blog.fennubird.cn\/?p=107"},"modified":"2025-05-10T11:05:35","modified_gmt":"2025-05-10T03:05:35","slug":"%e7%8e%b0%e4%bb%a3-react-%e5%bc%80%e5%8f%91%e5%bf%85%e5%a4%87%e7%9a%84-13-%e4%b8%aa%e7%a5%9e%e5%ba%93%ef%bc%8c%e8%b7%af%e7%94%b1%e3%80%81ui-%e7%bb%84%e4%bb%b6%e5%ba%93%e3%80%81%e6%8b%96%e6%8b%bd","status":"publish","type":"post","link":"https:\/\/fennubird.cn\/index.php\/2025\/05\/10\/%e7%8e%b0%e4%bb%a3-react-%e5%bc%80%e5%8f%91%e5%bf%85%e5%a4%87%e7%9a%84-13-%e4%b8%aa%e7%a5%9e%e5%ba%93%ef%bc%8c%e8%b7%af%e7%94%b1%e3%80%81ui-%e7%bb%84%e4%bb%b6%e5%ba%93%e3%80%81%e6%8b%96%e6%8b%bd\/","title":{"rendered":"\u73b0\u4ee3 React \u5f00\u53d1\u5fc5\u5907\u7684 13 \u4e2a\u795e\u5e93\uff0c\u8def\u7531\u3001UI \u7ec4\u4ef6\u5e93\u3001\u62d6\u62fd\u3001\u865a\u62df\u5217\u8868\u90fd\u9f50\u4e86"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u6210\u4e3a\u4e00\u4e2a\u73b0\u4ee3\u7684 React \u5f00\u53d1\u8005\uff0c\u4e0d\u4ec5\u9700\u8981\u7406\u89e3 React \u7684\u6838\u5fc3\u6982\u5ff5\uff0c\u8fd8\u9700\u8981\u5bf9\u6574\u4e2a React \u751f\u6001\u7cfb\u7edf\u4e86\u5982\u6307\u638c\u3002\u6240\u4ee5\u4eca\u5929\u548c\u5927\u5bb6\u6765\u5206\u4eab\u4e00\u4e0b\u8fd9\u7bc7<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fdev.to%2Fashutoshmishra%2F13-must-know-libraries-for-a-react-developer-g57\" target=\"_blank\" rel=\"noreferrer noopener\"> 13 Must Know Libraries for a React Developer<\/a>\uff0c\u770b\u770b\u6b63\u5728\u4f7f\u7528 React \u5f00\u53d1\u7684\u4f60\uff0c\u662f\u4e0d\u662f\u90fd\u4f7f\u7528\u8fc7\u8fd9\u4e9b\u6d41\u884c\u7684\u5e93\u4e86\uff1f~<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b66\u4e60\u5e38\u7528\u7684\u5e93\u76f8\u5173\u7684\u77e5\u8bc6\uff0c\u53ef\u4ee5\u5927\u5927\u7b80\u5316\u4f60\u7684\u5f00\u53d1\u8fc7\u7a0b\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5373\u4f7f\u4f60\u6ca1\u6709\u5177\u4f53\u7528\u8fc7\uff0c\u4f60\u4e5f\u81f3\u5c11\u5e94\u8be5\u77e5\u9053\u5b83\u4eec\u7684\u5b58\u5728\u4ee5\u53ca\u5b83\u4eec\u89e3\u51b3\u7684\u95ee\u9898\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u91cc\u5217\u51fa\u4e86\u4f5c\u4e3a React \u5f00\u53d1\u8005\u5e94\u8be5\u4e86\u89e3\u7684 13 \u4e2a\u4f18\u79c0\u7684 React \u5e93\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. TanStack Query<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--HBET8d3V--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5l70lgvnkpvkxbhshwqj.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/96099d34f2b24500b6048c254df2e235~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"TanStack Query\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Ftanstack.com%2Fquery%2Fv3%2F\" target=\"_blank\" rel=\"noreferrer noopener\">TanStack Query<\/a>\u662f React \u4e2d\u7684\u4e00\u4e2a\u5f00\u6e90\u6570\u636e Fetch \u5e93\uff0c\u7531<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Ftwitter.com%2Ftannerlinsley\" target=\"_blank\" rel=\"noreferrer noopener\">Tanner Linsley<\/a>\u5f00\u53d1\u3002\u5b83\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40tanstack%2Freact-query\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u6709 170 \u591a\u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2FTanStack%2Fquery\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u6709 3.5 \u4e07+stars(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React \u6ca1\u6709\u5b98\u65b9\u7684\u6570\u636e Fetch \u65b9\u5f0f\u3002\u5f00\u53d1\u8005\u53ef\u4ee5\u81ea\u7531\u521b\u9020\u5404\u79cd\u6570\u636e Fetch \u65b9\u6cd5\u3002\u5927\u591a\u6570\u65f6\u5019\uff0c\u90fd\u4f1a\u7528\u5230 useEffect \u548c useState \u94a9\u5b50\uff0c\u6216\u8005\u4e00\u4e9b\u901a\u7528\u7684\u72b6\u6001\u7ba1\u7406\u5e93\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TanStack Query \u4e3a\u6211\u4eec\u5728 React \u5e94\u7528\u7a0b\u5e8f\u4e2d\u63d0\u4f9b\u4e86\u4e00\u79cd\u6807\u51c6\u7684\u83b7\u53d6\u6570\u636e\u7684\u65b9\u5f0f\uff0c\u5e76\u5e2e\u52a9\u6211\u4eec\u907f\u514d\u7f16\u5199\u590d\u6742\u7684\u903b\u8f91\uff0c\u51cf\u5c11\u4ee3\u7801\u884c\u6570\uff0c\u4f7f\u6211\u4eec\u7684\u4ee3\u7801\u66f4\u6613\u7ef4\u62a4\uff0c\u4f7f\u6211\u4eec\u7684\u5e94\u7528\u7a0b\u5e8f\u66f4\u5feb\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b83\u6709\u5f88\u591a\u795e\u5947\u7684\u7279\u6027\uff0c\u53ef\u4ee5\u8ba9 React \u4e2d\u7684\u6570\u636e Fetch \u548c\u5f00\u53d1\u4f53\u9a8c\u5f88\u4e1d\u6ed1\u3002\u8fd9\u4e9b\u529f\u80fd\u5305\u62ec\u81ea\u52a8\u7f13\u5b58\u3001\u81ea\u52a8\u91cd\u65b0 Fetch\u3001\u6eda\u52a8\u6062\u590d\u3001Render-as-you-fetch \u7b49\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Redux<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--upjAlN9E--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fka387koesoh36x0260j9.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/5e9ba8d36f954e5cabb7e15e572fa7bb~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"Redux\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fredux.js.org%2F\" target=\"_blank\" rel=\"noreferrer noopener\">Redux<\/a>\u662f JavaScript \u4e2d\u7684\u4e00\u4e2a\u5f00\u6e90\u72b6\u6001\u7ba1\u7406\u5e93\u3002\u5b83\u5728 GitHub \u4e0a\u6709\u8d85\u8fc7 58K stars\uff0c\u5728 NPM \u4e0a\u6709\u8d85\u8fc7 780 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6839\u636e Redux \u7684\u5b98\u65b9\u6587\u6863\uff0c<em>Redux \u662f\u4e00\u4e2a\u53ef\u9884\u6d4b\u7684 JavaScript \u5e94\u7528\u7a0b\u5e8f\u72b6\u6001\u5bb9\u5668\u3002\u5b83\u53ef\u4ee5\u5e2e\u52a9\u4f60\u7f16\u5199\u5728\u4e0d\u540c\u73af\u5883(\u5ba2\u6237\u7aef\u3001\u670d\u52a1\u5668\u548c\u539f\u751f\u5e94\u7528\u7a0b\u5e8f)\u4e0b\u8868\u73b0\u4e00\u81f4\u3001\u53ef\u8fd0\u884c\u7684\u5e94\u7528\u7a0b\u5e8f\uff0c\u5e76\u4e14\u8fd9\u4e9b\u5e94\u7528\u7a0b\u5e8f\u5f88\u5bb9\u6613\u6d4b\u8bd5\u3002\u4e0d\u4ec5\u5982\u6b64\uff0c\u5b83\u8fd8\u63d0\u4f9b\u4e86\u975e\u5e38\u597d\u7684\u5f00\u53d1\u4f53\u9a8c\uff0c\u6bd4\u5982\u4e0e\u65f6\u95f4\u7a7f\u68ad\u8c03\u8bd5\u5668\u76f8\u7ed3\u5408\u7684\u5b9e\u65f6\u4ee3\u7801\u7f16\u8f91\u3002<\/em>(<strong>\u6765\u6e90\uff1a<\/strong> <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fredux.js.org%2Fintroduction%2Fgetting-started\" target=\"_blank\" rel=\"noreferrer noopener\">Redux<\/a>)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Redux \u7684\u7279\u6027<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u53ef\u9884\u6d4b\u7684<\/strong> &#8211; \u5e2e\u52a9\u4f60\u7f16\u5199\u5728\u4e0d\u540c\u73af\u5883\u4e0b\u8868\u73b0\u4e00\u81f4\u3001\u6613\u4e8e\u6d4b\u8bd5\u7684\u5e94\u7528\u7a0b\u5e8f\u3002<\/li>\n\n\n\n<li><strong>\u96c6\u4e2d\u5f0f\u7684<\/strong> &#8211; \u5e2e\u52a9\u4f60\u96c6\u4e2d\u7ba1\u7406\u5e94\u7528\u7a0b\u5e8f\u72b6\u6001\u3002<\/li>\n\n\n\n<li><strong>\u53ef\u8c03\u8bd5\u7684<\/strong> &#8211; \u6709\u81ea\u5df1\u7684 DevTools\uff0c\u53ef\u4ee5\u8f7b\u677e\u8ddf\u8e2a\u5e94\u7528\u7a0b\u5e8f\u72b6\u6001\u7684\u65f6\u95f4\u7ebf\u3002<\/li>\n\n\n\n<li><strong>\u7075\u6d3b\u7684<\/strong> &#8211; Redux \u53ef\u4e0e\u4efb\u4f55 UI \u5c42\u4e00\u8d77\u4f7f\u7528\uff0c\u5e76\u4e14\u6709\u5927\u91cf\u7684\u63d2\u4ef6\u6765\u6ee1\u8db3\u4f60\u7684\u9700\u6c42\u3002(<strong>\u6765\u6e90\uff1a<\/strong> <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fredux.js.org%2F\" target=\"_blank\" rel=\"noreferrer noopener\">Redux<\/a>)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Redux \u662f React \u4e2d\u6700\u53d7\u6b22\u8fce\u7684\u72b6\u6001\u7ba1\u7406\u5e93\u4e4b\u4e00\uff0c\u53ef\u4ee5\u5e2e\u4f60\u66f4\u8f7b\u677e\u5730\u6784\u5efa\u5927\u89c4\u6a21\u7684\u5de5\u4e1a\u7ea7\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. MUI<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--YyYDkmAD--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv2hpkos5c7tv4bjk23rt.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/ec6a15a9858e4ecca5b5cf694855cb84~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"MUI\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">MUI Core \u662f\u4e00\u4e2a React \u6837\u5f0f\u5e93\uff0c\u53ef\u4ee5\u5e2e\u52a9\u4f60\u5f88\u5feb\u6784\u5efa\u6f02\u4eae\u7684 UI\u3002 MUI Core \u5305\u542b 4 \u4e2a\u7528\u4e8e\u66f4\u5feb\u6784\u5efa\u548c\u4ea4\u4ed8 UI \u7684\u57fa\u7840\u5e93\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Material UI:<\/strong> Material UI \u662f\u4e00\u4e2a\u5b9e\u73b0\u4e86 Google Material Design \u7684 React UI \u7ec4\u4ef6\u5e93\u3002(<strong>\u6765\u6e90\uff1a<\/strong> <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fmui.com%2Fmaterial-ui%2Fgetting-started%2F\" target=\"_blank\" rel=\"noreferrer noopener\">Material UI<\/a>)<\/li>\n\n\n\n<li><strong>Joy UI:<\/strong> Joy UI \u662f\u4e00\u4e2a\u4f7f\u7528 React \u6784\u5efa\u7684\u6f02\u4eae\u8bbe\u8ba1\u7684 UI \u7ec4\u4ef6\u5e93\uff0c\u65e8\u5728\u4e3a\u5f00\u53d1\u8fc7\u7a0b\u5e26\u6765\u4e50\u8da3\u3002(<strong>\u6765\u6e90\uff1a<\/strong> <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fmui.com%2Fjoy-ui%2Fgetting-started%2F\" target=\"_blank\" rel=\"noreferrer noopener\">Joy UI<\/a>)<\/li>\n\n\n\n<li><strong>Base UI:<\/strong> MUI Base \u662f\u4e00\u4e2a headless(\u201cunstyled\u201d)React UI \u7ec4\u4ef6\u548c\u5e95\u5c42\u94a9\u5b50\u7684\u5e93\u3002(<strong>\u6765\u6e90\uff1a<\/strong> <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fmui.com%2Fbase-ui%2Fgetting-started%2F\" target=\"_blank\" rel=\"noreferrer noopener\">Base UI<\/a>)<\/li>\n\n\n\n<li><strong>MUI System:<\/strong> MUI System \u662f\u4e00\u7ec4 CSS \u5b9e\u7528\u7a0b\u5e8f\u7684\u96c6\u5408\uff0c\u7528\u4e8e\u4f7f\u7528 MUI \u7ec4\u4ef6\u5e93\u5feb\u901f\u5e03\u5c40\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u3002 (<strong>\u6765\u6e90\uff1a<\/strong> <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fmui.com%2Fsystem%2Fgetting-started%2F\" target=\"_blank\" rel=\"noreferrer noopener\">MUI System<\/a>)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u51ed\u501f\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fmui%2Fmaterial-ui\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u7684 88K stars(2023 \u5e74 8 \u6708\u6570\u636e)\u548c\u6bcf\u5468<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40mui%2Fmaterial\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u7684 290 \u4e07\u6b21\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\uff0cMUI \u662f\u4e16\u754c\u4e0a\u6700\u53d7\u6b22\u8fce\u7684 React UI \u5e93\u4e4b\u4e00\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. React Bootstrap<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--nGZC477b--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr431d876u4ud32iow9u1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/db414604e367400cbd8841859751d8ce~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"React Bootstrap\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Freact-bootstrap.github.io%2F\" target=\"_blank\" rel=\"noreferrer noopener\">React Bootstrap<\/a> \u662f\u6211\u4eec\u8001\u670b\u53cb Bootstrap \u5728 React \u4e2d\u7684\u91cd\u6784\u7248\u672c\u3002\u5b83\u662f\u4e00\u4e2a\u72ec\u7acb\u7684 Bootstrap \u7ec4\u4ef6\u7684 UI \u5e93\uff0c\u4e0d\u4f9d\u8d56\u4e8e bootstrap.js \u6216 jQuery\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React Bootstrap \u63d0\u4f9b\u4e86\u4e00\u4e2a\u7ec4\u4ef6\u5e93\uff0c\u8fd9\u4e9b\u7ec4\u4ef6\u5177\u6709\u6613\u4e8e\u4f7f\u7528\u7684\u529f\u80fd\u3001\u72b6\u6001\u7ba1\u7406\u548c\u9ed8\u8ba4\u53ef\u8bbf\u95ee\u6027\uff0c\u4f7f\u5176\u6210\u4e3a\u5f00\u59cb\u6784\u5efa\u5e94\u7528\u7a0b\u5e8f UI \u7684\u4e0d\u9519\u9009\u62e9\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b83\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Freact-bootstrap%2Freact-bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u6709\u8d85\u8fc7 21K stars\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Freact-bootstrap\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u6709\u8d85\u8fc7 240 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. React DND<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--S8egFKV0--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkn8fl50g3qprlkodzi7f.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/36d2822050f54f5a85d710283157832a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"React DND\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u73b0\u4ee3 React \u5e94\u7528\u7a0b\u5e8f\u5f88\u5c11\u7b80\u5355\u3002\u51e0\u4e4e\u6240\u6709\u7684\u5de5\u4e1a\u7ea7\u5e94\u7528\u7a0b\u5e8f\u90fd\u6709\u67d0\u79cd\u5f62\u5f0f\u7684\u62d6\u653e\u529f\u80fd\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Freact-dnd.github.io%2Freact-dnd%2Fabout\" target=\"_blank\" rel=\"noreferrer noopener\">React DND<\/a>\u662f\u4e00\u4e2a\u5e2e\u52a9\u4f60\u6784\u5efa\u57fa\u4e8e\u62d6\u653e\u529f\u80fd\u7684 React \u5e94\u7528\u7a0b\u5e8f\u7684\u5e93\u3002\u4e3a\u6b64\uff0c\u5b83\u4f7f\u7528\u4e86<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2Fweb%2Fapi%2Fhtml_drag_and_drop_api\" target=\"_blank\" rel=\"noreferrer noopener\">HTML5 \u62d6\u653e<\/a> API\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u4e2a\u5e93\u4f7f\u7528\u8d77\u6765\u76f8\u5f53\u7b80\u5355\uff0c\u5728\u5b9e\u9645\u5e94\u7528\u4e2d\u6709\u8bb8\u591a\u6709\u8da3\u548c\u521b\u65b0\u7684\u7528\u4f8b\u3002\u5b83\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Freact-dnd%2Freact-dnd%2F\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 19K stars\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Freact-dnd\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 180 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. SWR<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--nVwoHdsB--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F88brqzzk9hmpm1l15x7g.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/2627f415cdc74c55ba38874622411d56~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"SWR\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Vercel \u7684<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fswr.vercel.app%2F\" target=\"_blank\" rel=\"noreferrer noopener\">SWR<\/a>\u662f\u6211\u4eec\u5217\u8868\u4e2d\u7684\u7b2c\u4e8c\u4e2a\u6570\u636e Fetch \u5e93\uff0c\u662f React Query \u4e4b\u5916\u7684\u53c8\u4e00\u4e2a\u4e0d\u9519\u7684\u9009\u62e9\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">SWR \u5e93\u6bd4 React Query \u5c0f\u5f97\u591a\uff0c\u66f4\u7b80\u5355\uff0c\u4f46\u63d0\u4f9b\u4e86\u8bb8\u591a\u795e\u5947\u7684\u529f\u80fd\uff0c\u5982\u53ef\u91cd\u7528\u7684\u6570\u636e Fetch\u3001Suspense\u3001\u5206\u9875\u3001\u5185\u7f6e\u7f13\u5b58\u7b49\u7b49\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b83\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fvercel%2Fswr\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 27K stars\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fswr\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 120 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. React Hook Form<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--ZOU3Vb9H--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnkn9rjd1y3goc5ib0auh.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/609ccd65d3da47f3bb2b0e87bebbb2e0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"React Hook Form\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f53\u6d89\u53ca\u5230 React \u4e2d\u7684\u8868\u5355\u6784\u5efa\u65f6\uff0c<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Freact-hook-form.com%2F\" target=\"_blank\" rel=\"noreferrer noopener\">React Hook Form<\/a>\u662f\u738b\u8005\u3002\u5b83\u662f\u4e00\u4e2a\u9ad8\u6027\u80fd\u7684\u3001\u8f7b\u91cf\u7684\u5e93\u3002\u6ca1\u6709\u4efb\u4f55\u4f9d\u8d56\uff0c\u53ef\u4ee5\u901a\u8fc7\u51cf\u5c11\u4ee3\u7801\u3001\u9694\u79bb\u91cd\u65b0\u6e32\u67d3\u3001\u66f4\u5feb\u7684\u6302\u8f7d\u7b49\u6765\u63d0\u9ad8\u5e94\u7528\u7a0b\u5e8f\u6027\u80fd\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u6839\u636e React Hook Form \u7684 GitHub Readme\uff0c\u5b83\u5177\u6709\u4ee5\u4e0b\u7279\u6027:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8003\u8651\u4e86\u6027\u80fd\u3001\u7528\u6237\u4f53\u9a8c\u548c\u5f00\u53d1\u8005\u4f53\u9a8c\u800c\u6784\u5efa<\/li>\n\n\n\n<li>\u91c7\u7528\u539f\u751f HTML \u8868\u5355\u9a8c\u8bc1<\/li>\n\n\n\n<li>\u4e0e UI \u5e93\u65e0\u7f1d\u96c6\u6210<\/li>\n\n\n\n<li>\u5c0f\u5de7\u8f7b\u91cf\uff0c\u65e0\u4efb\u4f55\u4f9d\u8d56<\/li>\n\n\n\n<li>\u652f\u6301 Yup\u3001Zod\u3001Superstruct\u3001Joi\u3001Vest\u3001class-validator\u3001io-ts\u3001nope \u7b49\u9a8c\u8bc1\u5e93\u4ee5\u53ca\u81ea\u5b9a\u4e49\u9a8c\u8bc1<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u8be5\u9879\u76ee\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Freact-hook-form%2Freact-hook-form\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 36K stars\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Freact-hook-form\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 340 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\u3002\u5728\u4e0b\u6b21\u7528 React \u6784\u5efa\u8868\u5355\u4e4b\u524d\uff0c\u4e00\u5b9a\u8981\u770b\u770b\u8fd9\u4e2a\u5e93\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Recharts<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--p1imM5Sn--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwnnkfmvu4qoio70b54zu.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/ceef6298ab0a4bfaa0369ad4011da379~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"Recharts\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Frecharts.org%2Fen-US%2F\" target=\"_blank\" rel=\"noreferrer noopener\">Recharts<\/a>\u662f\u4e00\u4e2a\u4f7f\u7528 React \u548c D3 \u6784\u5efa\u7684\u5f00\u6e90\u56fe\u8868\u5e93\u3002\u5b83\u8f7b\u91cf\u3001\u57fa\u4e8e React \u7ec4\u4ef6\u3001\u652f\u6301\u539f\u751f SVG\uff0c\u5e76\u4e14\u53ef\u4ee5\u8f7b\u677e\u5730\u5728 React \u5e94\u7528\u91cc\u6dfb\u52a0\u56fe\u8868\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b83\u63d0\u4f9b\u4e86 11 \u79cd\u5185\u7f6e\u7684\u56fe\u8868\u7ec4\u4ef6\uff0c\u5305\u62ec AreaChart\u3001BarChart\u3001LineChart\u3001PieChart \u7b49\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u4e2a\u5e93\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Frecharts%2Frecharts\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 20K stars\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Frecharts\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 130 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. React Router<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--tLELIQA6--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fctzmvrrrtgb2foouyq20.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/68279cd728df4d14b197eacb6b71146a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"React Router\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Freactrouter.com%2Fen%2Fmain\" target=\"_blank\" rel=\"noreferrer noopener\">React Router<\/a>\u662f\u5728 React \u5e94\u7528\u4e2d\u5b9e\u73b0\u8def\u7531\u7684\u6700\u6d41\u884c\u7684\u5e93\u3002\u5b83\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fremix-run%2Freact-router\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 50K stars\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Freact-router-dom\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 1000 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf\uff0c\u4e14\u7531\u540c\u4e00\u56e2\u961f\u5f00\u53d1\uff0c\u4e5f\u662f\u6d41\u884c\u7684 React \u6846\u67b6 Remix \u80cc\u540e\u7684\u56e2\u961f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u5b83\u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u3001\u529f\u80fd\u9f50\u5168\u7684 React \u8def\u7531\u5e93\u3002React Router \u53ef\u5728 React \u652f\u6301\u7684\u4efb\u4f55\u5730\u65b9\u8fd0\u884c;\u5728 Web \u4e0a\u3001\u670d\u52a1\u5668\u4e0a(\u4f7f\u7528 node.js)\u548c\u5728 React Native \u4e0a\u3002<\/em>(<strong>\u6765\u6e90\uff1a<\/strong> <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fremix-run%2Freact-router\" target=\"_blank\" rel=\"noreferrer noopener\">React Router GitHub<\/a>)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">React Router \u88ab\u8bb8\u591a\u9876\u5c16\u516c\u53f8\u7684\u5f00\u53d1\u56e2\u961f\u4f7f\u7528\uff0c\u5982\u5fae\u8f6f\u3001Netflix\u3001Twitter\u3001Discord \u7b49\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. Blueprint<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--Dmk8ixiC--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fle2h6aqnqab52ev2tioi.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/d8b01045fde7438c99a01f9b25e582c8~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"BluePrint\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fblueprintjs.com%2F\" target=\"_blank\" rel=\"noreferrer noopener\">Blueprint<\/a>\u662f\u4e00\u4e2a\u57fa\u4e8e React \u7684 Web UI \u5de5\u5177\u5305\u3002\u5b83\u9488\u5bf9\u6784\u5efa\u5728\u73b0\u4ee3\u6d4f\u89c8\u5668(\u5305\u62ec IE11)\u4e2d\u8fd0\u884c\u7684\u590d\u6742\u3001\u6570\u636e\u5bc6\u96c6\u578b\u684c\u9762\u5e94\u7528\u8fdb\u884c\u4e86\u4f18\u5316\u3002<\/em>(<strong>\u6765\u6e90\uff1a<\/strong> <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fpalantir%2Fblueprint\" target=\"_blank\" rel=\"noreferrer noopener\">Blueprint GitHub<\/a>)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Blueprint \u6709 7 \u4e2a\u4e0d\u540c\u7684 npm \u8f6f\u4ef6\u5305:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>blueprintjs\/core<\/strong> &#8211; \u6838\u5fc3\u5305\uff0c\u5305\u542b 30 \u591a\u4e2a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5904\u7406\u5e94\u7528\u7684\u57fa\u672c UI\u3002<\/li>\n\n\n\n<li><strong>blueprintjs\/datetime<\/strong> &#8211; \u5e2e\u52a9\u5728 React \u4e2d\u4e0e\u65e5\u671f\u548c\u65f6\u95f4\u8fdb\u884c\u4ea4\u4e92\u3002<\/li>\n\n\n\n<li><strong>blueprintjs\/icons<\/strong> &#8211; \u63d0\u4f9b\u8d85\u8fc7 300 \u4e2a\u56fe\u6807\u3002<\/li>\n\n\n\n<li><strong>blueprintjs\/popover2<\/strong> &#8211; blueprintjs\/core \u7684 Popover \u548c Tooltip \u7ec4\u4ef6\u7684\u7ee7\u627f\u7ec4\u4ef6\u3002<\/li>\n\n\n\n<li><strong>blueprintjs\/select<\/strong> &#8211; \u5728\u5e94\u7528\u4e2d\u652f\u6301\u5355\u9009\u6216\u591a\u9009\u7684 Select \u7ec4\u4ef6\u3002<\/li>\n\n\n\n<li><strong>blueprintjs\/table<\/strong> &#8211; \u4ea4\u4e92\u5f0f\u8868\u683c\u7ec4\u4ef6\u3002<\/li>\n\n\n\n<li><strong>blueprintjs\/timezone<\/strong> &#8211; \u5e2e\u52a9\u5e94\u7528\u5904\u7406\u4e0d\u540c\u65f6\u533a\u3002<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Blueprint \u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fpalantir%2Fblueprint\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 20K stars(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">11. React Virtualized<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--MktVtUxw--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzzyc9a2yefli96obec0b.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/cca87d8c614045c7b269c3f01ec9341c~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"React Virtualized\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fbvaughn.github.io%2Freact-virtualized%2F%23%2Fcomponents%2FList\" target=\"_blank\" rel=\"noreferrer noopener\">React Virtualized<\/a>\u662f\u4e00\u4e2a\u865a\u62df\u5217\u8868\u5e93\uff0c\u5e2e\u52a9\u4f60\u5728 React \u4e2d\u9ad8\u6548\u5904\u7406\u5927\u578b\u5217\u8868\u548c\u8868\u683c\u6570\u636e\u7684\u5e93\u3002\u5b83\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fbvaughn%2Freact-virtualized\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 25K stars\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Freact-virtualized\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 250 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5982\u679c\u4f60\u7684\u5e94\u7528\u4e2d\u4f7f\u7528\u4e86\u5927\u91cf\u6570\u636e\uff0c\u8fd9\u4e2a\u5e93\u5c06\u975e\u5e38\u6709\u7528\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">12. React Suite<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--6vm1xFoN--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn1w0jmpevxn0uki36upr.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/6732c5d27b34422287d547c3552d7ce0~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"React Suite\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Frsuitejs.com%2F\" target=\"_blank\" rel=\"noreferrer noopener\">React Suite<\/a>\u662f\u4e00\u4e2a\u4f01\u4e1a\u7cfb\u7edf\u4ea7\u54c1\u7684 React \u7ec4\u4ef6\u5e93\u96c6\u5408\u3002\u8fd9\u662f\u4e00\u4e2a\u8bbe\u8ba1\u7f1c\u5bc6\u5e76\u4e14\u5bf9\u5f00\u53d1\u8005\u53cb\u597d\u7684 UI \u6846\u67b6\u3002(<strong>\u6765\u6e90\uff1a<\/strong> <a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Frsuite%2Frsuite\" target=\"_blank\" rel=\"noreferrer noopener\">React Suite GitHub<\/a>)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u662f\u4e00\u4e2a\u4e0e\u4f17\u4e0d\u540c\u7684 UI \u5e93\u3002\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u7ecf\u8fc7\u7cbe\u5fc3\u8bbe\u8ba1\uff0c\u53ef\u4ee5\u6781\u5927\u5730\u63d0\u5347\u5e94\u7528\u7684\u7f8e\u89c2\u5ea6\uff0c\u8d4b\u4e88\u5b83\u5353\u8d8a\u7684\u8d28\u611f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u4e2a\u5e93\u63d0\u4f9b\u4e86\u901a\u7528\u7684 UI \u7ec4\u4ef6\uff0c\u5982 Button\u3001Drawer\u3001Pagination\u3001Loader \u7b49\uff0c\u8bbe\u8ba1\u548c\u6df1\u5ea6\u90fd\u6bd4\u5927\u591a\u6570 UI \u7ec4\u4ef6\u5e93\u8981\u51fa\u8272\u5f97\u591a\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b83\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Frsuite%2Frsuite\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 7K stars\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Frsuite\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 6 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">13. TailwindCSS<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--ip1xFl1Q--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_800%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyw7ydaogrird4jlbzacn.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/p3-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/2ac80ede8eff40f78f5aaaf910e47532~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp\" alt=\"Tailwind CSS\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Ftailwindcss.com%2F\" target=\"_blank\" rel=\"noreferrer noopener\">TailwindCSS<\/a>\u662f\u4e00\u4e2a\u5de5\u5177\u7c7b\u4f18\u5148\u7684 CSS \u6846\u67b6\uff0c\u7528\u4e8e\u5feb\u901f\u8bbe\u8ba1\u7f51\u7ad9\u6837\u5f0f\u3002\u5b83\u4e0d\u662f\u4e00\u4e2a React \u5e93\uff0c\u800c\u662f\u4e00\u4e2a CSS \u6837\u5f0f\u6846\u67b6\uff0c\u5728 React \u5f00\u53d1\u8005\u4e2d\u7528\u4e8e\u6837\u5f0f\u5316\u5e94\u7528\u7a0b\u5e8f\u7684\u6700\u53d7\u6b22\u8fce\u9009\u9879\u4e4b\u4e00\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u901a\u8fc7<code>flex<\/code>\u3001<code>pt-4<\/code>\u3001<code>text-center<\/code>\u7b49\u5b9e\u7528\u7a0b\u5e8f\u7c7b\uff0cTailwind \u53ef\u4ee5\u975e\u5e38\u5bb9\u6613\u5730\u6784\u5efa UI\u3002\u6bcf\u4e2a\u7c7b\u5728\u8d4b\u503c\u7ed9\u7279\u5b9a\u7684 JSX \u5143\u7d20\u540e\u4f1a\u6fc0\u6d3b\u9884\u5b9a\u4e49\u7684 CSS \u503c\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f8b\u5982\uff0c\u5982\u679c\u5c06<strong>flex<\/strong> \u548c <strong>text-center<\/strong> \u7684\u7c7b\u540d\u5206\u914d\u7ed9 div\uff0c\u8be5\u5143\u7d20\u5c06\u53d8\u6210\u4e00\u4e2a\u5f39\u6027\u5143\u7d20\u3001\u6587\u5b57\u5c45\u4e2d\u5bf9\u9f50\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b83\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Ftailwindlabs%2Ftailwindcss\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 71K stars\uff0c\u5728<a href=\"https:\/\/link.juejin.cn?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Ftailwindcss\" target=\"_blank\" rel=\"noreferrer noopener\">NPM<\/a>\u4e0a\u62e5\u6709\u8d85\u8fc7 600 \u4e07\u6b21\u5468\u4e0b\u8f7d\u91cf(2023 \u5e74 8 \u6708\u6570\u636e)\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u603b\u7ed3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0d\u7528\u5b66\u4e60\u6240\u6709\u8fd9\u4e9b\u5e93\uff0c\u624d\u80fd\u5728 React \u4e2d\u9ad8\u6548\u5de5\u4f5c\u3002\u56e0\u4e3a\u5176\u4e2d\u7684\u4e00\u4e9b\u76ee\u7684\u662f\u76f8\u540c\u7684\u3002\u4f8b\u5982\uff0cMUI\u3001React Bootstrap \u548c React Suite \u90fd\u662f UI \u7ec4\u4ef6\u5e93\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5c06\u65f6\u95f4\u82b1\u5728\u5b66\u4e60\u4e0d\u540c\u76ee\u7684\u7684\u5e93\u4e0a\u3002\u4f8b\u5982\uff0c\u6784\u5efa\u4e00\u4e2a\u4f7f\u7528 React Suite \u7684 UI\u3001React Router \u7684\u8def\u7531\u3001React Query \u83b7\u53d6\u6570\u636e\u548c Recharts \u6e32\u67d3\u56fe\u8868\u7684 React \u5e94\u7528\u7a0b\u5e8f\uff0c\u8fd9\u6837\u624d\u80fd\u6700\u5927\u5316\u7684\u63d0\u9ad8\u5b66\u4e60\u6548\u7387\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br>\u6765\u6e90\uff1a<a href=\"https:\/\/juejin.cn\/post\/7269949188983603254\">\u7a00\u571f\u6398\u91d1<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6210\u4e3a\u4e00\u4e2a\u73b0\u4ee3\u7684 React \u5f00\u53d1\u8005\uff0c\u4e0d\u4ec5\u9700\u8981\u7406\u89e3 React \u7684\u6838\u5fc3\u6982\u5ff5\uff0c\u8fd8\u9700\u8981\u5bf9\u6574\u4e2a React \u751f\u6001\u7cfb\u7edf\u4e86 &#8230; <a title=\"\u73b0\u4ee3 React \u5f00\u53d1\u5fc5\u5907\u7684 13 \u4e2a\u795e\u5e93\uff0c\u8def\u7531\u3001UI \u7ec4\u4ef6\u5e93\u3001\u62d6\u62fd\u3001\u865a\u62df\u5217\u8868\u90fd\u9f50\u4e86\" class=\"read-more\" href=\"https:\/\/fennubird.cn\/index.php\/2025\/05\/10\/%e7%8e%b0%e4%bb%a3-react-%e5%bc%80%e5%8f%91%e5%bf%85%e5%a4%87%e7%9a%84-13-%e4%b8%aa%e7%a5%9e%e5%ba%93%ef%bc%8c%e8%b7%af%e7%94%b1%e3%80%81ui-%e7%bb%84%e4%bb%b6%e5%ba%93%e3%80%81%e6%8b%96%e6%8b%bd\/\" aria-label=\"\u9605\u8bfb \u73b0\u4ee3 React \u5f00\u53d1\u5fc5\u5907\u7684 13 \u4e2a\u795e\u5e93\uff0c\u8def\u7531\u3001UI \u7ec4\u4ef6\u5e93\u3001\u62d6\u62fd\u3001\u865a\u62df\u5217\u8868\u90fd\u9f50\u4e86\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":1,"featured_media":108,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[20,21],"class_list":["post-107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-16","tag-javascript","tag-react"],"_links":{"self":[{"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":0,"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/media\/108"}],"wp:attachment":[{"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fennubird.cn\/index.php\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}