{"id":2991,"date":"2020-06-17T13:47:15","date_gmt":"2020-06-17T05:47:15","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2991"},"modified":"2020-06-23T15:09:30","modified_gmt":"2020-06-23T07:09:30","slug":"vs-code-%e6%88%90%e4%b8%bb%e5%ae%b0%e3%80%81vue%e5%a4%87%e5%8f%97%e7%83%ad%e6%8d%a7%e3%80%81flutter%e6%88%90%e6%96%b0%e8%b4%b5%ef%bc%812020-%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e8%b6%8b%e5%8a%bf","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2991","title":{"rendered":"VS Code \u6210\u4e3b\u5bb0\u3001Vue\u5907\u53d7\u70ed\u6367\u3001Flutter\u6210\u65b0\u8d35\uff012020 \u524d\u7aef\u5f00\u53d1\u8d8b\u52bf\u6307\u5357"},"content":{"rendered":"<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/06\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200623134443.jpg\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2992\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/06\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200623134443.jpg\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200623134443\" width=\"1080\" height=\"608\" \/><\/a><\/p>\n<p><a class=\"url\" href=\"https:\/\/levelup.gitconnected.com\/a-recap-of-frontend-development-in-2019-1e7d07966d6c\" target=\"_blank\">https:\/\/levelup.gitconnected.com\/a-recap-of-frontend-development-in-2019-1e7d07966d6c<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\u524d\u7aef\u5728\u751f\u4ea7\u548c\u5f00\u53d1\u4e2d\u5360\u636e\u7740\u8d8a\u6765\u8d8a\u91cd\u8981\u7684\u5730\u4f4d\uff0cPC \u7aef\u3001\u624b\u673a\u7aef\u3001\u684c\u9762\u7aef\u3001\u667a\u80fd\u624b\u8868\u7aef\u7b49\u7b49\u8bbe\u5907\u90fd\u79bb\u4e0d\u5f00\u524d\u7aef\u7684\u8eab\u5f71\u3002\u672c\u6587\u5c06\u56f4\u7ed5\u6846\u67b6\u3001\u7f16\u7a0b\u8bed\u8a00\u3001\u5de5\u5177\u3001React\u3001Vue \u7b49\u65b9\u9762\uff0c\u5168\u9762\u56de\u987e 2019 \u5e74\u524d\u7aef\u4e0e Web \u5f00\u53d1\u7684\u5927\u4e8b\u3002<\/p>\n<p>&nbsp;<\/p>\n<p>\u4ee5\u4e0b\u4e3a\u8bd1\u6587\uff1a<\/p>\n<p>\u5728\u8fc7\u53bb\u7684\u4e00\u5e74\u4e2d\uff0c\u524d\u7aef\u5f00\u53d1\u518d\u6b21\u52a0\u5feb\u4e86\u53d1\u5c55\u7684\u901f\u5ea6\uff0c\u672c\u6587\u603b\u7ed3\u4e862019\u5e74\u4ee5\u6765\u7684\u6240\u6709\u5927\u4e8b\u3001\u65b0\u95fb\u548c\u8d8b\u52bf\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>1.<\/strong> <strong>2019\u5e74\u6d41\u884c\u524d\u7aef\u6846\u67b6\u548c\u5e93\u7684NPM\u4e0b\u8f7d<\/strong><\/p>\n<p>React \u518d\u6b21\u8363\u767b\u524d\u7aef\u6d41\u884c\u5e93\u7684\u699c\u9996\uff0c\u4e14\u7528\u6237\u7684\u6570\u91cf\u4ecd\u5728\u589e\u957f\uff0c\u800c jQuery \u51fa\u4e4e\u610f\u6599\u5730\u4fdd\u4f4f\u4e86\u7b2c\u4e8c\u540d\u7684\u4f4d\u7f6e\u3002\u7d27\u968f\u5176\u540e\u7684\u662f Angular \u548c Vue\uff0c\u4e00\u5927\u6279\u9971\u542b\u70ed\u60c5\u7684\u5f00\u53d1\u4eba\u5458\u4e3a\u4e8c\u8005\u5960\u5b9a\u4e86\u5f3a\u5927\u7684\u7528\u6237\u57fa\u7840\u3002\u53bb\u5e74\uff0cSvelte \u6536\u5230\u4e86\u5f88\u591a\u5173\u6ce8\uff0c\u4f46\u8fd8\u5728\u4e3a\u83b7\u5f97\u66f4\u591a\u91c7\u7528\u800c\u52aa\u529b\u3002<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>2.<\/strong> <strong>WebAssembly \u6210\u4e3a\u4e86\u7ee7 HTML\u3001CSS \u548c JavaScript \u4e4b\u540e\u7684\u7b2c\u56db\u5927Web\u8bed\u8a00<\/strong><\/p>\n<p>\u7ecf\u8fc7\u4e00\u5e74\u7684\u5e73\u9759\u4e4b\u540e\uff0c12\u6708\u521d WebAssembly \u51fa\u73b0\u4e86\u4e00\u4e9b\u91cd\u5927\u65b0\u95fb\uff1aW3C\u8054\u76df\u6b63\u5f0f\u63a8\u8350\u5176\u4e3aWeb\u8bed\u8a00\u3002\uff08\u4e07\u7ef4\u7f51\u8054\u76df\uff08W3C\uff09\u662f\u4e92\u8054\u7f51\u4e3b\u8981\u7684\u56fd\u9645\u6807\u51c6\u7ec4\u7ec7\u3002\uff09<\/p>\n<p>\u81ea2017\u5e74\u53d1\u5e03\u4ee5\u6765\uff0cWebAssembly \u5f15\u8d77\u4e86\u5e7f\u6cdb\u7684\u5173\u6ce8\uff0c\u800c\u4e14\u91c7\u7528\u4e5f\u8fc5\u901f\u589e\u957f\u3002\u5728\u8fc7\u53bb\u7684\u51e0\u5e74\u4e2d\uff0c\u6211\u4eec\u770b\u5230\u4e86WebAssembly \u5efa\u7acb\u4e861.0\u89c4\u8303\uff0c\u800c\u4e14\u6240\u6709\u4e3b\u6d41\u6d4f\u89c8\u5668\u90fd\u5f00\u59cb\u652f\u6301WebAssembly\u3002<\/p>\n<p>2019\u5e74\uff0c\u8fd8\u6709\u4e00\u5219 WebAssembly \u7684\u65b0\u95fb\uff1a\u5b57\u8282\u7801\u8054\u76df\uff08Bytecode Alliance\uff09\u6210\u7acb\uff0c\u8be5\u8054\u76df\u65e8\u5728\u901a\u8fc7\u534f\u4f5c\u5b9e\u65bd\u6807\u51c6\u548c\u63d0\u51fa\u65b0\u6807\u51c6\uff0c\u4ee5\u5b8c\u5584 WebAssembly \u5728\u6d4f\u89c8\u5668\u4e4b\u5916\u7684\u751f\u6001\u3002<\/p>\n<p>\u6211\u4eec\u4ecd\u5728\u7b49\u5f85 WebAssembly \u771f\u6b63\u7ad9\u7a33\u811a\u8ddf\uff0c\u5e76\u5927\u9762\u79ef\u666e\u53ca\u3002\u968f\u7740 WebAssembly \u6bcf\u6b21\u7684\u66f4\u65b0\uff0c\u6211\u4eec\u79bb\u8fd9\u4e2a\u76ee\u6807\u8d8a\u6765\u8d8a\u8fd1\u3002\u6beb\u65e0\u7591\u95ee\uff0cW3C\u7684\u58f0\u660e\u662f\u8ba9\u5404\u4e2a\u516c\u53f8\u5408\u6cd5\u4f7f\u7528 WebAssembly \u7684\u91cd\u8981\u4e00\u6b65\uff0c\u6211\u4eec\u9700\u8981\u7ee7\u7eed\u964d\u4f4e\u4f7f\u7528 WebAssembly \u7684\u5165\u95e8\u95e8\u69db\uff0c\u8ba9\u5176\u66f4\u65b9\u4fbf\u6784\u5efa\u4ea7\u54c1\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>3.<\/strong> <strong>TypeScript \u7684\u4f7f\u7528\u6fc0\u589e\uff1a\u8bb8\u591a\u5f00\u53d1\u4eba\u5458\u4e3a\u4e4b\u503e\u5012<\/strong><\/p>\n<p>2019\u5e74\u662f TypeScript \u4e4b\u5e74\u3002TypeScript \u4e0d\u4ec5\u6210\u4e3a\u4e86\u5728JS\u4ee3\u7801\u4e2d\u6dfb\u52a0\u7c7b\u578b\u65f6\u7684\u6700\u4f73\u9009\u62e9\uff0c\u800c\u4e14\u8bb8\u591a\u5f00\u53d1\u4eba\u5458\u5728\u4e2a\u4eba\u9879\u76ee\u548c\u5de5\u4f5c\u4e2d\u5bf9\u5b83\u7684\u559c\u7231\u8d85\u8fc7\u4e86\u666e\u901a\u7684 JavaScript\u3002<\/p>\n<p>\u57282019\u5e74\u521d\u53d1\u5e03\u7684StackOverflow\u8c03\u67e5\u4e2d\uff0cTypeScript \u4e0e Python \u5e76\u5217\u7b2c\u4e8c\uff0c\u6210\u4e3a\u4e86\u6700\u53d7\u6b22\u8fce\u7684\u8bed\u8a00\uff0c\u4ec5\u6b21\u4e8e Rust\u3002\u5982\u679c\u57282020\u5e74\u521d\u53d1\u5e03\u7684\u6700\u65b0\u7684\u8c03\u67e5\u4e2d\u770b\u5230 TypeScript \u66f4\u4e0a\u4e00\u5c42\u697c\u4e5f\u4e0d\u8db3\u4e3a\u5947\u3002<\/p>\n<p>&nbsp;<\/p>\n<p>TypeScript \u5df2\u7ecf\u5f00\u59cb\u8695\u98dfWeb\u5f00\u53d1\u4e16\u754c\u2014\u2014\u524d\u7aef\u548c\u540e\u7aef\u7686\u5982\u6b64\u3002\u6709\u4e9b\u5f00\u53d1\u4eba\u5458\u66fe\u7ecf\u8ba4\u4e3aTypeScript \u7684\u5174\u8d77\u53ea\u4e0d\u8fc7\u662f\u6682\u65f6\u7684\uff0c\u800c\u4e14\u4ed6\u4eec\u8fd8\u8ba4\u4e3a\u5b83\u4f1a\u91cd\u8e48 Coffeescript\u7684\u8986\u8f99\uff0c\u4f46\u4e8b\u5b9e\u8bc1\u660e TypeScript \u53ef\u4ee5\u89e3\u51b3JS\u5f00\u53d1\u4eba\u5458\u7684\u6838\u5fc3\u95ee\u9898\uff0c\u800c\u4e14\u5176\u4f7f\u7528\u7387\u4f3c\u4e4e\u8d8a\u6765\u8d8a\u9ad8\u3002<\/p>\n<p>TypeScript \u4e0e\u6240\u6709\u4e3b\u6d41\u6587\u672c\u7f16\u8f91\u5668\u7684\u96c6\u6210\u4e3aWeb\u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u4e86\u66f4\u597d\u7684\u5f00\u53d1\u4f53\u9a8c\u3002JavaScript \u5f00\u53d1\u4eba\u5458\u5c06 TypeScript \u89c6\u4e3a\u4e00\u79cd\u5de5\u5177\uff1a\u5b83\u53ef\u4ee5\u51cf\u5c11\u9519\u8bef\uff0c\u540c\u65f6\u7531\u4e8e\u5176\u63d0\u4f9b\u7684\u6587\u6863\u8bf4\u660e\u7c7b\u578b\u548c\u5bf9\u8c61\u63a5\u53e3\uff0c\u4ee3\u7801\u9605\u8bfb\u8d77\u6765\u66f4\u4e3a\u8f7b\u677e\u3002<\/p>\n<p>\u503c\u5f97\u6ce8\u610f\u7684\u662f\uff0c2019\u5e74 TypeScript \u7684NPM\u4e0b\u8f7d\u6d41\u884c\u5ea6\u8d85\u8fc7\u4e86 React\u3002\u6b64\u5916\uff0c\u5b83\u7684\u4e0b\u8f7d\u91cf\u4e5f\u8fdc\u8fdc\u8d85\u8fc7\u4e86 Flow \u548c Reason \u7b49\u7ade\u4e89\u5bf9\u624b\u3002<\/p>\n<blockquote><p>TypeScript \u548c React \u89e3\u51b3\u7684\u662f\u5b8c\u5168\u4e0d\u540c\u7684\u95ee\u9898\uff0c\u56e0\u6b64\u4e0d\u5e94\u8be5\u76f4\u63a5\u5c06\u4e8c\u8005\u8fdb\u884c\u6bd4\u8f83\u3002\u4e0b\u56fe\u53ea\u662f\u4e3a\u4e86\u5c55\u793a TypeScript \u7684\u53d7\u6b22\u8fce\u7a0b\u5ea6\u3002<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p>TypeScript v3.0 \u4e8e 2018\u5e74\u672b\u53d1\u5e03\uff0c2019\u5e74\u53d1\u5e03\u5230\u4e863.7\u7248\uff0c\u5176\u4e2d\u5305\u62ec ECMAScript \u529f\u80fd\u7684\u66f4\u65b0\uff0c\u4f8b\u5982Optional Chaining\u3001nullish operator\u4ee5\u53ca\u5bf9\u7c7b\u578b\u68c0\u67e5\u529f\u80fd\u7684\u6539\u8fdb\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>4.<\/strong> <strong>React \u7ee7\u7eed\u4fdd\u6301\u9886\u5148\uff0c\u5f00\u53d1\u4eba\u5458\u4e3a\u94a9\u5b50\u503e\u5012<\/strong><\/p>\n<p>\u867d\u7136 Vue \u548c Angular \u62e5\u6709\u5927\u4e00\u6279\u9971\u542b\u70ed\u60c5\u7684\u7528\u6237\uff0cVue \u5728 GitHub \u4e0a\u7684\u7ed9\u661f\u6570\u751a\u81f3\u8d85\u8fc7\u4e86 React\uff0c\u4f46\u5728\u4e2a\u4eba\u548c\u4e13\u4e1a\u9879\u76ee\u4e2d\uff0cReact \u7ee7\u7eed\u4fdd\u6301\u9886\u5148\u5730\u4f4d\u3002<\/p>\n<p>2018\u5e74\u672b\uff0cReact\u56e2\u961f\u5f15\u5165\u4e86\u94a9\u5b50\u30022019\u5e74\uff0c\u94a9\u5b50\u541e\u566c\u4e86 React \u4e16\u754c\uff0c\u7edd\u5927\u591a\u6570\u5f00\u53d1\u4eba\u5458\u90fd\u5c06\u5176\u4f5c\u4e3a\u7ba1\u7406\u72b6\u6001\u548c\u7ec4\u4ef6\u751f\u547d\u5468\u671f\u7684\u9996\u9009\u65b9\u5f0f\u30022019\u5e74\u4e2d\u6709\u5173\u94a9\u5b50\u7684\u6587\u7ae0\u5c42\u51fa\u4e0d\u7a77\uff0c\u8fd9\u65b9\u9762\u7684\u6a21\u5f0f\u5f00\u59cb\u8d70\u5411\u7a33\u56fa\uff0c\u91cd\u8981\u7684 React \u5305\u90fd\u5f00\u59cb\u5229\u7528\u81ea\u5b9a\u4e49\u94a9\u5b50\u6765\u5bfc\u51fa\u5176\u51fd\u6570\u5e93\u7684\u529f\u80fd\u3002<\/p>\n<p>\u94a9\u5b50\u63d0\u4f9b\u4e86\u4e00\u79cd\u901a\u8fc7\u7b80\u6d01\u7684\u8bed\u6cd5\u7ba1\u7406\u529f\u80fd\u7ec4\u4ef6\u7684\u72b6\u6001\u548c\u751f\u547d\u5468\u671f\u7684\u65b9\u6cd5\u3002\u53e6\u5916\uff0cReact \u63d0\u4f9b\u4e86\u6784\u5efa\u81ea\u5b9a\u4e49\u94a9\u5b50\u7684\u529f\u80fd\uff0c\u6211\u4eec\u53ef\u4ee5\u5229\u7528\u8fd9\u4e2a\u529f\u80fd\u521b\u5efa\u53ef\u91cd\u7528\u7684\u4ee3\u7801\u548c\u5171\u4eab\u7684\u903b\u8f91\uff0c\u800c\u65e0\u9700\u521b\u5efa\u9ad8\u9636\u7ec4\u4ef6\u6216\u4f7f\u7528render props\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>5.<\/strong> <strong>React\u6838\u5fc3\u56e2\u961f\u91cd\u70b9\u5173\u6ce8\u5f00\u53d1\u4eba\u5458\u7684\u7ecf\u9a8c\u548c\u5de5\u5177\uff0c\u63d0\u9ad8\u751f\u4ea7\u529b<\/strong><\/p>\n<p>\u5728React v16.8 \u6dfb\u52a0\u4e86\u5927\u91cf\u94a9\u5b50\u4e4b\u540e\uff0c\u5176\u540e\u7684\u5927\u591a\u6570\u66f4\u6539\u90fd\u76f8\u5bf9\u8f83\u5c0f\uff0c2019\u5e74\u53d1\u5e03\u7684\u6700\u65b0\u7248\u672c\u4e3a16.14\u7248\u3002<\/p>\n<p>\u5728\u53d1\u5e03\u4e86\u5927\u91cf\u94a9\u5b50\u4e4b\u540e\uff0cReact \u56e2\u961f\u968f\u540e\u5c06\u5de5\u4f5c\u91cd\u70b9\u8f6c\u79fb\u5230\u901a\u8fc7\u63d0\u4f9b\u66f4\u591a\u5de5\u5177\u6765\u6539\u5584\u5f00\u53d1\u4eba\u5458\u7684\u5de5\u4f5c\u3002\u5b9e\u9645\u4e0a\uff0c\u5f00\u53d1\u4eba\u5458\u7684\u7ecf\u9a8c\u662f2019\u5e74 React \u5927\u4f1a\u7684\u4e3b\u8981\u4e3b\u9898\u3002React \u5927\u4f1a\u7684\u4e3b\u8981\u53d1\u8a00\u4eba\u53ca React \u56e2\u961f\u7ecf\u7406 Tom Occhino \u8868\u793a\uff0c\u5f00\u53d1\u4eba\u5458\u7684\u7ecf\u9a8c\u4e3b\u8981\u4f9d\u8d56\u4e8e\u4e09\u4e2a\u65b9\u9762\uff1a\u964d\u4f4e\u5165\u95e8\u7684\u95e8\u69db\u3001\u63d0\u9ad8\u751f\u4ea7\u7387\u548c\u6539\u5584\u6269\u5c55\u80fd\u529b\u3002\u4e0b\u9762\u8ba9\u6211\u4eec\u6765\u770b\u4e00\u770b\u4e3a\u4e86\u652f\u6301\u8fd9\u4e09\u65b9\u9762\uff0cReact \u56e2\u961f\u53d1\u5e03\u4e86\u54ea\u4e9b\u529f\u80fd\u548c\u8ba1\u5212\uff1a<\/p>\n<ul>\n<li>\u5168\u65b0\u7248\u672c\u7684 React DevTools<\/li>\n<li>\u5168\u65b0\u7684 React \u6027\u80fd\u5206\u6790\u5de5\u5177<\/li>\n<li>\u521b\u5efa\u4e86 React App v3<\/li>\n<li>\u6d4b\u8bd5\u5de5\u5177\u7684\u66f4\u65b0<\/li>\n<li>Suspense<\/li>\n<li>\u5e76\u53d1\u6a21\u5f0f\uff08\u5373\u5c06\u63a8\u51fa\uff09<\/li>\n<li>Facebook \u4f7f\u7528\u7684 CSS-in-JS\uff08\u5373\u5c06\u63a8\u51fa\uff09<\/li>\n<li>\u6e10\u8fdb\/\u9009\u62e9\u6027\u9875\u9762hydration\uff08\u5373\u5c06\u8fdb\u884c\uff09<\/li>\n<li>React \u6838\u5fc3\u5c42\u9762\u652f\u6301\u53ef\u8bbf\u95ee\u6027\uff08\u5373\u5c06\u53d1\u5e03\uff09<\/li>\n<\/ul>\n<p>\u6211\u4eec\u76f8\u4fe1\uff0c\u826f\u597d\u7684\u5f00\u53d1\u4eba\u5458\u4f53\u9a8c\u80fd\u5e26\u6765\u826f\u597d\u7684\u7528\u6237\u4f53\u9a8c\uff0c\u56e0\u6b64\u8fd9\u5bf9\u6bcf\u4e2a\u4eba\u90fd\u6709\u76ca\u3002\u6709\u5173\u5373\u5c06\u53d1\u5e03\u7684 React \u529f\u80fd\uff0c\u8bf7\u70b9\u51fb\u5982\u4e0b\u94fe\u63a5\uff08<a class=\"url\" href=\"https:\/\/youtu.be\/uXEEL9mrkAQ\" target=\"_blank\">https:\/\/youtu.be\/uXEEL9mrkAQ<\/a>\uff09\u89c2\u770b2019\u5e74 React \u5927\u4f1a\u4e0aYuzhi Zheng\u7684\u53d1\u8a00\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>6.<\/strong> <strong>Vue\u4e3a\u7248\u672c3\u53d1\u884c\u505a\u51c6\u5907\uff0c\u4f7f\u7528\u91cf\u7ee7\u7eed\u589e\u957f<\/strong><\/p>\n<p>Vue \u7684\u91c7\u7528\u7387\u53ef\u80fd\u5c1a\u672a\u8fbe\u5230\u6700\u9ad8\uff0c\u4f46\u5176\u62e5\u6709\u4e00\u5927\u6279\u70ed\u60c5\u9ad8\u6da8\u7684\u7528\u6237\u3002Vue \u501f\u9274\u4e86 React \u548cAngular \u7684\u7cbe\u534e\uff0c\u540c\u65f6\u8fd8\u8fdb\u884c\u4e86\u7b80\u5316\u3002\u5b83\u7684\u53e6\u4e00\u4e2a\u5de8\u5927\u7684\u5356\u70b9\u662f\uff1a\u66f4\u5f00\u653e\uff0c\u4e0d\u50cfReact\uff08Facebook\uff09\u6216 Angular\uff08Google\uff09\u4e00\u6837\u53d7\u5927\u516c\u53f8\u7684\u63a7\u5236\u3002<\/p>\n<p>Vue \u6700\u5927\u7684\u65b0\u95fb\u662f\u5373\u5c06\u53d1\u5e03\u76843.0\u7248\u672c\uff0calpha \u7248\u6709\u671b\u5728\u7b2c\u56db\u5b63\u5ea6\u672b\u53d1\u5e03\u30022019\u5e74\uff0cVue 2.x\u4ec5\u5728\u5e74\u521d\u6536\u5230\u4e86\u4e00\u4e9b\u66f4\u65b0\uff0c\u56e0\u4e3a\u5927\u591a\u6570\u7684\u5de5\u4f5c\u90fd\u6295\u5165\u5230\u4e86v3\u7248\u672c\u4e2d\u3002<\/p>\n<p>\u867d\u7136\u4eca\u5e74\u53d1\u5e03\u7684\u7248\u672c\u4e0d\u591a\uff0c\u4f46\u8fd9\u5e76\u4e0d\u610f\u5473\u7740Vue \u6ca1\u6709\u592a\u591a\u5927\u4e8b\u53d1\u751f\u3002\u5f53 Evan You \u5411\u5927\u4f17\u5f81\u96c6\u6709\u5173 v3 \u7684\u5efa\u8bae\u65f6\uff0c\u8fd9\u4e2a\u7248\u672c\u7684\u53d8\u52a8\u5728\u793e\u533a\u5f15\u53d1\u4e86\u5e7f\u6cdb\u7684\u4e89\u8bba\uff0c\u8bf7\u89c1 Reddit \u548c Hacker News\u7b49\u7f51\u7ad9\u3002<\/p>\n<p>\u6fc0\u6012 Vue \u5f00\u53d1\u4eba\u5458\u7684\u5173\u952e\u95ee\u9898\u662f\u5bf9\u6846\u67b6API\u7684\u5168\u9762\u6539\u9769\u3002\u4f46\u662f\uff0c\u5728\u5f3a\u70c8\u53cd\u5bf9\u4e4b\u540e\uff0c\u6709\u4eba\u6307\u51fa\u6b64\u6b21API\u7684\u53d8\u66f4\u4e0e Vue 2 \u5b8c\u5168\u517c\u5bb9\u3002\u867d\u7136\u8bb8\u591a\u5f00\u53d1\u4eba\u5458\u4ecd\u5728\u5173\u6ce8\u8be5\u7248\u672c\u7684\u53d1\u884c\uff0c\u4f46\u4ed6\u4eec\u58f0\u79f0\u8fd9\u4e9b\u6539\u52a8\u53ef\u80fd\u4f1a\u8ba9\u4ed6\u4eec\u8003\u8651 Svelte\uff0c\u56e0\u4e3a\u4ed6\u4eec\u62c5\u5fc3 Vue \u4e0e React \u592a\u76f8\u50cf\u3002\u5c3d\u7ba1\u793e\u533a\u4e2d\u4ecd\u6709\u8bb8\u591a\u4eba\u5bf9\u6b64\u8868\u793a\u5173\u6ce8\uff0c\u4f46\u5728\u4ed6\u4eec\u7b49\u5f85\u53d1\u5e03\u7684\u8fc7\u7a0b\u4e2d\uff0c\u55a7\u6742\u58f0\u4f3c\u4e4e\u5df2\u5e73\u606f\u3002<\/p>\n<p>\u9664\u4e86\u4e0a\u8ff0\u6709\u4e89\u8bba\u7684\u53d8\u66f4\u5916\uff0cVue 3 \u8fd8\u5305\u542b\u5176\u4ed6\u91cd\u5927\u53d8\u5316\uff1a<\/p>\n<ul>\n<li>\u7ec4\u5408API<\/li>\n<li>\u5168\u5c40mount\/\u914d\u7f6eAPI\u7684\u6539\u52a8<\/li>\n<li>Fragments<\/li>\n<li>\u65f6\u95f4\u5207\u7247\u652f\u6301\uff08\u5b9e\u9a8c\u6027\uff09<\/li>\n<li>\u591a\u4e2av\u6a21\u578b<\/li>\n<li>Portal<\/li>\n<li>\u65b0\u7684\u81ea\u5b9a\u4e49\u6307\u4ee4API<\/li>\n<li>\u53cd\u5e94\u6027\u7684<\/li>\n<li>\u865a\u62dfDOM\u91cd\u5199<\/li>\n<li>\u9759\u6001props hoising<\/li>\n<li>\u94a9\u5b50 API\uff08\u5b9e\u9a8c\u6027\uff09<\/li>\n<li>slot\u751f\u6210\u4f18\u5316\uff08\u7236\u548c\u5b50\u7ec4\u4ef6\u7684\u5355\u72ec\u6e32\u67d3\uff09<\/li>\n<li>\u66f4\u597d\u5730\u652f\u6301 TypeScript<\/li>\n<\/ul>\n<p>\u6709\u5173Vue\u7684\u53d1\u5e03\uff08<a class=\"url\" href=\"https:\/\/youtu.be\/ANtSWq-zI0s\" target=\"_blank\">https:\/\/youtu.be\/ANtSWq-zI0s<\/a>\uff09\uff0c\u4eca\u5e74\u53e6\u4e00\u4e2a\u503c\u5f97\u6ce8\u610f\u7684\u662fCLI\u7684\u7b2c4\u7248\uff0c\u4e3b\u8981\u96c6\u4e2d\u5728\u57fa\u7840\u5de5\u5177\u7684\u66f4\u65b0\u4e0a\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>7.<\/strong> <strong>Angular\u53d1\u5e03\u7248\u672c8\u548c9\uff0c\u4ee5\u53ca\u65b0\u7684Ivy\u7f16\u8bd1\/\u6e32\u67d3\u7ba1\u9053<\/strong><\/p>\n<p>Angular \u521a\u610e\u81ea\u7528\u7684\u54f2\u5b66\u4e3a\u5b83\u8d62\u5f97\u4e86\u5e9e\u5927\u7684\u7528\u6237\u7fa4\u3002\u7531\u4e8e Angular \u662f\u4e00\u4e2a\u201c\u9738\u9053\u603b\u88c1\u201d\u5f0f\u7684\u6846\u67b6\uff0c\u56e0\u6b64\u5b83\u8981\u6c42\u5f00\u53d1\u4eba\u5458\u4ee5 Angular \u7684\u65b9\u5f0f\u884c\u4e8b\uff0c\u540c\u65f6\u4e5f\u4e3a\u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u4e86\u6240\u6709\u5fc5\u8981\u7684\u5de5\u5177\u3002<\/p>\n<p>\u8fd9\u53ef\u4ee5\u907f\u514d\u8bb8\u591a\u6709\u5173\u5f15\u5165\u54ea\u4e9b\u5e93\u548c\u4f9d\u8d56\u9879\u7684\u4e89\u8bba\uff0c\u800c\u8fd9\u4e9b\u4e89\u8bae\u662f React \u5e94\u7528\u6784\u5efa\u56e2\u961f\u4e2d\u53ef\u80fd\u9700\u8981\u9762\u5bf9\u7684\u95ee\u9898\u3002\u5b83\u8fd8\u8981\u6c42\u5f00\u53d1\u4eba\u5458\u4f7f\u7528 TypeScript \u7f16\u5199\u5e94\u7528\u7a0b\u5e8f\u3002\u7531\u4e8e\u5927\u591a\u6570\u6289\u62e9\u5df2\u88ab\u786e\u7acb\uff0c\u56e0\u6b64\u5404\u4e2a\u516c\u53f8\u5c06\u5176\u89c6\u4e3a\u4e00\u4e2a\u4e0d\u9519\u7684\u9009\u62e9\uff0c\u56e0\u4e3a\u5f00\u53d1\u4eba\u5458\u53ef\u4ee5\u4e13\u6ce8\u4e8e\u6784\u5efa\u4ea7\u54c1\uff0c\u800c\u4e0d\u5fc5\u82b1\u8d39\u65f6\u95f4\u8003\u8651\u8f6f\u4ef6\u5305\u3002<\/p>\n<p>2019\u5e74\uff0cAngular \u53d1\u5e03\u4e86\u7248\u672c8\uff0c\u5e76\u4e14\u8fd8\u53d1\u5e03\u4e86\u4e00\u4e2a\u65b0\u7684\u6e32\u67d3\u5668\/\u7f16\u8bd1\u6d41\u6c34\u7ebf\u2014\u2014\u540d\u53eb Ivy\u3002Ivy \u6700\u5927\u7684\u597d\u5904\u5728\u4e8e\u6784\u5efa\u7684\u5305\u66f4\u5c0f\uff0c\u4f46\u5b83\u63d0\u4f9b\u4e86\u8bb8\u591a\u5176\u4ed6\u5de8\u5927\u7684\u6539\u8fdb\u3002\u76ee\u524d\uff0cIvy \u662f Angular 9 \u4e4b\u524d\u7684\u53ef\u9009\u529f\u80fd\u3002\u7248\u672c8\u4e2d\u503c\u5f97\u6ce8\u610f\u7684\u66f4\u65b0\u5305\u62ec\uff1a<\/p>\n<ul>\n<li>\u73b0\u4ee3JavaScript\u7684\u5dee\u5206\u52a0\u8f7d<\/li>\n<li>\u9ed8\u8ba4\u652f\u6301\u7684 Ivy \u9884\u89c8<\/li>\n<li>Angular Router \u7684\u5411\u540e\u517c\u5bb9\u6027<\/li>\n<li>\u6539\u8fdb\u540e\u7684Web Worker\u5305<\/li>\n<li>\u9ed8\u8ba4\u652f\u6301\u7684\u4f7f\u7528\u60c5\u51b5\u5206\u4eab<\/li>\n<li>\u4f9d\u8d56\u5173\u7cfb\u66f4\u65b0<\/li>\n<\/ul>\n<p>2019\u5e7412\u6708\u671f\u95f4\uff0cAngular \u56e2\u961f\u4e3a\u7248\u672c9\u7684\u53d1\u5e03\u505a\u597d\u4e86\u51c6\u5907\uff0c\u8be5\u7248\u672c\u5c06\u4e8e2019\u5e74\u5e95\u62162020\u5e74\u521d\u6b63\u5f0f\u53d1\u5e03\u3002Angular 9\u7684\u6700\u5927\u53d8\u5316\u662f Ivy \u6210\u4e3a\u4e86\u6807\u51c6\u6e32\u67d3\u5668\u3002\u6709\u5173Angular 9\u7684\u66f4\u591a\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u53c2\u7167\u5982\u4e0b\u89c6\u9891\uff08<a class=\"url\" href=\"https:\/\/youtu.be\/5wmWtgr7LQ0\" target=\"_blank\">https:\/\/youtu.be\/5wmWtgr7LQ0<\/a>\uff09\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>8.<\/strong> <strong>\u53ef\u8bbf\u95ee\u6027\u548c\u56fd\u9645\u5316\u53d8\u5f97\u8d8a\u6765\u8d8a\u91cd\u8981<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>Web\u5e94\u8be5\u5bf9\u6240\u6709\u4eba\u5f00\u653e\uff0c\u4e14\u4eba\u4eba\u53ef\u8bbf\u95ee\uff0c\u524d\u7aef\u4e16\u754c\u4e00\u76f4\u975e\u5e38\u91cd\u89c6\u8fd9\u4e00\u70b9\u3002\u81ea2015\u5e74\u5f00\u59cb JavaScript \u548c Web \u5f97\u5230\u4e86\u5feb\u901f\u53d1\u5c55\u4e4b\u540e\uff0c\u6a21\u5f0f\u548c\u6846\u67b6\u7ec8\u4e8e\u5f97\u5230\u4e86\u5de9\u56fa\u3002\u5982\u4eca\u7684\u5f62\u5f0f\u66f4\u4e3a\u7a33\u5b9a\uff0c\u56e0\u6b64\u5f00\u53d1\u4eba\u5458\u53ef\u4ee5\u5c06\u66f4\u591a\u7684\u7cbe\u529b\u653e\u5728\u80fd\u591f\u5c06\u5e94\u7528\u672c\u5730\u5316\u4ee5\u53ca\u65b9\u4fbf\u66f4\u591a\u4eba\u8bbf\u95ee\u7684\u5de5\u5177\u4e0a\uff0c\u52aa\u529b\u6253\u9020\u66f4\u597d\u7684Web\u73af\u5883\u3002\u6211\u4eec\u5e94\u8be5\u4e3a\u6211\u4eec\u6240\u53d6\u5f97\u7684\u8fdb\u5c55\u611f\u5230\u81ea\u8c6a\uff0c\u4f46\u662f\u6211\u4eec\u8fd8\u6709\u5f88\u957f\u7684\u8def\u8981\u8d70\u3002<\/p>\n<p>\u53ef\u8bbf\u95ee\u6027\uff08Accessibility\uff0c\u7b80\u79f0A11y\uff09\uff1a\u8ba9\u5c3d\u53ef\u80fd\u591a\u7684\u4eba\u4f7f\u7528\u4f60\u7684\u7f51\u7ad9\uff0c\u4f20\u7edf\u4e0a\u6211\u4eec\u8ba4\u4e3a\u8fd9\u662f\u5173\u4e8e\u6b8b\u75be\u4eba\u7684\uff0c\u4f46\u5b9e\u9645\u4e0a\u5b83\u4e5f\u6db5\u76d6\u4e86\u5176\u4ed6\u7fa4\u4f53\uff0c\u6bd4\u5982\u4f7f\u7528\u79fb\u52a8\u8bbe\u5907\u7684\u4eba\u7fa4\uff0c\u90a3\u4e9b\u7f51\u7edc\u8fde\u63a5\u7f13\u6162\u7684\u4eba\u7fa4\u3002\u2014\u2014 MDN<\/p>\n<p>\u56fd\u9645\u5316\uff08Internationalization\uff0c\u7b80\u79f0i18n\uff09\u662f\u5bf9\u5e94\u7528\u7a0b\u5e8f\u3001\u89c4\u8303\u6587\u6863\u7684\u8bbe\u8ba1\u548c\u5f00\u53d1\uff0c\u4ee5\u786e\u4fdd\u8fd9\u4e9b\u5e94\u7528\u548c\u89c4\u8303\u7b49\u53ef\u4ee5\u66f4\u597d\u66f4\u5bb9\u6613\u5730\u9002\u5e94\u4e0d\u540c\u6587\u5316\u3001\u5730\u533a\u3001\u8bed\u8a00\u7684\u7528\u6237\u3002\u2014\u2014 W3C<\/p>\n<blockquote><p>\u6ce8\uff1aAccessibility\u88ab\u7b80\u79f0\u4e3aA11y\u662f\u56e0\u4e3a\u9996\u5b57\u6bcd\u201cA\u201d\u548c\u6700\u540e\u4e00\u4e2a\u5b57\u6bcd\u201cy\u201d\u4e4b\u95f4\u670911\u4e2a\u5b57\u6bcd\u3002<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p><strong>9.<\/strong> <strong>ES2019\u65b0\u529f\u80fd<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>\u4eca\u5e74\uff0cECMAScript\uff08JavaScript \u7684\u89c4\u8303\uff09\u4e5f\u53d1\u8868\u4e86\u5e74\u5ea6\u66f4\u65b0\uff0c\u4e14 ES2019 \u7248\u672c\u4e2d\u6dfb\u52a0\u4e86\u5982\u4e0b\u65b0\u529f\u80fd\uff1a<\/p>\n<ul>\n<li>Object.fromEntries()<\/li>\n<li>String.trimStart()\u548c String.trimEnd()<\/li>\n<li>JSON.stringify\u4e2d unicode\u7684\u5904\u7406\u6539\u5584<\/li>\n<li>Array.flat()<\/li>\n<li>Array.flatMap()<\/li>\n<li>try\/catch\u7ed1\u5b9a<\/li>\n<li>Symbol.description<\/li>\n<\/ul>\n<p>\u5c3d\u7ba1ES2019\u8fdb\u884c\u4e86\u4e00\u4e9b\u91cd\u5927\u66f4\u65b0\uff0c\u4f46\u5373\u5c06\u5230\u6765\u7684 ES2020 \u62e5\u6709 ES6 \/ ES2015 \u4ee5\u6765\u6700\u4ee4\u4eba\u671f\u5f85\u7684\u529f\u80fd\uff1a<\/p>\n<ul>\n<li>\u79c1\u6709\u7c7b\u5c5e\u6027<\/li>\n<li>Optional Chaining\uff1aobj.field?.maybe?.exists<\/li>\n<li>nullish coalescing\uff1aitem ?? &#8216;use this only if item is null\/undefined&#8217;<\/li>\n<li>BigInts<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>10.<\/strong> <strong>Flutter \u7a81\u98de\u731b\u8fdb\u5730\u53d1\u5c55\uff0c\u4f5c\u4e3a\u6784\u5efa\u8de8\u5e73\u53f0\u79fb\u52a8\u5e94\u7528\u7684\u53e6\u4e00\u4e2a\u7edd\u4f73\u9009\u62e9\u5411 React Native \u53d1\u8d77\u4e86\u6311\u6218<\/strong><\/p>\n<p>**<br \/>\n**<\/p>\n<p>React Native \u63a8\u51fa\u4e24\u5e74\u540e\uff0cFlutter\u624d\u53d1\u5e03\uff0c\u4f46 Flutter \u7684\u53d1\u5c55\u975e\u5e38\u8fc5\u901f\u3002Flutter \u5728GitHub\u4e0a\u65a9\u83b7\u4e86 80,500\u9897\u661f\uff0c\u51e0\u4e4e\u8d76\u4e0a\u4e86 React Native \u768483,000\u9897\u661f\uff0c\u7167\u6b64\u60c5\u5f62 Flutter \u5f88\u5feb\u5c31\u8fc7\u8d85\u8d8a React Native\u3002<\/p>\n<p>\u9274\u4e8e Flutter \u6ca1\u6709\u5f00\u53d1\u793e\u533a\u7684\u63a8\u6ce2\u52a9\u6f9c\uff08React Web\u5f00\u53d1\u4eba\u5458\u63a8\u52a8\u4e86React Native\u7684\u53d1\u5c55\uff09\uff0c\u6240\u4ee5\u5982\u6b64\u8fc5\u901f\u7684\u53d1\u5c55\u5b9e\u5728\u4ee4\u4eba\u522e\u76ee\u76f8\u770b\u3002Flutter \u6b63\u5728\u52aa\u529b\u6253\u9020\u6700\u4f18\u79c0\u7684\u7684\u8de8\u5e73\u53f0\u79fb\u52a8\u6846\u67b6\u3002<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>11.<\/strong> <strong>Node.js \u57fa\u91d1\u4f1a\u4e0e JS \u57fa\u91d1\u4f1a\u5408\u5e76\u6210\u7acb OpenJS \u57fa\u91d1\u4f1a\uff1aNode\u7248\u672c12\u9075\u5faa\u4e86\u5e74\u5ea6\u957f\u671f\u652f\u6301\u53d1\u5e03\u7b56\u7565<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>\u4e3a\u4e86\u652f\u6301 JavaScript \u751f\u6001\u7cfb\u7edf\u5e76\u52a0\u901f\u8bed\u8a00\u7684\u53d1\u5c55\uff0cNode.js \u57fa\u91d1\u4f1a\u4e0e JS \u57fa\u91d1\u4f1a\u5408\u5e76\u6210\u7acb\u4e86 OpenJS \u57fa\u91d1\u4f1a\u3002\u8be5\u57fa\u91d1\u4f1a\u8868\u793a\uff0c\u5e0c\u671b\u901a\u8fc7\u4e2d\u7acb\u7684\u7ec4\u7ec7\u63a8\u8fdb\u534f\u4f5c\u548c\u53d1\u5c55\uff0c\u5982\u4eca\u4ed6\u4eec\u6258\u7ba1\u4e8631\u4e2a\u5f00\u6e90\u9879\u76ee\uff0c\u5305\u62ec Node\u3001jQuery \u548c Webpack\u3002\u8fd9\u4e00\u4e3e\u52a8\u4e3a\u6574\u4e2aJS\u793e\u533a\u5e26\u6765\u4e86\u79ef\u6781\u7684\u5f71\u54cd\uff0c\u5e76\u5f97\u5230\u4e86Google\u3001IBM\u548c\u5fae\u8f6f\u7b49\u5927\u516c\u53f8\u7684\u652f\u6301\u3002<\/p>\n<p>\u4eca\u5e74\uff0cNode\u53d1\u5e03\u4e86\u7248\u672c12\uff0c\u8be5\u7248\u672c\u9075\u5faa\u957f\u671f\u652f\u6301\uff08LTS\uff09\u7b56\u7565\uff0c\u53ef\u4ee5\u4e00\u76f4\u52302023\u5e744\u6708\u3002Node12\u63d0\u4f9b\u4e86\u8bb8\u591a\u65b0\u529f\u80fd\u3001\u5b89\u5168\u66f4\u65b0\u548c\u6027\u80fd\u6539\u8fdb\u3002\u4e00\u4e9b\u503c\u5f97\u6ce8\u610f\u7684\u66f4\u65b0\u5305\u62ec import\/export \u8bed\u53e5\u7684\u539f\u751f\u652f\u6301\u3001\u79c1\u6709\u7c7b\u5c5e\u6027\u3001\u517c\u5bb9V8 Engine 7.4\u3001\u5bf9TLS 1.3\u7684\u652f\u6301\u4ee5\u53ca\u5176\u4ed6\u8bca\u65ad\u5de5\u5177\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>12.<\/strong> <strong>\u968f\u7740\u7248\u672c3\u7684\u53d1\u5e03Svelte \u83b7\u5f97\u4e86\u5173\u6ce8\uff0c\u4f46\u5728\u91c7\u7528\u65b9\u9762\u4f9d\u7136\u843d\u540e<\/strong><\/p>\n<p>Svelte \u5728\u7ade\u4e89\u5f02\u5e38\u6fc0\u52b1\u7684\u524d\u7aef\u6846\u67b6\u4e16\u754c\u4e2d\uff0c\u627e\u5230\u4e86\u81ea\u5df1\u7684\u8dfb\u8eab\u4e4b\u9053\u3002\u4f46\u662f\uff0c\u6b63\u5982\u6211\u4eec\u5728\u672c\u6587\u5f00\u5934\u7684\u4ecb\u7ecd\uff0cSvelte \u8fd8\u6ca1\u6709\u5f97\u5230\u5927\u91cf\u7684\u5b9e\u9645\u5e94\u7528\u3002\u603b\u7684\u6765\u8bf4\uff0cSvelte\u201c\u7b80\u5355\u800c\u5f3a\u5927\u201d\u3002Svelte \u7f51\u7ad9\u8868\u660e\u4e86\u5176\u4e09\u5927\u4f18\u70b9\uff1a<\/p>\n<ul>\n<li>\u9700\u8981\u7f16\u5199\u7684\u4ee3\u7801\u91cf\u66f4\u5c11<\/li>\n<li>\u6ca1\u6709\u865a\u62dfDOM<\/li>\n<li>\u771f\u6b63\u7684\u54cd\u5e94\u5f0f\u7f16\u7a0b<\/li>\n<\/ul>\n<p>Svelte \u5c1d\u8bd5\u5c06\u5927\u90e8\u5206\u5de5\u4f5c\u8f6c\u79fb\u5230\u7f16\u8bd1\u8fc7\u7a0b\u4e2d\uff0c\u51cf\u5c11\u8fd0\u884c\u65f6\u5728\u6d4f\u89c8\u5668\u4e2d\u8fdb\u884c\u7684\u5de5\u4f5c\u3002Svelte \u5177\u6709\u57fa\u4e8e\u7ec4\u4ef6\u7684\u4f53\u7cfb\u7ed3\u6784\uff0c\u53ef\u7f16\u8bd1\u4e3a\u7eaf HTML \u548c\u539f\u59cb JavaScript\uff0c\u540c\u65f6\u4e5f\u627f\u8bfa\u51cf\u5c11\u6837\u677f\u4ee3\u7801\u3002\u5b83\u4f7f\u7528\u54cd\u5e94\u5f0f\u7f16\u7a0b\u6765\u76f4\u63a5\u66f4\u65b0DOM\uff0c\u800c\u4e0d\u662f\u5229\u7528\u865a\u62df\u7684DOM\u3002<\/p>\n<p>Svelte \u4e3a\u524d\u7aef\u9886\u57df\u5e26\u6765\u4e86\u8033\u76ee\u4e00\u65b0\u7684\u611f\u89c9\u2014\u2014\u5373\u63d0\u4f9b\u66f4\u5c11\u7684\u529f\u80fd\u30022020\u5e74\uff0cSvelte \u7684\u6210\u957f\u548c\u53d1\u5c55\u5f88\u8ba9\u4eba\u6b23\u6170\uff0c\u5e0c\u671b\u6211\u4eec\u80fd\u591f\u83b7\u5f97\u4e00\u4e9b\u5b9e\u9645\u7684\u4f8b\u5b50\uff0c\u8bc1\u660e\u5b83\u786e\u5b9e\u80fd\u591f\u4e0e React\u3001Vue \u548cAngular \u7b49\u5f3a\u5927\u7684\u7ade\u4e89\u5bf9\u624b\u4e00\u8f83\u9ad8\u4f4e\u3002<\/p>\n<blockquote><p>\u76f8\u5173\u89c6\u9891\uff1a<a class=\"url\" href=\"https:\/\/youtu.be\/AdNJ3fydeao\" target=\"_blank\">https:\/\/youtu.be\/AdNJ3fydeao<\/a><\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p><strong><em>*13.*<\/em> \u9759\u6001\u7f51\u7ad9\u7684\u4f7f\u7528\u4ecd\u5728\u6301\u7eed\uff0c\u5f00\u53d1\u4eba\u5458\u5f00\u59cb\u91c7\u7528 JAMStack<\/strong><\/p>\n<p>\u968f\u7740 Gatsby \u7b49\u6846\u67b6\u5229\u7528\u7387\u7684\u63d0\u9ad8\uff0cNetlify \u7b49\u8d1f\u8d23\u6258\u7ba1\u9759\u6001\u7f51\u7ad9\u7684\u516c\u53f8\u4e5f\u5f97\u5230\u4e86\u5feb\u901f\u589e\u957f\uff0c\u4e8e\u662f\u65e0\u6570headless CMS\u516c\u53f8\u76f8\u7ee7\u51fa\u73b0\uff0c\u9759\u6001\u7f51\u7ad9\u8bc1\u660e\u4e86\u81ea\u5df1\u662fWeb\u4e0d\u53ef\u6216\u7f3a\u7684\u4e00\u90e8\u5206\u3002<\/p>\n<p>\u9759\u6001\u7f51\u7ad9\u5c06\u65e7\u7f51\u7ad9\u4e0e\u65b0\u5174\u7684\u5de5\u5177\u3001\u5e93\u548c\u66f4\u65b0\u7ed3\u5408\u5728\u4e00\u8d77\uff0c\u63d0\u4f9b\u4e86\u65e0\u4e0e\u4f26\u6bd4\u7684\u4f53\u9a8c\u3002\u6211\u4eec\u80fd\u591f\u4f7f\u7528 React \u7b49\u73b0\u4ee3\u5e93\u6765\u6784\u5efa\u6211\u4eec\u7684\u7f51\u7ad9\uff0c\u7136\u540e\u5728\u6784\u5efa\u65f6\u5c06\u5b83\u4eec\u7f16\u8bd1\u6210\u9759\u6001 HTML \u9875\u9762\u3002\u7531\u4e8e\u6240\u6709\u9875\u9762\u90fd\u662f\u9884\u5148\u6784\u5efa\u7684\uff0c\u56e0\u6b64\u670d\u52a1\u5668\u4e0d\u9700\u8981\u82b1\u8d39\u65f6\u95f4\u5229\u7528\u8bf7\u6c42\u4e2d\u7684\u6570\u636e\u6e32\u67d3\u9875\u9762\uff0c\u8fd9\u4e9b\u9875\u9762\u53ef\u4ee5\u7acb\u5373\u63d0\u4f9b\uff0c\u5e76\u5229\u7528CDN\u4e2d\u5168\u5c40\u7f13\u5b58\u7684\u4f18\u52bf\uff0c\u5c3d\u53ef\u80fd\u8fc5\u901f\u5730\u5c06\u9875\u9762\u63d0\u4f9b\u7ed9\u7528\u6237\u3002<\/p>\n<p>\u9759\u6001\u7f51\u7ad9\u4f7f\u7528\u7684\u4e00\u79cd\u6d41\u884c\u7684\u7f16\u7a0b\u6a21\u5f0f\u662f JAMStack\u3002\u8fd9\u662f\u4e00\u79cd\u7ed3\u5408\u4e86\u9759\u6001\/ SPA\u7684\u65b9\u5f0f\uff0c\u8fd9\u4e9b\u9875\u9762\u90fd\u662f\u9759\u6001\u63d0\u4f9b\u7684\uff0c\u4f46\u662f\u4e00\u65e6\u8fdb\u5165\u5ba2\u6237\u7aef\uff0c\u5c31\u4f1a\u88ab\u5f53\u6210SPA\u2014\u2014\u901a\u8fc7API\u548c\u7528\u6237\u4ea4\u4e92\u6765\u63a8\u8fdbUI\u7684\u72b6\u6001\u3002<\/p>\n<p><strong><em>*14.*<\/em> PWA\u7684\u589e\u957f\u548c\u91c7\u7528\u6709\u6240\u589e\u52a0<\/strong><\/p>\n<p>\u867d\u7136\u9759\u6001\u7f51\u7ad9\u7684\u901f\u5ea6\u65e0\u4eba\u80fd\u53ca\uff0c\u4f46\u4e5f\u5e76\u975e\u9002\u5408\u6240\u6709\u5e94\u7528\uff0c\u53e6\u4e00\u4e2a\u7edd\u4f73\u7684\u9009\u62e9\u662f PWA\uff08\u6e10\u8fdb\u5f0fWeb\u5e94\u7528\u7a0b\u5e8f\uff09\u3002\u6211\u4eec\u53ef\u4ee5\u5229\u7528 PWA \u5728\u6d4f\u89c8\u5668\u4e2d\u7f13\u5b58\u8d44\u6e90\uff0c\u4ee5\u786e\u4fdd\u9875\u9762\u7684\u7acb\u5373\u54cd\u5e94\u4e0e\u79bb\u7ebf\u652f\u6301\u3002\u6b64\u5916\uff0c\u5728 PWA \u65b9\u5f0f\u4e2d\uff0c\u540e\u53f0\u5de5\u4f5c\u4eba\u5458\u8fd8\u53ef\u4ee5\u63d0\u4f9b\u63a8\u9001\u901a\u77e5\u7b49\u539f\u751f\u529f\u80fd\u3002<\/p>\n<p>\u751a\u81f3\u6709\u4eba\u58f0\u79f0 PWA \u53ef\u4ee5\u53d6\u4ee3\u539f\u751f\u79fb\u52a8\u5e94\u7528\u3002\u65e0\u8bba\u6700\u7ec8\u7ed3\u679c\u5c06\u5982\u4f55\uff0c\u6beb\u65e0\u7591\u95ee\uff0c\u5728\u5f88\u957f\u4e00\u6bb5\u65f6\u95f4\u5185 PWA \u5c06\u5f71\u54cd\u5404\u5927\u516c\u53f8\u6784\u5efa\u4ea7\u54c1\u7684\u4e3b\u8981\u65b9\u5f0f\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>*15.*<\/em> \u524d\u7aef\u7684\u5de5\u5177\u8d8a\u6765\u8d8a\u4f18\u79c0<\/strong><\/p>\n<p>\u8fd1\u51e0\u5e74\u6765\uff0c\u524d\u7aef\u5f00\u53d1\u4eba\u5458\u603b\u662f\u62b1\u6028\u538c\u5026\u4e86 JavaScript\uff0c \u4f46\u662f\u6211\u4eec\u4e5f\u6162\u6162\u770b\u5230\uff0c\u5f00\u6e90\u9879\u76ee\u7ef4\u62a4\u4eba\u5458\u7684\u4e0d\u61c8\u52aa\u529b\u51cf\u8f7b\u4e86\u4eba\u4eec\u5bf9 JavaScript \u7684\u538c\u5026\u3002<\/p>\n<p>\u4ee5\u524d\uff0c\u5982\u679c\u6211\u4eec\u60f3\u6784\u5efaSPA\uff0c\u5219\u5fc5\u987b\u5229\u7528 Bower \u6216 NPM \u5f15\u5165\u4f9d\u8d56\u5173\u7cfb\uff0c\u8fd8\u8981\u638c\u63e1\u5982\u4f55\u5229\u7528 Browserify \u6216 Webpack \u8fdb\u884c\u7f16\u8bd1\uff0c\u4ece\u96f6\u5f00\u59cb\u7f16\u5199 Express \u670d\u52a1\u5668\uff0c\u5e76\u5728\u5e93\u53d1\u751f\u66f4\u65b0\u65f6\u7ef4\u62a4\u6211\u4eec\u7684\u5e94\u7528\u3002<\/p>\n<p>\u591a\u5e74\u6765\uff0c\u6211\u4eec\u7ecf\u5386\u4e86\u5f88\u591a\u75db\u82e6\uff0c\u4f46\u5982\u4eca\u6211\u4eec\u9020\u5c31\u4e86\u6700\u6d3b\u8dc3\u3001\u6700\u53d1\u8fbe\u7684\u8f6f\u4ef6\u5305\u751f\u6001\u7cfb\u7edf\u3002\u6211\u4eec\u6709\u5f88\u591a\u5de5\u5177\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u62bd\u8c61\u5316\u6784\u5efa\u5e94\u7528\u7a0b\u5e8f\u4e2d\u6700\u75db\u82e6\u7684\u90e8\u5206\uff1a\u521b\u5efa React \u5e94\u7528\u3001Vue CLI\u3001Angular CLI\u3001\u7528\u4e8e\u9759\u6001\u7f51\u7ad9\u7684Gatsby\u3001\u7528\u4e8e React Native \u79fb\u52a8\u5e94\u7528\u7684Expo\u3001\u7528\u4e8eSSR\u5e94\u7528\u7a0b\u5e8f\u7684Next \/ Nuxt\u3001\u7528\u4e8e\u521b\u5efa\u670d\u52a1\u5668\u7684\u751f\u6210\u5668\u3001\u514d\u5374\u4e3aGraphQL\u7f16\u5199\u670d\u52a1\u5668\u7684Hasura\u3001\u4f7f\u7528 GraphQL \u4ee3\u7801\u751f\u6210\u5668\u81ea\u52a8\u751f\u6210 TypeScript \u7c7b\u578b\u3001Webpack\u4e0d\u65ad\u5f97\u5230\u7b80\u5316\u7b49\u7b49\uff0c\u6211\u4eec\u603b\u80fd\u627e\u5230\u5de5\u5177\u5e2e\u6211\u4eec\u51cf\u8f7b\u7e41\u91cd\u7684\u5de5\u4f5c\u3002<\/p>\n<p>\u4e5f\u8bb8\u73b0\u5728\u6211\u4eec\u5f00\u59cb\u538c\u5026\u4e86\u5de5\u5177\u4e86\uff1f<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>*16.*<\/em> GraphQL\u6df1\u53d7\u5f00\u53d1\u4eba\u5458\u7684\u559c\u7231\uff0c\u5e76\u5728\u79d1\u6280\u516c\u53f8\u4e2d\u5f97\u5230\u8fdb\u4e00\u6b65\u7684\u91c7\u7528<\/strong><\/p>\n<p>GraphQL \u6709\u671b\u89e3\u51b3\u4f20\u7edf\u7684\u57fa\u4e8e REST \u7684\u5e94\u7528\u7a0b\u5e8f\u9762\u4e34\u7684\u8bb8\u591a\u95ee\u9898\u3002GraphQL \u5f88\u5feb\u5c31\u83b7\u5f97\u4e86\u5f00\u53d1\u4eba\u5458\u7684\u559c\u7231\uff0c\u800c\u5404\u5927\u79d1\u6280\u516c\u53f8\u4e5f\u7eb7\u7eb7\u5f00\u59cb\u91c7\u7528\u5b83\u3002\u51e0\u5e74\u524d\uff0cGitHub \u7528 GraphQL \u7f16\u5199\u4e86\u5b83\u7684\u6700\u65b0API\uff0c\u8bb8\u591a\u5176\u4ed6\u7ec4\u7ec7\u4e5f\u5728\u505a\u51fa\u4e86\u540c\u6837\u7684\u53d8\u9769\u3002<\/p>\n<p>GraphQL \u5e94\u7528\u7a0b\u5e8f\u662f\u6570\u636e\u9a71\u52a8\u7684\uff08\u4e0d\u662f\u7aef\u70b9\u9a71\u52a8\uff09\uff0c\u56e0\u6b64\u5ba2\u6237\u7aef\u53ef\u4ee5\u58f0\u660e\u6240\u9700\u7684\u786e\u5207\u6570\u636e\uff0c\u4ece\u670d\u52a1\u5668\u63a5\u6536\u76f8\u5e94\u7684JSON\u54cd\u5e94\u3002GraphQL API\u63d0\u4f9b\u7684\u6587\u6863\u8bb0\u5f55\u4e86\u6240\u6709\u7684\u6570\u636e\u53ca\u5176\u7c7b\u578b\uff0c\u5e2e\u52a9\u5f00\u53d1\u4eba\u5458\u66f4\u5168\u9762\u5730\u4e86\u89e3API\u3002<\/p>\n<p>\u7531\u4e8eGraphQL API \u63d0\u4f9b\u4e86\u5b8c\u5168\u7c7b\u578b\u5316\u7684\u67b6\u6784\uff0c\u56e0\u6b64\u5b83\u4e5f\u53ef\u4ee5\u4e0e TypeScript \u5e94\u7528\u7a0b\u5e8f\u5f88\u597d\u5730\u96c6\u6210\u3002GraphQL \u53ef\u4ee5\u901a\u8fc7 GraphQL Code Generator \u7b49\u5de5\u5177\u8bfb\u53d6\u5ba2\u6237\u7aef\u4ee3\u7801\u4e2d\u7684\u67e5\u8be2\uff0c\u5e76\u5c06\u5176\u4e0e\u67b6\u6784\u8fdb\u884c\u5339\u914d\uff0c\u4ee5\u63d0\u4f9b\u5728\u6574\u4e2a\u5e94\u7528\u7a0b\u5e8f\u4e2d\u6d41\u52a8\u7684 TypeScript \u7c7b\u578b\u3002<\/p>\n<p>\u5728\u8fc7\u53bb\u7684\u4e00\u5e74\u4e2d\uff0cGraphQL \u7684\u4e0b\u8f7d\u91cf\u589e\u52a0\u4e86\u4e00\u500d\uff0c\u800c Apollo \u4e5f\u5f00\u59cb\u671d\u7740\u4f7f\u7528\u6700\u5e7f\u6cdb\u7684\u6846\u67b6\u8fc8\u8fdb\u3002<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>*17.*<\/em> CSS-in-JS\u7684\u53d1\u5c55\u52bf\u4e0d\u53ef\u6321<\/strong><\/p>\n<p>Web\u5f00\u53d1\u7684\u53d1\u5c55\u5927\u6709\u8ba9 JavaScript \u4e00\u7edf\u5929\u4e0b\u7684\u8d8b\u52bf\uff0cCSS-in-JS \u7684\u91c7\u7528\u5145\u5206\u4f53\u73b0\u4e86\u8fd9\u4e00\u70b9\uff0c\u56e0\u4e3a\u8fd9\u4e9bCSS\u6837\u5f0f\u90fd\u662f\u4f7f\u7528 JavaScript \u5b57\u7b26\u4e32\u521b\u5efa\u7684\u3002<\/p>\n<p>\u5728\u8fd9\u79cd\u65b9\u5f0f\u4e0b\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7 import\/export \uff0c\u5229\u7528\u5e38\u89c4\u7684 JavaScript \u8bed\u6cd5\u5171\u4eab\u6837\u5f0f\u548c\u4f9d\u8d56\u9879\u3002\u7531\u4e8eCSS-in-JS\u7ec4\u4ef6\u53ef\u4ee5\u5c06 props \u63d2\u5165\u5230\u6837\u5f0f\u5b57\u7b26\u4e32\u4e2d\uff0c\u56e0\u6b64\u7b80\u5316\u4e86\u52a8\u6001\u6837\u5f0f\u3002\u5982\u524d\u6240\u8ff0\uff0cFacebook \u751a\u81f3\u8ba4\u4e3a CSS-in -JS \u53ef\u80fd\u4f1a\u6210\u4e3a\u524d\u7aef\u7684\u672a\u6765\uff0c\u5e76\u5373\u5c06\u53d1\u5e03\u81ea\u5df1\u7684\u5e93\u3002<\/p>\n<p>\u4e0b\u9762\u662f\u4e00\u4e2a\u7ecf\u5178\u7684 CSS \u4e0e CSS-in-JS \u7684\u793a\u4f8b\u3002\u5982\u679c\u7528\u666e\u901aCSS\u5904\u7406\u52a8\u6001\u6837\u5f0f\uff0c\u90a3\u4e48\u4f60\u5fc5\u987b\u7ba1\u7406\u7ec4\u4ef6\u4e2d\u7684\u7c7b\u540d\u79f0\uff0c\u5e76\u6839\u636e state\/props \u8fdb\u884c\u66f4\u65b0\u3002\u800c\u4e14\u4f60\u8fd8\u9700\u8981\u4e3a\u6bcf\u79cd\u53d8\u5316\u5efa\u7acb\u4e00\u4e2aCSS\u7c7b\uff1a<\/p>\n<pre><code>\/\/ Component JS file\r\nconst MyComp = ({ isActive }) =&gt; {\r\n  const className = isActive ? 'active' : 'inactive';\r\n  return &lt;div className={className}&gt;HI&lt;\/div&gt;\r\n}\r\n\/\/ CSS file\r\n.active { color: green; }\r\n.inactive { color: red; }\r\n<\/code><\/pre>\n<p>\u5728 CSS-in -JS \u4e2d\uff0c\u4f60\u4e0d\u518d\u9700\u8981\u7ba1\u7406CSS\u7c7b\u3002\u4f60\u53ea\u9700\u8981\u5c06 props \u4f20\u9012\u7ed9\u6837\u5f0f\u5316\u7684\u7ec4\u4ef6\uff0c\u800c\u5b83\u4f1a\u5229\u7528\u58f0\u660e\u5f0f\u7684\u8bed\u6cd5\u5904\u7406\u52a8\u6001\u6837\u5f0f\u3002\u8fd9\u4e9b\u4ee3\u7801\u66f4\u4e3a\u7b80\u6d01\uff0c\u800c\u4e14\u7531CSS\u7ba1\u7406\u57fa\u4e8e props \u7684\u52a8\u6001\u6837\u5f0f\u540e\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u5c06\u6837\u5f0f\u4e0e React \u76f8\u5206\u79bb\u3002\u5b9e\u9645\u7684\u4ee3\u7801\u8bfb\u8d77\u6765\u4e0e\u6b63\u5e38\u7684 React \u548c JavaScript \u4ee3\u7801\u5e76\u65e0\u4e8c\u6837\uff1a<\/p>\n<pre><code>const Header = styled.div`\r\n  color: ${({ isActive }) =&gt; isActive ? 'green' : 'red'};\r\n`;\r\nconst MyComp = ({ isActive }} =&gt; (\r\n  &lt;Header isActive={isActive}&gt;HI&lt;\/Header&gt;\r\n)\r\n<\/code><\/pre>\n<p>styled-components \u548c emotion \u662f CSS-in-JS \u7684\u4e24\u4e2a\u4e3b\u8981\u5e93\uff0c\u800c\u4e142019\u5e74 emotion \u7684\u4e0b\u8f7d\u8d85\u8fc7\u4e86 styled-components\u3002\u4ece\u589e\u957f\u5e45\u5ea6\u6765\u770b\uff0c\u8fd9\u4e24\u4e2a\u5e93\u9065\u9065\u9886\u5148\u4e8e\u5176\u4ed6 CSS-in-JS \u5e93\uff0c\u800c\u4e14\u5b83\u4eec\u8fd8\u5c06\u6301\u7eed\u5feb\u901f\u589e\u957f\u3002<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>*18.*<\/em> VS Code\u662f\u6587\u672c\u7f16\u8f91\u5668\u5e02\u573a\u4e0a\u7684\u4e3b\u5bb0<\/strong><\/p>\n<p>\u5f00\u53d1\u4eba\u5458\u5bf9\u4e8eIDE \/\u6587\u672c\u7f16\u8f91\u5668\u5145\u6ee1\u4e86\u70ed\u60c5\uff0c\u4ed6\u4eec\u4f1a\u6ca1\u5b8c\u6ca1\u4e86\u5730\u4e89\u8bba\u4e3a\u4ec0\u4e48\u81ea\u5df1\u7684\u7f16\u8f91\u5668\u624d\u662f\u6700\u4f73\u9009\u62e9\u3002\u7136\u800c\uff0c\u524d\u7aef\u5f00\u53d1\u4eba\u5458\u4e0d\u7ea6\u800c\u540c\u5730\u9009\u62e9\u4e86 VS Code\u3002VS Code \u662f\u4e00\u6b3e\u5f00\u6e90\u7f16\u8f91\u5668\uff0c\u5b83\u63d0\u4f9b\u7684\u63d2\u4ef6\u4e3a\u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u4e86\u65e0\u4e0e\u4f26\u6bd4\u7684\u4f53\u9a8c\u3002<\/p>\n<p>\u6839\u636e\u201c2018\u5e74JS\u7684\u72b6\u51b5\u8c03\u67e5\u201d\uff08\u5730\u5740\uff1a<a class=\"url\" href=\"https:\/\/2018.stateofjs.com\/other-tools\/\" target=\"_blank\">https:\/\/2018.stateofjs.com\/other-tools\/<\/a>\uff09\uff0c\u6587\u672c\u7f16\u8f91\u5668\u7684\u4f7f\u7528\u60c5\u51b5\u5982\u4e0b\uff082019\u5e74\u7684\u8c03\u67e5\u53d1\u5e03\u65f6\uff0c\u4e0b\u56fe\u5c06\u88ab\u66f4\u65b0\uff09\uff1a<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/06\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200623134443.jpg\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2992\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/06\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200623134443.jpg\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200623134443\" width=\"1080\" height=\"608\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>*19.*<\/em> Webpack 5 \u5df2\u8fdb\u5165\u6d4b\u8bd5\u9636\u6bb5\u4e14\u5373\u5c06\u53d1\u5e03<\/strong><\/p>\n<p>Webpack \u5df2\u6210\u4e3a\u6240\u6709\u73b0\u4ee3 JavaScript \u5de5\u5177\u94fe\u7684\u6838\u5fc3\u7ec4\u4ef6\uff0c\u800c\u4e14\u4e5f\u662f\u6700\u5e38\u7528\u7684\u6784\u5efa\u5de5\u5177\u3002Webpack \u4e00\u76f4\u5728\u63d0\u9ad8\u6027\u80fd\u548c\u53ef\u7528\u6027\uff0c\u52aa\u529b\u4e3a\u5f00\u53d1\u4eba\u5458\u63d0\u4f9b\u66f4\u597d\u7684\u5de5\u5177\u3002Webpack 5 \u4e3b\u8981\u4fa7\u91cd\u4e8e\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762\uff1a<\/p>\n<ul>\n<li>\u901a\u8fc7\u6301\u4e45\u7f13\u5b58\u63d0\u9ad8\u6784\u5efa\u6027\u80fd\uff1b<\/li>\n<li>\u901a\u8fc7\u66f4\u597d\u7684\u7b97\u6cd5\u548c\u9ed8\u8ba4\u503c\u6765\u6539\u5584\u957f\u671f\u7f13\u5b58\uff1b<\/li>\n<li>\u6e05\u7406\u5185\u90e8\u6a21\u5f0f\uff0c\u540c\u65f6\u4e0d\u4f1a\u5f15\u53d1\u4efb\u4f55\u91cd\u5927\u53d8\u52a8\u3002<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong><em>*20.*<\/em> Jest \u653e\u5f03 Flow\uff0c\u8f6c\u6295 TypeScript \u7684\u6000\u62b1<\/strong><\/p>\n<p>Facebook \u7ef4\u62a4\u7740\u6d41\u884c\u7684\u6d4b\u8bd5\u5e93 Jest \u548c Flow\uff0c\u540e\u8005\u662f TypeScript \u7684\u7ade\u4e89\u5bf9\u624b\u30022019\u5e74\u521d\uff0cFacebook \u5927\u80c6\u58f0\u660e Jest \u5c06\u653e\u5f03Flow\uff0c\u8f6c\u6295 TypeScript \u7684\u6000\u62b1\u3002\u8fd9\u8fdb\u4e00\u6b65\u8868\u660e TypeScript \u5df2\u6210\u4e3a\u8f93\u5165 JavaScript \u4ee3\u7801\u7684\u6807\u51c6\u9009\u62e9\uff0c2020\u5e74\u53ca\u4ee5\u540e TypeScript \u7684\u4f7f\u7528\u4f1a\u8fdb\u4e00\u6b65\u589e\u52a0\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>*21.*<\/em> 2019\u5e74Chrome \u53d1\u5e03\u4e86\u7a33\u5b9a\u7248\u672c 72\u201378<\/strong><\/p>\n<p>Chrome \u5feb\u901f\u8fed\u4ee3\u7684\u6b65\u4f10\u4ece\u672a\u505c\u6b47\uff0c\u4ed6\u4eec\u6b63\u5728\u8fc5\u901f\u4e3aWeb\u548c\u5f00\u53d1\u5de5\u5177\u6dfb\u52a0\u65b0\u529f\u80fd\u30022019\u5e74\uff0cChrome \u53d1\u5e03\u4e867\u4e2a\u7a33\u5b9a\u7248\u672c\uff0c\u5176\u4e2d\u5305\u62ecBeta\u724879\u3001dev\u724880\u548ccanary\u724881\u3002<\/p>\n<p>\u8fc7\u53bb\u4e00\u5e74\u4e2d\u6709\u5173 Chrome \u7684\u91cd\u5927\u65b0\u589e\u529f\u80fd\uff0c\u8bf7\u53c2\u7167\u5982\u4e0b\u94fe\u63a5\uff1a<a class=\"url\" href=\"https:\/\/en.wikipedia.org\/wiki\/Google_Chrome_version_history?source=post_page-----1e7d07966d6c----------------------\" target=\"_blank\">https:\/\/en.wikipedia.org\/wiki\/Google_Chrome_version_history?source=post_page&#8212;&#8211;1e7d07966d6c&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>*22.*<\/em> \u5fae\u8f6f Edge \u6d4f\u89c8\u5668\u79fb\u81f3 Chromium\uff0c\u5e76\u521b\u5efa\u4e86\u65b0\u7684\u6807\u5fd7<\/strong><\/p>\n<p>\u5bf9 Web\u5f00\u53d1\u4eba\u5458\u6765\u8bf4\uff0cIE\u53ca\u5176\u540e\u7eed\u7684 Edge \u5c31\u662f\u4e2a\u7b11\u8bdd\uff0c\u5b83\u4eec\u4ee4\u5f00\u53d1\u4eba\u5458\u82e6\u4e0d\u582a\u8a00\u3002\u8fd9\u6b3e\u6d4f\u89c8\u5668\u5728Web\u529f\u80fd\u5b9e\u73b0\u65b9\u9762\u4e00\u76f4\u843d\u540e\u4e8e\u4ed6\u4eba\uff0c\u5e76\u4e14\u4f17\u6240\u5468\u77e5\uff0c\u4e3a\u5176\u7f16\u5199\u8de8\u6d4f\u89c8\u5668\u517c\u5bb9\u7684\u4ee3\u7801\u7b80\u76f4\u5c31\u662f\u707e\u96be\u3002\u4e3a\u4e86\u8d62\u5f97\u5f00\u53d1\u4eba\u5458\uff0c\u5fae\u8f6f\u51b3\u5b9a\u9009\u62e9\u4f7f\u7528Google\u7684\u5f00\u6e90 Chromium \u5f15\u64ce\u30022019\u5e74\u4e2d\u671f\uff0c\u8fd9\u9879\u53d8\u66f4\u5df2\u8fdb\u5165beta\u9636\u6bb5\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong><em>*23.*<\/em> Facebook \u53d1\u5e03\u4e86 Hermes\uff0c\u8fd9\u662f\u9762\u5411 Android \u7684 JavaScript \u89e3\u6790\u5668\uff0c\u7528\u4e8e\u6539\u8fdb React Native<\/strong><\/p>\n<p>Facebook \u8ba4\u4e3a Android JavaScript \u5f15\u64ce\u7684\u901f\u5ea6\u4e0d\u591f\u5feb\uff0c\u6240\u4ee5\u4ed6\u4eec\u5efa\u7acb\u4e86\u81ea\u5df1\u7684\u5f15\u64ce\u3002Facebook\u5168\u529b\u652f\u6301 React Native\uff0c\u6b64\u4e3e\u8868\u660e\u4e3a\u4e86\u786e\u4fdd\u5176\u5728\u6240\u6709\u5e73\u53f0\u4e0a\u90fd\u80fd\u5c3d\u53ef\u80fd\u6709\u6548\u5730\u5de5\u4f5c\uff0c\u4ed6\u4eec\u613f\u610f\u505a\u51fa\u5fc5\u8981\u7684\u8c03\u6574\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><strong>24.<\/strong> <strong>2020\u5e74\u7684\u9884\u6d4b<\/strong><\/p>\n<ul>\n<li>\u968f%9<br \/>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/levelup.gitconnected.com\/a-recap-of-frontend-de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[105],"tags":[],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2991"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2991"}],"version-history":[{"count":3,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2991\/revisions"}],"predecessor-version":[{"id":2995,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2991\/revisions\/2995"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}