{"id":288,"date":"2026-05-13T14:46:22","date_gmt":"2026-05-13T06:46:22","guid":{"rendered":"https:\/\/leezp.top\/?p=288"},"modified":"2026-05-13T15:53:11","modified_gmt":"2026-05-13T07:53:11","slug":"react%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%ef%bc%88%e6%9c%ba%e8%af%95%e5%a4%8d%e4%b9%a0%e7%94%a8%ef%bc%89","status":"publish","type":"post","link":"https:\/\/leezp.top\/?p=288","title":{"rendered":"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">React \u4ecb\u7ecd\u4e0e\u6838\u5fc3\u6982\u5ff5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">React \u4ecb\u7ecd\u53ca\u7279\u6027<\/h3>\n\n\n\n<p>React \u662f\u7531 Facebook\uff08Meta\uff09\u5f00\u53d1\u5e76\u5f00\u6e90\u7684 JavaScript \u5e93\uff0c\u7528\u4e8e\u6784\u5efa\u7528\u6237\u754c\u9762\uff08UI\uff09\u3002\u5b83\u7684\u6838\u5fc3\u7279\u6027\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u58f0\u660e\u5f0f\u7f16\u7a0b<\/strong>\uff1a\u5f00\u53d1\u8005\u53ea\u9700\u63cf\u8ff0 UI \u5e94\u8be5\u662f\u4ec0\u4e48\u6837\u5b50\uff0cReact \u8d1f\u8d23\u9ad8\u6548\u5730\u66f4\u65b0\u548c\u6e32\u67d3\u3002\u5f53\u6570\u636e\u53d8\u5316\u65f6\uff0cReact \u81ea\u52a8\u66f4\u65b0\u5bf9\u5e94\u7684\u7ec4\u4ef6\u3002<\/li>\n\n\n<li><strong>\u7ec4\u4ef6\u5316<\/strong>\uff1aUI \u88ab\u62c6\u5206\u6210\u72ec\u7acb\u3001\u53ef\u590d\u7528\u7684\u7ec4\u4ef6\uff0c\u6bcf\u4e2a\u7ec4\u4ef6\u7ba1\u7406\u81ea\u5df1\u7684\u72b6\u6001\u548c\u6e32\u67d3\u903b\u8f91\uff0c\u6781\u5927\u5730\u63d0\u9ad8\u4e86\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027\u548c\u590d\u7528\u6027\u3002<\/li>\n\n\n<li><strong>\u4e00\u6b21\u5b66\u4e60\uff0c\u968f\u5904\u7f16\u5199<\/strong>\uff1aReact \u53ef\u4ee5\u6e32\u67d3\u5230\u591a\u79cd\u5e73\u53f0\uff08Web\u3001\u79fb\u52a8\u7aef React Native\u3001VR\u3001\u670d\u52a1\u7aef\u7b49\uff09\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e0e\u4f20\u7edf MVC \u7684\u5173\u7cfb\u3001MVVM \u6a21\u5f0f<\/h3>\n\n\n\n<p><strong>MVC\uff08Model-View-Controller\uff09<\/strong>\uff1a\u4f20\u7edf MVC \u4e2d\uff0cModel \u7ba1\u7406\u6570\u636e\uff0cView \u8d1f\u8d23\u5c55\u793a\uff0cController \u5904\u7406\u7528\u6237\u8f93\u5165\u5e76\u66f4\u65b0 Model \u548c View\u3002<\/p>\n\n\n\n<p>React \u5728\u4f20\u7edf MVC \u4e2d\u7684\u5b9a\u4f4d\u662f <strong>View \u5c42<\/strong>\u2014\u2014\u5b83\u4e13\u6ce8\u4e8e UI \u7684\u6e32\u67d3\uff0c\u4e0d\u5185\u7f6e Model \u548c Controller\u3002\u4f46\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\uff0cReact \u914d\u5408\u72b6\u6001\u7ba1\u7406\u5e93\uff08\u5982 Redux\uff09\u53ef\u4ee5\u5b9e\u73b0\u5b8c\u6574\u7684 MVC \u6a21\u5f0f\u3002<\/p>\n\n\n\n<p><strong>MVVM\uff08Model-View-ViewModel\uff09<\/strong>\uff1aMVVM \u4e2d ViewModel \u4f5c\u4e3a View \u548c Model \u4e4b\u95f4\u7684\u6865\u6881\uff0cView \u901a\u8fc7\u6570\u636e\u7ed1\u5b9a\u81ea\u52a8\u540c\u6b65\u6570\u636e\u3002React \u5e76\u4e0d\u662f\u4e25\u683c\u7684 MVVM \u6846\u67b6\uff0c\u4f46\u914d\u5408 Hooks \u6216\u72b6\u6001\u7ba1\u7406\u53ef\u4ee5\u5b9e\u73b0\u7c7b\u4f3c MVVM \u7684\u6570\u636e\u6d41\uff1a\u7ec4\u4ef6\uff08View\uff09\u901a\u8fc7 Hooks\uff08ViewModel\uff09\u64cd\u4f5c\u6570\u636e\uff08Model\uff09\uff0c\u6570\u636e\u53d8\u5316\u81ea\u52a8\u89e6\u53d1 UI \u91cd\u65b0\u6e32\u67d3\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">React \u7684\u4e09\u5927\u6838\u5fc3\u6982\u5ff5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u7ec4\u4ef6\uff08Component\uff09<\/strong>\uff1aReact \u5e94\u7528\u7531\u7ec4\u4ef6\u7ec4\u6210\uff0c\u7ec4\u4ef6\u662f UI \u7684\u57fa\u672c\u6784\u5efa\u5757\u3002\u53ef\u4ee5\u662f\u51fd\u6570\u7ec4\u4ef6\u6216\u7c7b\u7ec4\u4ef6\u3002<\/li>\n\n\n<li><strong>\u72b6\u6001\uff08State\uff09<\/strong>\uff1a\u7ec4\u4ef6\u5185\u90e8\u7ba1\u7406\u7684\u6570\u636e\uff0c\u72b6\u6001\u53d8\u5316\u4f1a\u89e6\u53d1\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\u3002<\/li>\n\n\n<li><strong>\u5c5e\u6027\uff08Props\uff09<\/strong>\uff1a\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\u7684\u53ea\u8bfb\u5a92\u4ecb\uff0c\u662f\u7ec4\u4ef6\u95f4\u5355\u5411\u6570\u636e\u6d41\u7684\u57fa\u7840\u3002<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u865a\u62df DOM \u7684\u597d\u5904<\/h3>\n\n\n\n<p>\u865a\u62df DOM\uff08Virtual DOM\uff09\u662f React \u7684\u6838\u5fc3\u673a\u5236\u4e4b\u4e00\uff0c\u5b83\u662f\u771f\u5b9e DOM \u7684 JavaScript \u5bf9\u8c61\u8868\u793a\uff08\u8f7b\u91cf\u7ea7\u526f\u672c\uff09\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6027\u80fd\u4f18\u5316<\/strong>\uff1a\u76f4\u63a5\u64cd\u4f5c\u771f\u5b9e DOM \u4ee3\u4ef7\u9ad8\u6602\u3002React \u5148\u5728\u865a\u62df DOM \u4e0a\u8fdb\u884c\u53d8\u66f4\uff0c\u518d\u901a\u8fc7 Diff \u7b97\u6cd5\u8ba1\u7b97\u6700\u5c0f\u53d8\u66f4\u96c6\uff0c\u6700\u540e\u6279\u91cf\u66f4\u65b0\u771f\u5b9e DOM\u3002<\/li>\n\n\n<li><strong>\u8de8\u5e73\u53f0\u80fd\u529b<\/strong>\uff1a\u865a\u62df DOM \u662f\u5e73\u53f0\u65e0\u5173\u7684 JavaScript \u5bf9\u8c61\uff0c\u53ef\u4ee5\u6e32\u67d3\u5230\u4e0d\u540c\u5e73\u53f0\uff08DOM\u3001Native\u3001Canvas \u7b49\uff09\u3002<\/li>\n\n\n<li><strong>\u5f00\u53d1\u4f53\u9a8c<\/strong>\uff1a\u5f00\u53d1\u8005\u65e0\u9700\u624b\u52a8\u64cd\u4f5c DOM\uff0c\u53ea\u9700\u63cf\u8ff0 UI \u72b6\u6001\uff0cReact \u81ea\u52a8\u5904\u7406\u66f4\u65b0\u3002<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u865a\u62df DOM \u7684\u7b80\u5355\u793a\u4f8b<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> virtualDOM<\/span><span style=\"color:#D4D4D4\"> = {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  type:<\/span><span style=\"color:#CE9178\"> 'div'<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  props:<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">className:<\/span><span style=\"color:#CE9178\"> 'container'<\/span><span style=\"color:#D4D4D4\"> },<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  children:<\/span><span style=\"color:#D4D4D4\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    { <\/span><span style=\"color:#9CDCFE\">type:<\/span><span style=\"color:#CE9178\"> 'h1'<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">props:<\/span><span style=\"color:#D4D4D4\"> {}, <\/span><span style=\"color:#9CDCFE\">children:<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#CE9178\">'Hello World'<\/span><span style=\"color:#D4D4D4\">] }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  ]<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">React Diff \u7b97\u6cd5<\/h3>\n\n\n\n<p>React \u7684 Diff \u7b97\u6cd5\u7528\u4e8e\u6bd4\u8f83\u65b0\u65e7\u865a\u62df DOM \u6811\uff0c\u627e\u51fa\u6700\u5c0f\u5dee\u5f02\u5e76\u9ad8\u6548\u66f4\u65b0\u771f\u5b9e DOM\u3002\u5176\u6838\u5fc3\u7b56\u7565\u57fa\u4e8e\u4e09\u4e2a\u5047\u8bbe\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Tree Diff<\/strong>\uff1a\u53ea\u5bf9<strong>\u540c\u5c42\u8282\u70b9<\/strong>\u8fdb\u884c\u6bd4\u8f83\uff0c\u590d\u6742\u5ea6\u4ece O(n\u00b3) \u964d\u5230 O(n)\u3002<\/li>\n\n\n<li><strong>Component Diff<\/strong>\uff1a\u76f8\u540c\u7c7b\u578b\u7684\u7ec4\u4ef6\u751f\u6210\u76f8\u4f3c\u7684\u6811\u7ed3\u6784\uff0c\u4e0d\u540c\u7c7b\u578b\u7684\u7ec4\u4ef6\u76f4\u63a5\u66ff\u6362\u6574\u68f5\u5b50\u6811\u3002<\/li>\n\n\n<li><strong>Element Diff<\/strong>\uff1a\u540c\u4e00\u5c42\u7ea7\u7684\u540c\u7ec4\u5b50\u8282\u70b9\uff0c\u901a\u8fc7<strong>\u552f\u4e00 key<\/strong> \u6765\u8bc6\u522b\uff0c\u5b9e\u73b0\u63d2\u5165\u3001\u5220\u9664\u3001\u79fb\u52a8\u7684\u6700\u5c0f\u5316\u3002<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6A9955\">\/\/ key \u5e2e\u52a9 React \u8bc6\u522b\u5217\u8868\u4e2d\u7684\u6bcf\u4e2a\u5143\u7d20<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">{<\/span><span style=\"color:#9CDCFE\">list<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">map<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">item<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">  &#x3C;<\/span><span style=\"color:#569CD6\">li<\/span><span style=\"color:#9CDCFE\"> key<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">item<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">item<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">li<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">))}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd \u4ee5\u4e0b\u5173\u4e8e\u865a\u62df DOM \u7684\u63cf\u8ff0\uff0c\u54ea\u9879\u662f\u9519\u8bef\u7684\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u865a\u62df DOM \u662f\u771f\u5b9e DOM \u7684 JavaScript \u5bf9\u8c61\u8868\u793a<\/li>\n\n\n<li>B. \u865a\u62df DOM \u7684 Diff \u7b97\u6cd5\u590d\u6742\u5ea6\u662f O(n\u00b3)<\/li>\n\n\n<li>C. \u865a\u62df DOM \u53ef\u4ee5\u5b9e\u73b0\u8de8\u5e73\u53f0\u6e32\u67d3<\/li>\n\n\n<li>D. React \u901a\u8fc7\u6279\u91cf\u66f4\u65b0\u51cf\u5c11\u771f\u5b9e DOM \u64cd\u4f5c<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08Diff \u7b97\u6cd5\u901a\u8fc7\u540c\u5c42\u6bd4\u8f83\u7b56\u7565\u5c06\u590d\u6742\u5ea6\u4ece O(n\u00b3) \u964d\u5230\u4e86 O(n)\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd React \u4e2d\uff0c\u7528\u4e8e\u552f\u4e00\u6807\u8bc6\u5217\u8868\u5143\u7d20\u7684\u5c5e\u6027\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. id<\/li>\n\n\n<li>B. ref<\/li>\n\n\n<li>C. key<\/li>\n\n\n<li>D. index<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC\uff08key \u5e2e\u52a9 React \u8bc6\u522b\u54ea\u4e9b\u5143\u7d20\u53d1\u751f\u4e86\u53d8\u5316\u3001\u6dfb\u52a0\u6216\u5220\u9664\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd \u5173\u4e8e React \u5728 MVC \u4e2d\u7684\u5b9a\u4f4d\uff0c\u4ee5\u4e0b\u8bf4\u6cd5\u6b63\u786e\u7684\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. React \u662f\u4e00\u4e2a\u5b8c\u6574\u7684 MVC \u6846\u67b6<\/li>\n\n\n<li>B. React \u4e3b\u8981\u5173\u6ce8 View \u5c42<\/li>\n\n\n<li>C. React \u662f MVVM \u6846\u67b6<\/li>\n\n\n<li>D. React \u66ff\u4ee3\u4e86\u540e\u7aef MVC<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08React \u4e13\u6ce8\u4e8e UI \u6e32\u67d3\uff0c\u5b9a\u4f4d\u4e3a View \u5c42\uff09<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">React \u811a\u624b\u67b6\u53ca\u4f7f\u7528<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">create-react-app\uff08CRA\uff09<\/h3>\n\n\n\n<p>create-react-app \u662f React \u5b98\u65b9\u63d0\u4f9b\u7684\u811a\u624b\u67b6\u5de5\u5177\uff0c\u7528\u4e8e\u5feb\u901f\u521b\u5efa\u5355\u9875 React \u5e94\u7528\uff0c\u5185\u7f6e\u4e86 webpack\u3001Babel\u3001ESLint \u7b49\u914d\u7f6e\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6A9955\"># \u521b\u5efa\u9879\u76ee<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">npx<\/span><span style=\"color:#CE9178\"> create-react-app<\/span><span style=\"color:#CE9178\"> my-app<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\"># \u4f7f\u7528 TypeScript \u6a21\u677f<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">npx<\/span><span style=\"color:#CE9178\"> create-react-app<\/span><span style=\"color:#CE9178\"> my-app<\/span><span style=\"color:#569CD6\"> --template<\/span><span style=\"color:#CE9178\"> typescript<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\"># \u8fdb\u5165\u9879\u76ee\u5e76\u542f\u52a8<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">cd<\/span><span style=\"color:#CE9178\"> my-app<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">npm<\/span><span style=\"color:#CE9178\"> start<\/span><span style=\"color:#6A9955\">   # \u542f\u52a8\u5f00\u53d1\u670d\u52a1\u5668\uff0chttp:\/\/localhost:3000<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>\u9879\u76ee\u7ed3\u6784\uff1a<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#DCDCAA\">my-app\/<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u251c\u2500\u2500<\/span><span style=\"color:#CE9178\"> node_modules\/<\/span><span style=\"color:#6A9955\">      # \u4f9d\u8d56\u5305<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u251c\u2500\u2500<\/span><span style=\"color:#CE9178\"> public\/<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u2502<\/span><span style=\"color:#CE9178\">   \u251c\u2500\u2500<\/span><span style=\"color:#CE9178\"> index.html<\/span><span style=\"color:#6A9955\">     # \u5165\u53e3 HTML \u6a21\u677f<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u2502<\/span><span style=\"color:#CE9178\">   \u2514\u2500\u2500<\/span><span style=\"color:#CE9178\"> favicon.ico<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u251c\u2500\u2500<\/span><span style=\"color:#CE9178\"> src\/<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u2502<\/span><span style=\"color:#CE9178\">   \u251c\u2500\u2500<\/span><span style=\"color:#CE9178\"> App.js<\/span><span style=\"color:#6A9955\">         # \u6839\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u2502<\/span><span style=\"color:#CE9178\">   \u251c\u2500\u2500<\/span><span style=\"color:#CE9178\"> App.css<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u2502<\/span><span style=\"color:#CE9178\">   \u251c\u2500\u2500<\/span><span style=\"color:#CE9178\"> index.js<\/span><span style=\"color:#6A9955\">       # \u5165\u53e3 JS \u6587\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u2502<\/span><span style=\"color:#CE9178\">   \u251c\u2500\u2500<\/span><span style=\"color:#CE9178\"> index.css<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u2502<\/span><span style=\"color:#CE9178\">   \u2514\u2500\u2500<\/span><span style=\"color:#CE9178\"> reportWebVitals.js<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u251c\u2500\u2500<\/span><span style=\"color:#CE9178\"> package.json<\/span><span style=\"color:#6A9955\">       # \u9879\u76ee\u914d\u7f6e\u4e0e\u4f9d\u8d56<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">\u2514\u2500\u2500<\/span><span style=\"color:#CE9178\"> README.md<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd \u4f7f\u7528 create-react-app \u521b\u5efa TypeScript \u9879\u76ee\uff0c\u6b63\u786e\u7684\u547d\u4ee4\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. npx create-react-app my-app &#8211;ts<\/li>\n\n\n<li>B. npx create-react-app my-app &#8211;template typescript<\/li>\n\n\n<li>C. npx create-react-app my-app &#8211;typescript<\/li>\n\n\n<li>D. npx create-react-app my-app -t ts<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd CRA \u521b\u5efa\u7684\u9879\u76ee\u4e2d\uff0c\u5165\u53e3 JS \u6587\u4ef6\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. src\/App.js<\/li>\n\n\n<li>B. public\/index.html<\/li>\n\n\n<li>C. src\/index.js<\/li>\n\n\n<li>D. package.json<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC\uff08src\/index.js \u662f webpack \u6253\u5305\u5165\u53e3\uff0c\u901a\u8fc7 ReactDOM.render \u6e32\u67d3 App \u7ec4\u4ef6\u5230 public\/index.html \u7684\u6839\u8282\u70b9\uff09<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JSX \/ TSX \u7684\u7406\u89e3\u4e0e\u4f7f\u7528<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">JSX\uff08JavaScript XML\uff09<\/h3>\n\n\n\n<p>JSX \u662f JavaScript \u7684\u8bed\u6cd5\u6269\u5c55\uff0c\u5141\u8bb8\u5728 JS \u4ee3\u7801\u4e2d\u7f16\u5199\u7c7b\u4f3c HTML \u7684\u6807\u8bb0\u3002\u5b83\u662f <code>React.createElement()<\/code> \u7684\u8bed\u6cd5\u7cd6\u3002<\/p>\n\n\n\n<p><strong>\u6838\u5fc3\u89c4\u5219\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5fc5\u987b\u6709\u4e00\u4e2a\u6839\u5143\u7d20\uff08\u6216\u4f7f\u7528 <code>&lt;&gt;...&lt;\/&gt;<\/code> Fragment\uff09<\/li>\n\n\n<li>\u4f7f\u7528 <code>{}<\/code> \u5d4c\u5165 JavaScript \u8868\u8fbe\u5f0f<\/li>\n\n\n<li>\u4f7f\u7528 <code>className<\/code> \u4ee3\u66ff <code>class<\/code>\uff0c<code>htmlFor<\/code> \u4ee3\u66ff <code>for<\/code><\/li>\n\n\n<li>\u6837\u5f0f\u5bf9\u8c61\u4f7f\u7528\u9a7c\u5cf0\u547d\u540d\uff1a<code>backgroundColor<\/code> \u800c\u975e <code>background-color<\/code><\/li>\n\n\n<li>\u81ea\u95ed\u5408\u6807\u7b7e\u5fc5\u987b\u4ee5 <code>\/&gt;<\/code> \u7ed3\u5c3e<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#9CDCFE\"> React<\/span><span style=\"color:#C586C0\"> from<\/span><span style=\"color:#CE9178\"> 'react'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> App<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> name<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#CE9178\">'React'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> style<\/span><span style=\"color:#D4D4D4\"> = { <\/span><span style=\"color:#9CDCFE\">color:<\/span><span style=\"color:#CE9178\"> 'blue'<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">fontSize:<\/span><span style=\"color:#CE9178\"> '20px'<\/span><span style=\"color:#D4D4D4\"> };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#9CDCFE\"> className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"app\"<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">h1<\/span><span style=\"color:#9CDCFE\"> style<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">style<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">Hello, <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#D4D4D4\">!<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">h1<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">      {<\/span><span style=\"color:#B5CEA8\">2<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">2<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#569CD6\">  {<\/span><span style=\"color:#6A9955\">\/* \u8868\u8fbe\u5f0f\u6c42\u503c *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">input<\/span><span style=\"color:#9CDCFE\"> type<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"text\"<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#569CD6\">  {<\/span><span style=\"color:#6A9955\">\/* \u81ea\u95ed\u5408 *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">TSX\uff08TypeScript JSX\uff09<\/h3>\n\n\n\n<p>TSX \u662f TypeScript \u4e2d\u7684 JSX\uff0c\u589e\u52a0\u4e86\u7c7b\u578b\u68c0\u67e5\uff0c\u63d0\u9ad8\u4ee3\u7801\u7684\u5065\u58ee\u6027\u548c\u53ef\u7ef4\u62a4\u6027\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#9CDCFE\"> React<\/span><span style=\"color:#D4D4D4\">, { <\/span><span style=\"color:#9CDCFE\">FC<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'react'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">interface<\/span><span style=\"color:#4EC9B0\"> AppProps<\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  title<\/span><span style=\"color:#D4D4D4\">: <\/span><span style=\"color:#4EC9B0\">string<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  count<\/span><span style=\"color:#D4D4D4\">?: <\/span><span style=\"color:#4EC9B0\">number<\/span><span style=\"color:#D4D4D4\">;  <\/span><span style=\"color:#6A9955\">\/\/ \u53ef\u9009\u5c5e\u6027<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#DCDCAA\"> App<\/span><span style=\"color:#D4D4D4\">: <\/span><span style=\"color:#4EC9B0\">FC<\/span><span style=\"color:#D4D4D4\">&#x3C;<\/span><span style=\"color:#4EC9B0\">AppProps<\/span><span style=\"color:#D4D4D4\">> = ({ <\/span><span style=\"color:#9CDCFE\">title<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#B5CEA8\">0<\/span><span style=\"color:#D4D4D4\"> }) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    &#x3C;<\/span><span style=\"color:#4EC9B0\">div<\/span><span style=\"color:#D4D4D4\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">      &#x3C;<\/span><span style=\"color:#4EC9B0\">h1<\/span><span style=\"color:#D4D4D4\">>{<\/span><span style=\"color:#9CDCFE\">title<\/span><span style=\"color:#D4D4D4\">}&#x3C;\/<\/span><span style=\"color:#9CDCFE\">h1<\/span><span style=\"color:#D4D4D4\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">      &#x3C;<\/span><span style=\"color:#4EC9B0\">p<\/span><span style=\"color:#D4D4D4\">><\/span><span style=\"color:#9CDCFE\">Count<\/span><span style=\"color:#D4D4D4\">: {<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\">}&#x3C;\/<\/span><span style=\"color:#4EC9B0\">p<\/span><span style=\"color:#D4D4D4\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    &#x3C;\/<\/span><span style=\"color:#9CDCFE\">div<\/span><span style=\"color:#D4D4D4\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">export<\/span><span style=\"color:#C586C0\"> default<\/span><span style=\"color:#9CDCFE\"> App<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd JSX \u4e2d\u8bbe\u7f6e CSS \u7c7b\u540d\uff0c\u6b63\u786e\u7684\u5c5e\u6027\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. class<\/li>\n\n\n<li>B. className<\/li>\n\n\n<li>C. cssClass<\/li>\n\n\n<li>D. styleClass<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08\u4f7f\u7528 className \u66ff\u4ee3 HTML \u7684 class \u5c5e\u6027\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd JSX \u4e2d\u5d4c\u5165 JavaScript \u8868\u8fbe\u5f0f\u4f7f\u7528\u4ec0\u4e48\u7b26\u53f7\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. {{ }}<\/li>\n\n\n<li>B. { }<\/li>\n\n\n<li>C. (( ))<\/li>\n\n\n<li>D. [[ ]]<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08\u82b1\u62ec\u53f7 {} \u4e2d\u53ef\u4ee5\u5d4c\u5165\u4efb\u610f\u6709\u6548\u7684 JavaScript \u8868\u8fbe\u5f0f\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd \u4ee5\u4e0b\u54ea\u4e2a\u662f JSX \u4e2d\u6b63\u786e\u7684\u6ce8\u91ca\u5199\u6cd5\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \/\/ \u6ce8\u91ca<\/li>\n\n\n<li>B. {\/* \u6ce8\u91ca *\/}<\/li>\n\n\n<li>C. <!-- \u6ce8\u91ca --><\/li>\n\n\n<li>D. # \u6ce8\u91ca<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u51fd\u6570\u7ec4\u4ef6<\/h2>\n\n\n\n<p>\u51fd\u6570\u7ec4\u4ef6\u662f\u4f7f\u7528 JavaScript \u51fd\u6570\u5b9a\u4e49\u7684 React \u7ec4\u4ef6\uff0c\u662f React 16.8+ \u5f15\u5165 Hooks \u540e\u63a8\u8350\u7684\u7ec4\u4ef6\u7f16\u5199\u65b9\u5f0f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7ec4\u4ef6\u6982\u5ff5<\/h3>\n\n\n\n<p>\u51fd\u6570\u7ec4\u4ef6\u63a5\u6536 props \u4f5c\u4e3a\u53c2\u6570\uff0c\u8fd4\u56de JSX \u63cf\u8ff0 UI\u3002\u5b83\u662f<strong>\u65e0\u526f\u4f5c\u7528\u7684\u7eaf\u51fd\u6570<\/strong>\u2014\u2014\u76f8\u540c\u8f93\u5165\u59cb\u7ec8\u8fd4\u56de\u76f8\u540c\u8f93\u51fa\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u57fa\u7840\u51fd\u6570\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Welcome<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">h1<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">Hello, <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">h1<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u7bad\u5934\u51fd\u6570\u5199\u6cd5<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#DCDCAA\"> Welcome<\/span><span style=\"color:#D4D4D4\"> = ({ <\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#D4D4D4\"> }) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">h1<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">Hello, <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">h1<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e8b\u4ef6\u7ed1\u5b9a<\/h3>\n\n\n\n<p>React \u4e2d\u4e8b\u4ef6\u4f7f\u7528\u9a7c\u5cf0\u547d\u540d\uff08\u5982 onClick\u3001onChange\uff09\uff0c\u901a\u8fc7 <code>{}<\/code> \u7ed1\u5b9a\u5904\u7406\u51fd\u6570\u3002event \u662f React \u7684\u5408\u6210\u4e8b\u4ef6\uff08SyntheticEvent\uff09\u3002<\/p>\n\n\n\n<p><strong>\u6ce8\u610f<\/strong>\uff1a\u5e94\u4f20\u9012\u51fd\u6570\u5f15\u7528\u800c\u975e\u8c03\u7528\u7ed3\u679c\uff08<code>onClick={handleClick}<\/code> \u800c\u975e <code>onClick={handleClick()}<\/code>\uff09\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Button<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#DCDCAA\"> handleClick<\/span><span style=\"color:#D4D4D4\"> = (<\/span><span style=\"color:#9CDCFE\">event<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'\u6309\u94ae\u88ab\u70b9\u51fb'<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">event<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">target<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#DCDCAA\"> handleChange<\/span><span style=\"color:#D4D4D4\"> = (<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'\u8f93\u5165\u503c:'<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">target<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">value<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">handleClick<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u70b9\u51fb\u6211<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">input<\/span><span style=\"color:#9CDCFE\"> onChange<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">handleChange<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#9CDCFE\"> placeholder<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"\u8f93\u5165\u5185\u5bb9\"<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u7ec4\u4ef6\u72b6\u6001\uff08useState\uff09<\/h3>\n\n\n\n<p>\u4f7f\u7528 useState Hook \u7ba1\u7406\u51fd\u6570\u7ec4\u4ef6\u5185\u90e8\u7684\u72b6\u6001\u3002setState \u652f\u6301\u76f4\u63a5\u4f20\u503c\u548c\u51fd\u6570\u5f0f\u66f4\u65b0\u4e24\u79cd\u65b9\u5f0f\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">useState<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'react'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Counter<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">count<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setCount<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#B5CEA8\">0<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u8ba1\u6570: <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> setCount<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">+1<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> setCount<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\"> - <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">-1<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u751f\u547d\u5468\u671f\uff08useEffect\uff09<\/h3>\n\n\n\n<p>\u51fd\u6570\u7ec4\u4ef6\u6ca1\u6709\u4f20\u7edf\u7684\u751f\u547d\u5468\u671f\u65b9\u6cd5\uff0c\u800c\u662f\u7528 useEffect Hook \u5904\u7406\u526f\u4f5c\u7528\uff0c\u6a21\u62df componentDidMount\u3001componentDidUpdate\u3001componentWillUnmount\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">useState<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useEffect<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'react'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> UserProfile<\/span><span style=\"color:#D4D4D4\">({ <\/span><span style=\"color:#9CDCFE\">userId<\/span><span style=\"color:#D4D4D4\"> }) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">user<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setUser<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#569CD6\">null<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  useEffect<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">    \/\/ componentDidMount + componentDidUpdate\uff08userId \u53d8\u5316\u65f6\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    fetchUser<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">userId<\/span><span style=\"color:#D4D4D4\">).<\/span><span style=\"color:#DCDCAA\">then<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">data<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#DCDCAA\"> setUser<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">data<\/span><span style=\"color:#D4D4D4\">));<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">    \/\/ componentWillUnmount\uff08\u6e05\u7406\u51fd\u6570\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    return<\/span><span style=\"color:#D4D4D4\"> () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'\u7ec4\u4ef6\u5378\u8f7d\u6216 userId \u53d8\u5316\u524d\u6e05\u7406'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }, [<\/span><span style=\"color:#9CDCFE\">userId<\/span><span style=\"color:#D4D4D4\">]);  <\/span><span style=\"color:#6A9955\">\/\/ \u4f9d\u8d56\u6570\u7ec4\uff1a\u4ec5 userId \u53d8\u5316\u65f6\u91cd\u65b0\u6267\u884c<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">user<\/span><span style=\"color:#D4D4D4\">?.<\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd \u5173\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u63cf\u8ff0\uff0c\u9519\u8bef\u7684\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u51fd\u6570\u7ec4\u4ef6\u53ef\u4ee5\u4f7f\u7528 Hooks \u7ba1\u7406\u72b6\u6001<\/li>\n\n\n<li>B. \u51fd\u6570\u7ec4\u4ef6\u5fc5\u987b\u4f7f\u7528 return \u8fd4\u56de JSX<\/li>\n\n\n<li>C. \u51fd\u6570\u7ec4\u4ef6\u4e0d\u80fd\u4f7f\u7528\u751f\u547d\u5468\u671f<\/li>\n\n\n<li>D. \u51fd\u6570\u7ec4\u4ef6\u901a\u8fc7 props \u63a5\u6536\u5916\u90e8\u6570\u636e<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC\uff08useEffect Hook \u53ef\u4ee5\u6a21\u62df\u6240\u6709\u7c7b\u7ec4\u4ef6\u751f\u547d\u5468\u671f\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd useEffect \u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\u4e3a\u7a7a\u6570\u7ec4 [] \u65f6\uff0ceffect \u4f55\u65f6\u6267\u884c\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u6bcf\u6b21\u6e32\u67d3\u540e\u90fd\u6267\u884c<\/li>\n\n\n<li>B. \u4ec5\u5728\u7ec4\u4ef6\u6302\u8f7d\u65f6\u6267\u884c\u4e00\u6b21<\/li>\n\n\n<li>C. \u4ec5\u5728\u7ec4\u4ef6\u5378\u8f7d\u65f6\u6267\u884c<\/li>\n\n\n<li>D. \u4ece\u4e0d\u6267\u884c<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08\u7a7a\u4f9d\u8d56\u6570\u7ec4\u8868\u793a\u4e0d\u4f9d\u8d56\u4efb\u4f55\u503c\uff0c\u53ea\u5728\u9996\u6b21\u6e32\u67d3\u540e\u6267\u884c\u4e00\u6b21\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd \u51fd\u6570\u7ec4\u4ef6\u4e2d\uff0c\u4ee5\u4e0b\u54ea\u4e2a\u662f\u6b63\u786e\u7684\u4e8b\u4ef6\u7ed1\u5b9a\u65b9\u5f0f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. onClick={handleClick()}<\/li>\n\n\n<li>B. onClick=&#8221;handleClick()&#8221;<\/li>\n\n\n<li>C. onClick={handleClick}<\/li>\n\n\n<li>D. onclick={handleClick}<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC\uff08\u4f20\u9012\u51fd\u6570\u5f15\u7528\uff0c\u4e8b\u4ef6\u540d\u4f7f\u7528\u9a7c\u5cf0 onClick\uff09<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7c7b\u7ec4\u4ef6<\/h2>\n\n\n\n<p>\u7c7b\u7ec4\u4ef6\u662f\u4f7f\u7528 ES6 class \u5b9a\u4e49\u7684 React \u7ec4\u4ef6\uff0c\u7ee7\u627f\u81ea React.Component\u3002\u5728 Hooks \u51fa\u73b0\u524d\u662f\u7ba1\u7406\u72b6\u6001\u7684\u4e3b\u8981\u65b9\u5f0f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7ec4\u4ef6\u6982\u5ff5\u4e0e\u7ed3\u6784<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#9CDCFE\"> React<\/span><span style=\"color:#D4D4D4\">, { <\/span><span style=\"color:#9CDCFE\">Component<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'react'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">class<\/span><span style=\"color:#4EC9B0\"> Welcome<\/span><span style=\"color:#569CD6\"> extends<\/span><span style=\"color:#4EC9B0\"> Component<\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ \u7c7b\u7ec4\u4ef6\u5fc5\u987b\u5b9e\u73b0 render \u65b9\u6cd5<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  render<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">h1<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">Hello, <\/span><span style=\"color:#569CD6\">{this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">h1<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u4e8b\u4ef6\u7ed1\u5b9a\u4e0e this<\/h3>\n\n\n\n<p>\u7c7b\u7ec4\u4ef6\u4e2d\u4e8b\u4ef6\u5904\u7406\u9700\u8981\u5173\u6ce8 <code>this<\/code> \u7684\u7ed1\u5b9a\u95ee\u9898\u3002\u4e24\u79cd\u65b9\u5f0f\uff1a\u6784\u9020\u51fd\u6570\u4e2d bind \u6216\u4f7f\u7528\u7bad\u5934\u51fd\u6570\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">class<\/span><span style=\"color:#4EC9B0\"> Toggle<\/span><span style=\"color:#569CD6\"> extends<\/span><span style=\"color:#4EC9B0\"> Component<\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  constructor<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    super<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\"> = { <\/span><span style=\"color:#9CDCFE\">isOn:<\/span><span style=\"color:#569CD6\"> true<\/span><span style=\"color:#D4D4D4\"> };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">    \/\/ \u65b9\u5f0f\u4e00\uff1a\u5728\u6784\u9020\u51fd\u6570\u4e2d\u7ed1\u5b9a this<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">handleClick<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#569CD6\">this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">handleClick<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">bind<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#569CD6\">this<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  handleClick<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">setState<\/span><span style=\"color:#D4D4D4\">({ <\/span><span style=\"color:#9CDCFE\">isOn:<\/span><span style=\"color:#D4D4D4\"> !<\/span><span style=\"color:#569CD6\">this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">isOn<\/span><span style=\"color:#D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ \u65b9\u5f0f\u4e8c\uff1a\u7bad\u5934\u51fd\u6570\uff08\u81ea\u52a8\u7ed1\u5b9a this\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  handleClickArrow<\/span><span style=\"color:#D4D4D4\"> = () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">setState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> ({ <\/span><span style=\"color:#9CDCFE\">isOn:<\/span><span style=\"color:#D4D4D4\"> !<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">isOn<\/span><span style=\"color:#D4D4D4\"> }));<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  render<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">handleClick<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">        {this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">isOn<\/span><span style=\"color:#D4D4D4\"> ? <\/span><span style=\"color:#CE9178\">'ON'<\/span><span style=\"color:#D4D4D4\"> : <\/span><span style=\"color:#CE9178\">'OFF'<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">State \u4e0e setState<\/h3>\n\n\n\n<p>setState \u662f<strong>\u5f02\u6b65<\/strong>\u7684\uff0cReact \u4f1a\u6279\u91cf\u5904\u7406\u72b6\u6001\u66f4\u65b0\u4ee5\u4f18\u5316\u6027\u80fd\u3002\u4f9d\u8d56\u524d\u4e00\u4e2a\u72b6\u6001\u65f6\uff0c\u5e94\u4f7f\u7528\u51fd\u6570\u5f0f\u66f4\u65b0\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">class<\/span><span style=\"color:#4EC9B0\"> Counter<\/span><span style=\"color:#569CD6\"> extends<\/span><span style=\"color:#4EC9B0\"> Component<\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  constructor<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    super<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\"> = { <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#B5CEA8\"> 0<\/span><span style=\"color:#D4D4D4\"> };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  increment<\/span><span style=\"color:#D4D4D4\"> = () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">    \/\/ \u51fd\u6570\u5f0f\u66f4\u65b0\uff1a\u83b7\u53d6\u6700\u65b0\u72b6\u6001<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">setState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> ({ <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\"> }));<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  render<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#569CD6\">{this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">increment<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">+1<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u751f\u547d\u5468\u671f<\/h3>\n\n\n\n<p>\u7c7b\u7ec4\u4ef6\u6709\u4e09\u4e2a\u4e3b\u8981\u751f\u547d\u5468\u671f\u9636\u6bb5\uff1a<\/p>\n\n\n\n<p><strong>\u6302\u8f7d\u9636\u6bb5\uff08Mounting\uff09<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>constructor()<\/code> \u2014\u2014 \u521d\u59cb\u5316 state \u548c\u7ed1\u5b9a\u65b9\u6cd5<\/li>\n\n\n<li><code>render()<\/code> \u2014\u2014 \u6e32\u67d3 UI<\/li>\n\n\n<li><code>componentDidMount()<\/code> \u2014\u2014 \u7ec4\u4ef6\u6302\u8f7d\u540e\uff0c\u9002\u5408\u53d1\u8d77\u7f51\u7edc\u8bf7\u6c42\u3001\u8ba2\u9605<\/li>\n<\/ul>\n\n\n\n<p><strong>\u66f4\u65b0\u9636\u6bb5\uff08Updating\uff09<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>render()<\/code> \u2014\u2014 \u91cd\u65b0\u6e32\u67d3<\/li>\n\n\n<li><code>componentDidUpdate(prevProps, prevState)<\/code> \u2014\u2014 \u66f4\u65b0\u540e\uff0c\u53ef\u6bd4\u8f83\u524d\u540e\u503c<\/li>\n<\/ul>\n\n\n\n<p><strong>\u5378\u8f7d\u9636\u6bb5\uff08Unmounting\uff09<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>componentWillUnmount()<\/code> \u2014\u2014 \u7ec4\u4ef6\u5378\u8f7d\u524d\uff0c\u6e05\u7406\u5b9a\u65f6\u5668\u3001\u53d6\u6d88\u8ba2\u9605<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">class<\/span><span style=\"color:#4EC9B0\"> LifecycleDemo<\/span><span style=\"color:#569CD6\"> extends<\/span><span style=\"color:#4EC9B0\"> Component<\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  componentDidMount<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'\u7ec4\u4ef6\u5df2\u6302\u8f7d'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">timer<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">setInterval<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#9CDCFE\"> console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'tick'<\/span><span style=\"color:#D4D4D4\">), <\/span><span style=\"color:#B5CEA8\">1000<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  componentDidUpdate<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prevProps<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    if<\/span><span style=\"color:#D4D4D4\"> (<\/span><span style=\"color:#569CD6\">this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\"> !== <\/span><span style=\"color:#9CDCFE\">prevProps<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'id \u53d8\u5316\uff0c\u91cd\u65b0\u8bf7\u6c42\u6570\u636e'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  componentWillUnmount<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'\u7ec4\u4ef6\u5373\u5c06\u5378\u8f7d'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    clearInterval<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#569CD6\">this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">timer<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  render<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">Lifecycle Demo<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd \u7c7b\u7ec4\u4ef6\u4e2d\uff0c\u4ee5\u4e0b\u54ea\u4e2a\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5728\u7ec4\u4ef6\u6302\u8f7d\u540e\u53ea\u6267\u884c\u4e00\u6b21\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. render<\/li>\n\n\n<li>B. componentDidUpdate<\/li>\n\n\n<li>C. componentDidMount<\/li>\n\n\n<li>D. componentWillUnmount<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd \u5173\u4e8e setState \u7684\u63cf\u8ff0\uff0c\u6b63\u786e\u7684\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. setState \u662f\u540c\u6b65\u6267\u884c\u7684<\/li>\n\n\n<li>B. setState \u4f1a\u7acb\u5373\u66f4\u65b0 this.state<\/li>\n\n\n<li>C. setState \u53ef\u80fd\u662f\u5f02\u6b65\u7684\uff0cReact \u4f1a\u6279\u91cf\u5904\u7406<\/li>\n\n\n<li>D. setState \u53ea\u80fd\u5728\u7c7b\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC\uff08setState \u662f\u5f02\u6b65\u7684\uff0cReact \u6279\u91cf\u5904\u7406\u4ee5\u4f18\u5316\u6027\u80fd\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd \u7c7b\u7ec4\u4ef6\u4e2d\u89e3\u51b3 this \u7ed1\u5b9a\u7684\u65b9\u5f0f\u4e0d\u5305\u62ec\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u6784\u9020\u51fd\u6570\u4e2d\u4f7f\u7528 bind<\/li>\n\n\n<li>B. \u4f7f\u7528\u7bad\u5934\u51fd\u6570\u5b9a\u4e49\u65b9\u6cd5<\/li>\n\n\n<li>C. \u5728 render \u4e2d\u4f7f\u7528 bind<\/li>\n\n\n<li>D. \u4f7f\u7528 useEffect \u7ed1\u5b9a<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aD\uff08useEffect \u662f\u51fd\u6570\u7ec4\u4ef6 Hook\uff0c\u7c7b\u7ec4\u4ef6\u4e2d\u4e0d\u5b58\u5728\uff09<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Props \u4e0e State<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Props \u7684\u4f7f\u7528<\/h3>\n\n\n\n<p>Props\uff08Properties\uff09\u662f\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\u7684\u53ea\u8bfb\u5a92\u4ecb\uff0c\u9075\u5faa<strong>\u5355\u5411\u6570\u636e\u6d41<\/strong>\u2014\u2014\u6570\u636e\u4ece\u7236\u5230\u5b50\u3002\u5b50\u7ec4\u4ef6\u4e0d\u80fd\u4fee\u6539 props\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u7236\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Parent<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> user<\/span><span style=\"color:#D4D4D4\"> = { <\/span><span style=\"color:#9CDCFE\">name:<\/span><span style=\"color:#CE9178\"> 'Alice'<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">age:<\/span><span style=\"color:#B5CEA8\"> 25<\/span><span style=\"color:#D4D4D4\"> };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#4EC9B0\">Child<\/span><span style=\"color:#9CDCFE\"> name<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">user<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#9CDCFE\"> age<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">user<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">age<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u5b50\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Child<\/span><span style=\"color:#D4D4D4\">({ <\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">age<\/span><span style=\"color:#D4D4D4\"> }) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#D4D4D4\"> is <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">age<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#D4D4D4\"> years old<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u5e26\u9ed8\u8ba4\u503c\u7684 Props<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">Child<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">defaultProps<\/span><span style=\"color:#D4D4D4\"> = {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  age:<\/span><span style=\"color:#B5CEA8\"> 18<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Props \u7c7b\u578b\u6821\u9a8c\uff08PropTypes\uff09<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#9CDCFE\"> PropTypes<\/span><span style=\"color:#C586C0\"> from<\/span><span style=\"color:#CE9178\"> 'prop-types'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> User<\/span><span style=\"color:#D4D4D4\">({ <\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">age<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">hobbies<\/span><span style=\"color:#D4D4D4\"> }) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#6A9955\"> \/* ... *\/<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">User<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">propTypes<\/span><span style=\"color:#D4D4D4\"> = {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  name:<\/span><span style=\"color:#9CDCFE\"> PropTypes<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">string<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">isRequired<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  age:<\/span><span style=\"color:#9CDCFE\"> PropTypes<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">number<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  hobbies:<\/span><span style=\"color:#9CDCFE\"> PropTypes<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">arrayOf<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">PropTypes<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">string<\/span><span style=\"color:#D4D4D4\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">State \u7684\u4f7f\u7528\u4e0e setState \u5f02\u6b65\u6027<\/h3>\n\n\n\n<p>State \u662f\u7ec4\u4ef6\u5185\u90e8\u7ba1\u7406\u7684\u53ef\u53d8\u6570\u636e\u3002\u5173\u952e\u70b9\uff1asetState \u662f\u5f02\u6b65\u7684\uff0c\u4f9d\u8d56\u5f53\u524d\u503c\u65f6\u5fc5\u987b\u7528\u51fd\u6570\u5f0f\u66f4\u65b0\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u7c7b\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">class<\/span><span style=\"color:#4EC9B0\"> MyComponent<\/span><span style=\"color:#569CD6\"> extends<\/span><span style=\"color:#4EC9B0\"> Component<\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  state<\/span><span style=\"color:#D4D4D4\"> = { <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#B5CEA8\"> 0<\/span><span style=\"color:#D4D4D4\"> };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  increment<\/span><span style=\"color:#D4D4D4\"> = () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#569CD6\"> this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">setState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> ({ <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\"> }));<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u51fd\u6570\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> MyComponent<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">count<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setCount<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#B5CEA8\">0<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#DCDCAA\"> increment<\/span><span style=\"color:#D4D4D4\"> = () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> setCount<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u9519\u8bef\u7528\u6cd5\uff08\u53ef\u80fd\u5f97\u5230\u8fc7\u671f\u503c\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">setState<\/span><span style=\"color:#D4D4D4\">({ <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#569CD6\"> this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u6b63\u786e\u7528\u6cd5\uff08\u51fd\u6570\u5f62\u5f0f\u83b7\u53d6\u6700\u65b0 state\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">setState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> ({ <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\"> }));<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">setCount<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd \u5173\u4e8e Props \u7684\u8bf4\u6cd5\uff0c\u54ea\u9879\u662f\u6b63\u786e\u7684\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u5b50\u7ec4\u4ef6\u53ef\u4ee5\u76f4\u63a5\u4fee\u6539\u7236\u7ec4\u4ef6\u4f20\u5165\u7684 props<\/li>\n\n\n<li>B. Props \u53ea\u80fd\u5728\u7c7b\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/li>\n\n\n<li>C. Props \u662f\u53ea\u8bfb\u7684\uff0c\u7528\u4e8e\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e<\/li>\n\n\n<li>D. Props \u548c State \u5b8c\u5168\u4e00\u6837<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC\uff08Props \u662f\u53ea\u8bfb\u7684\uff0c\u9075\u5faa\u5355\u5411\u6570\u636e\u6d41\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd \u8fde\u7eed\u8c03\u7528\u4e24\u6b21 setState\uff0c\u4ee5\u4e0b\u5199\u6cd5\u6b63\u786e\u7684\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. this.setState({count: this.state.count + 1}); this.setState({count: this.state.count + 1});<\/li>\n\n\n<li>B. this.setState(prev => ({count: prev.count + 1})); this.setState(prev => ({count: prev.count + 1}));<\/li>\n\n\n<li>C. this.state.count += 2;<\/li>\n\n\n<li>D. setState \u4e0d\u80fd\u8fde\u7eed\u8c03\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08\u51fd\u6570\u5f0f\u66f4\u65b0\u80fd\u83b7\u53d6\u6700\u65b0 state\uff0c\u4e24\u6b21\u90fd\u4f1a\u57fa\u4e8e\u6700\u65b0\u503c +1\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd PropTypes \u7684\u4f5c\u7528\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u63d0\u9ad8\u7ec4\u4ef6\u6e32\u67d3\u6027\u80fd<\/li>\n\n\n<li>B. \u5bf9\u7ec4\u4ef6\u63a5\u6536\u7684 props \u8fdb\u884c\u7c7b\u578b\u68c0\u67e5<\/li>\n\n\n<li>C. \u81ea\u52a8\u751f\u6210\u6587\u6863<\/li>\n\n\n<li>D. \u66ff\u6362 TypeScript<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08PropTypes \u5728\u5f00\u53d1\u73af\u5883\u4e0b\u5bf9 props \u8fdb\u884c\u8fd0\u884c\u65f6\u7c7b\u578b\u68c0\u67e5\u5e76\u8f93\u51fa\u8b66\u544a\uff09<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">React Refs \u4e0e\u4e8b\u4ef6\u5904\u7406<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Refs<\/h3>\n\n\n\n<p>Refs \u63d0\u4f9b\u4e86\u4e00\u79cd\u76f4\u63a5\u8bbf\u95ee DOM \u8282\u70b9\u6216 React \u5143\u7d20\u5b9e\u4f8b\u7684\u65b9\u5f0f\u3002<strong>\u4f7f\u7528\u573a\u666f<\/strong>\uff1a\u7ba1\u7406\u7126\u70b9\u3001\u6587\u672c\u9009\u62e9\u3001\u89e6\u53d1\u52a8\u753b\u3001\u96c6\u6210\u7b2c\u4e09\u65b9 DOM \u5e93\u3002\u5c3d\u91cf\u907f\u514d\u8fc7\u5ea6\u4f7f\u7528 Refs\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">useRef<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useEffect<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'react'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> TextInput<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> inputRef<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useRef<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#569CD6\">null<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  useEffect<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    inputRef<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">current<\/span><span style=\"color:#D4D4D4\">?.<\/span><span style=\"color:#DCDCAA\">focus<\/span><span style=\"color:#D4D4D4\">();  <\/span><span style=\"color:#6A9955\">\/\/ \u81ea\u52a8\u805a\u7126<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">input<\/span><span style=\"color:#9CDCFE\"> ref<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">inputRef<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#9CDCFE\"> type<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"text\"<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#9CDCFE\"> inputRef<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">current<\/span><span style=\"color:#D4D4D4\">?.<\/span><span style=\"color:#DCDCAA\">focus<\/span><span style=\"color:#D4D4D4\">()<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">        \u805a\u7126\u8f93\u5165\u6846<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>\u7c7b\u7ec4\u4ef6\u4e2d\u4f7f\u7528 createRef\uff1a<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">class<\/span><span style=\"color:#4EC9B0\"> MyComponent<\/span><span style=\"color:#569CD6\"> extends<\/span><span style=\"color:#4EC9B0\"> Component<\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  constructor<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    super<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">props<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">inputRef<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#9CDCFE\">React<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">createRef<\/span><span style=\"color:#D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  componentDidMount<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">inputRef<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">current<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">focus<\/span><span style=\"color:#D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  render<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">input<\/span><span style=\"color:#9CDCFE\"> ref<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{this<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">inputRef<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">React \u4e8b\u4ef6\u5904\u7406<\/h3>\n\n\n\n<p>React \u4f7f\u7528<strong>\u5408\u6210\u4e8b\u4ef6\uff08SyntheticEvent\uff09<\/strong>\uff0c\u662f\u5bf9\u6d4f\u89c8\u5668\u539f\u751f\u4e8b\u4ef6\u7684\u8de8\u6d4f\u89c8\u5668\u5305\u88c5\u3002\u4e8b\u4ef6\u59d4\u6258\u5230\u6839\u8282\u70b9\uff0c\u901a\u8fc7\u4e8b\u4ef6\u5192\u6ce1\u5904\u7406\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Form<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#DCDCAA\"> handleSubmit<\/span><span style=\"color:#D4D4D4\"> = (<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    e<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">preventDefault<\/span><span style=\"color:#D4D4D4\">();  <\/span><span style=\"color:#6A9955\">\/\/ \u963b\u6b62\u9ed8\u8ba4\u63d0\u4ea4<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'\u8868\u5355\u63d0\u4ea4'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">form<\/span><span style=\"color:#9CDCFE\"> onSubmit<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">handleSubmit<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">input<\/span><span style=\"color:#9CDCFE\"> onChange<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#9CDCFE\"> console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">target<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">value<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> type<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"submit\"<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u63d0\u4ea4<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">form<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd React \u4e2d\u4f7f\u7528 Refs \u7684\u5e38\u89c1\u573a\u666f\u4e0d\u5305\u62ec\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u7ba1\u7406\u7126\u70b9<\/li>\n\n\n<li>B. \u89e6\u53d1\u52a8\u753b<\/li>\n\n\n<li>C. \u66ff\u4ee3 state \u7ba1\u7406\u6570\u636e<\/li>\n\n\n<li>D. \u96c6\u6210\u7b2c\u4e09\u65b9 DOM \u5e93<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC\uff08Refs \u4e0d\u5e94\u66ff\u4ee3 state\/props \u6765\u7ba1\u7406\u6570\u636e\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd React \u7684\u5408\u6210\u4e8b\u4ef6\uff08SyntheticEvent\uff09\u63cf\u8ff0\u6b63\u786e\u7684\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u5408\u6210\u4e8b\u4ef6\u4e0e\u539f\u751f\u4e8b\u4ef6\u5b8c\u5168\u65e0\u5173<\/li>\n\n\n<li>B. \u5408\u6210\u4e8b\u4ef6\u76f4\u63a5\u7ed1\u5b9a\u5728\u6bcf\u4e2a DOM \u5143\u7d20\u4e0a<\/li>\n\n\n<li>C. \u5408\u6210\u4e8b\u4ef6\u662f\u539f\u751f\u4e8b\u4ef6\u7684\u8de8\u6d4f\u89c8\u5668\u5305\u88c5\uff0c\u901a\u8fc7\u4e8b\u4ef6\u59d4\u6258\u5b9e\u73b0<\/li>\n\n\n<li>D. \u5408\u6210\u4e8b\u4ef6\u4e0d\u80fd\u8c03\u7528 preventDefault<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC\uff08\u5408\u6210\u4e8b\u4ef6\u63d0\u4f9b\u4e0e\u539f\u751f\u4e8b\u4ef6\u4e00\u81f4\u7684 API\uff0c\u901a\u8fc7\u4e8b\u4ef6\u59d4\u6258\u4f18\u5316\u6027\u80fd\uff09<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">React \u7ec4\u4ef6\u901a\u4fe1<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u7236\u5b50\u7ec4\u4ef6\u901a\u4fe1<\/h3>\n\n\n\n<p><strong>\u7236 \u2192 \u5b50\uff08Props\uff09<\/strong>\uff1a\u7236\u7ec4\u4ef6\u901a\u8fc7 Props \u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\u3002<strong>\u5b50 \u2192 \u7236\uff08\u56de\u8c03\u51fd\u6570\uff09<\/strong>\uff1a\u7236\u7ec4\u4ef6\u5c06\u56de\u8c03\u51fd\u6570\u4f5c\u4e3a Props \u4f20\u7ed9\u5b50\u7ec4\u4ef6\uff0c\u5b50\u7ec4\u4ef6\u8c03\u7528\u56de\u8c03\u4f20\u56de\u6570\u636e\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u7236\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Parent<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">message<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setMessage<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">''<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#DCDCAA\"> handleChildData<\/span><span style=\"color:#D4D4D4\"> = (<\/span><span style=\"color:#9CDCFE\">data<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    setMessage<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">data<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#4EC9B0\">Child<\/span><span style=\"color:#9CDCFE\"> onSend<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">handleChildData<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u6765\u81ea\u5b50\u7ec4\u4ef6: <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">message<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u5b50\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Child<\/span><span style=\"color:#D4D4D4\">({ <\/span><span style=\"color:#9CDCFE\">onSend<\/span><span style=\"color:#D4D4D4\"> }) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> onSend<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'Hello from Child'<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">      \u53d1\u9001\u6d88\u606f\u7ed9\u7236\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u8de8\u7ec4\u4ef6\u901a\u4fe1\uff08Context\uff09<\/h3>\n\n\n\n<p>Context \u63d0\u4f9b\u4e86\u4e00\u79cd\u5728\u7ec4\u4ef6\u6811\u4e2d<strong>\u65e0\u9700\u9010\u5c42\u4f20\u9012 Props<\/strong>\u5c31\u80fd\u5171\u4eab\u6570\u636e\u7684\u65b9\u5f0f\u3002\u9002\u7528\u4e8e\u5168\u5c40\u6570\u636e\uff08\u4e3b\u9898\u3001\u8bed\u8a00\u3001\u7528\u6237\u8ba4\u8bc1\u7b49\uff09\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">createContext<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useContext<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useState<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'react'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 1. \u521b\u5efa Context<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> ThemeContext<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">createContext<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'light'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 2. Provider \u63d0\u4f9b\u6570\u636e<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> App<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">theme<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setTheme<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'light'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#4EC9B0\">ThemeContext.Provider<\/span><span style=\"color:#9CDCFE\"> value<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">{ <\/span><span style=\"color:#9CDCFE\">theme<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">setTheme<\/span><span style=\"color:#D4D4D4\"> }<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#4EC9B0\">Toolbar<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#4EC9B0\">ThemeContext.Provider<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 3. \u4e2d\u95f4\u7ec4\u4ef6\u65e0\u9700\u4f20\u9012 props<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Toolbar<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#4EC9B0\">ThemedButton<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 4. useContext \u6d88\u8d39\u6570\u636e<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> ThemedButton<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#4FC1FF\">theme<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setTheme<\/span><span style=\"color:#D4D4D4\"> } = <\/span><span style=\"color:#DCDCAA\">useContext<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">ThemeContext<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      style<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">{ <\/span><span style=\"color:#9CDCFE\">background:<\/span><span style=\"color:#9CDCFE\"> theme<\/span><span style=\"color:#D4D4D4\"> === <\/span><span style=\"color:#CE9178\">'dark'<\/span><span style=\"color:#D4D4D4\"> ? <\/span><span style=\"color:#CE9178\">'#333'<\/span><span style=\"color:#D4D4D4\"> : <\/span><span style=\"color:#CE9178\">'#fff'<\/span><span style=\"color:#D4D4D4\"> }<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> setTheme<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">theme<\/span><span style=\"color:#D4D4D4\"> === <\/span><span style=\"color:#CE9178\">'dark'<\/span><span style=\"color:#D4D4D4\"> ? <\/span><span style=\"color:#CE9178\">'light'<\/span><span style=\"color:#D4D4D4\"> : <\/span><span style=\"color:#CE9178\">'dark'<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    ><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">      \u5f53\u524d\u4e3b\u9898: <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">theme<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd React \u4e2d\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\u7684\u6b63\u786e\u65b9\u5f0f\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u5b50\u7ec4\u4ef6\u76f4\u63a5\u4fee\u6539\u7236\u7ec4\u4ef6\u7684 state<\/li>\n\n\n<li>B. \u901a\u8fc7\u56de\u8c03\u51fd\u6570\uff08\u7236\u7ec4\u4ef6\u5c06\u51fd\u6570\u4f5c\u4e3a props \u4f20\u7ed9\u5b50\u7ec4\u4ef6\uff09<\/li>\n\n\n<li>C. \u4f7f\u7528\u5168\u5c40\u53d8\u91cf<\/li>\n\n\n<li>D. \u5b50\u7ec4\u4ef6\u4e0d\u80fd\u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u6570\u636e<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd \u4ee5\u4e0b\u5173\u4e8e Context \u7684\u63cf\u8ff0\uff0c\u9519\u8bef\u7684\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. Context \u53ef\u4ee5\u907f\u514d props \u9010\u5c42\u4f20\u9012<\/li>\n\n\n<li>B. Context \u9002\u7528\u4e8e\u4e3b\u9898\u3001\u8bed\u8a00\u7b49\u5168\u5c40\u6570\u636e<\/li>\n\n\n<li>C. Context.Provider \u53ef\u4ee5\u5d4c\u5957\u4f7f\u7528<\/li>\n\n\n<li>D. Context \u53ea\u80fd\u4f20\u9012\u5b57\u7b26\u4e32\u7c7b\u578b\u7684\u6570\u636e<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aD\uff08Context \u53ef\u4ee5\u4f20\u9012\u4efb\u610f\u7c7b\u578b\u7684\u503c\uff0c\u5305\u62ec\u5bf9\u8c61\u3001\u51fd\u6570\u7b49\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd \u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u6d88\u8d39 Context \u503c\uff0c\u5e94\u4f7f\u7528\u54ea\u4e2a Hook\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. useState<\/li>\n\n\n<li>B. useEffect<\/li>\n\n\n<li>C. useContext<\/li>\n\n\n<li>D. useReducer<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">React Router<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">SPA \u7684\u7406\u89e3<\/h3>\n\n\n\n<p>SPA\uff08Single Page Application\uff0c\u5355\u9875\u5e94\u7528\uff09\u662f\u4e00\u79cd Web \u5e94\u7528\u67b6\u6784\uff0c\u6574\u4e2a\u5e94\u7528\u53ea\u6709\u4e00\u4e2a HTML \u9875\u9762\u3002\u9875\u9762\u5207\u6362\u901a\u8fc7 JavaScript \u52a8\u6001\u66ff\u6362\u5185\u5bb9\uff0c\u65e0\u9700\u5b8c\u6574\u5237\u65b0\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u4f18\u70b9<\/strong>\uff1a\u7528\u6237\u4f53\u9a8c\u6d41\u7545\u3001\u9875\u9762\u5207\u6362\u5feb\u3001\u524d\u540e\u7aef\u5206\u79bb\u3001\u51cf\u5c11\u670d\u52a1\u5668\u538b\u529b<\/li>\n\n\n<li><strong>\u7f3a\u70b9<\/strong>\uff1a\u9996\u5c4f\u52a0\u8f7d\u8f83\u6162\u3001SEO \u4e0d\u53cb\u597d\uff08\u9700 SSR \u89e3\u51b3\uff09\u3001\u9700\u8981\u524d\u7aef\u8def\u7531\u7ba1\u7406<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u8def\u7531\u7684\u4e24\u79cd\u6a21\u5f0f<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hash \u6a21\u5f0f<\/strong>\uff1aURL \u4e2d\u5e26 <code>#<\/code>\uff0c\u901a\u8fc7 hashchange \u4e8b\u4ef6\u76d1\u542c\u3002\u517c\u5bb9\u6027\u597d\uff0c\u4e0d\u9700\u8981\u670d\u52a1\u5668\u914d\u7f6e\u3002<\/li>\n\n\n<li><strong>History \u6a21\u5f0f<\/strong>\uff1aURL \u5e72\u51c0\uff0c\u901a\u8fc7 HTML5 History API\uff08pushState\u3001popState\uff09\u5b9e\u73b0\u3002\u9700\u8981\u670d\u52a1\u5668\u914d\u7f6e fallback \u5230 index.html\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">react-router-dom \u7684\u4f7f\u7528<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">BrowserRouter<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">Routes<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">Route<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">Link<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  useParams<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useNavigate<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'react-router-dom'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> App<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#4EC9B0\">BrowserRouter<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">nav<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#4EC9B0\">Link<\/span><span style=\"color:#9CDCFE\"> to<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"\/\"<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u9996\u9875<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#4EC9B0\">Link<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#4EC9B0\">Link<\/span><span style=\"color:#9CDCFE\"> to<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"\/about\"<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u5173\u4e8e<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#4EC9B0\">Link<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#4EC9B0\">Link<\/span><span style=\"color:#9CDCFE\"> to<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"\/user\/123\"<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u7528\u6237123<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#4EC9B0\">Link<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#569CD6\">nav<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#4EC9B0\">Routes<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#4EC9B0\">Route<\/span><span style=\"color:#9CDCFE\"> path<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"\/\"<\/span><span style=\"color:#9CDCFE\"> element<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#808080\">&#x3C;<\/span><span style=\"color:#4EC9B0\">Home<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#4EC9B0\">Route<\/span><span style=\"color:#9CDCFE\"> path<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"\/about\"<\/span><span style=\"color:#9CDCFE\"> element<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#808080\">&#x3C;<\/span><span style=\"color:#4EC9B0\">About<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#4EC9B0\">Route<\/span><span style=\"color:#9CDCFE\"> path<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"\/user\/:id\"<\/span><span style=\"color:#9CDCFE\"> element<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#808080\">&#x3C;<\/span><span style=\"color:#4EC9B0\">UserPage<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#4EC9B0\">Route<\/span><span style=\"color:#9CDCFE\"> path<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"*\"<\/span><span style=\"color:#9CDCFE\"> element<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#808080\">&#x3C;<\/span><span style=\"color:#4EC9B0\">NotFound<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#4EC9B0\">Routes<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#4EC9B0\">BrowserRouter<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u83b7\u53d6\u8def\u7531\u53c2\u6570<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> UserPage<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#4FC1FF\">id<\/span><span style=\"color:#D4D4D4\"> } = <\/span><span style=\"color:#DCDCAA\">useParams<\/span><span style=\"color:#D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u7528\u6237 ID: <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u7f16\u7a0b\u5f0f\u5bfc\u822a<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Home<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> navigate<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useNavigate<\/span><span style=\"color:#D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> navigate<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'\/about'<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">        \u8df3\u8f6c\u5230\u5173\u4e8e\u9875<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd SPA \u7684\u4f18\u70b9\u4e0d\u5305\u62ec\u4ee5\u4e0b\u54ea\u9879\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u7528\u6237\u4f53\u9a8c\u6d41\u7545<\/li>\n\n\n<li>B. \u9996\u5c4f\u52a0\u8f7d\u5feb<\/li>\n\n\n<li>C. \u524d\u540e\u7aef\u5206\u79bb<\/li>\n\n\n<li>D. \u9875\u9762\u5207\u6362\u5feb<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08SPA \u9996\u5c4f\u52a0\u8f7d\u901a\u5e38\u8f83\u6162\uff0c\u9700\u8981\u52a0\u8f7d\u6574\u4e2a\u5e94\u7528\u6846\u67b6\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd React Router \u4e2d\u83b7\u53d6\u52a8\u6001\u8def\u7531\u53c2\u6570 \/user\/:id \u4e2d\u7684 id\uff0c\u5e94\u4f7f\u7528\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. useNavigate<\/li>\n\n\n<li>B. useLocation<\/li>\n\n\n<li>C. useParams<\/li>\n\n\n<li>D. useRoute<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aC<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd History \u6a21\u5f0f\u4e0e Hash \u6a21\u5f0f\u7684\u4e3b\u8981\u533a\u522b\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. Hash \u6a21\u5f0f\u6027\u80fd\u66f4\u597d<\/li>\n\n\n<li>B. History \u6a21\u5f0f URL \u4e2d\u6ca1\u6709 # \u53f7\uff0c\u9700\u8981\u670d\u52a1\u5668\u914d\u7f6e<\/li>\n\n\n<li>C. Hash \u6a21\u5f0f\u4e0d\u652f\u6301\u52a8\u6001\u8def\u7531<\/li>\n\n\n<li>D. History \u6a21\u5f0f\u53ea\u80fd\u7528\u4e8e React<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08History \u6a21\u5f0f URL \u66f4\u5e72\u51c0\uff0c\u4f46\u5237\u65b0\u65f6\u4f1a\u5411\u670d\u52a1\u5668\u8bf7\u6c42\u8be5\u8def\u5f84\uff0c\u9700\u914d\u7f6e fallback\uff09<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">React Hooks<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Hooks \u7684\u7406\u89e3\u53ca\u51fa\u73b0\u539f\u56e0<\/h3>\n\n\n\n<p>Hooks \u662f React 16.8 \u5f15\u5165\u7684\u7279\u6027\uff0c\u5141\u8bb8\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u72b6\u6001\u548c\u5176\u4ed6 React \u7279\u6027\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u7ec4\u4ef6\u95f4\u590d\u7528\u72b6\u6001\u903b\u8f91\u56f0\u96be<\/strong>\uff1aHOC \u548c render props \u4f1a\u5bfc\u81f4&#8221;\u5d4c\u5957\u5730\u72f1&#8221;\u3002Hooks \u4ece\u7ec4\u4ef6\u4e2d\u63d0\u53d6\u903b\u8f91\uff0c\u4fbf\u4e8e\u590d\u7528\u3002<\/li>\n\n\n<li><strong>\u590d\u6742\u7ec4\u4ef6\u96be\u4ee5\u7406\u89e3<\/strong>\uff1a\u7c7b\u7ec4\u4ef6\u4e2d\u751f\u547d\u5468\u671f\u65b9\u6cd5\u5305\u542b\u4e0d\u76f8\u5173\u7684\u903b\u8f91\uff0cHooks \u5c06\u903b\u8f91\u6309\u529f\u80fd\u62c6\u5206\u3002<\/li>\n\n\n<li><strong>this \u7684\u56f0\u6270<\/strong>\uff1a\u7c7b\u7ec4\u4ef6\u9700\u8981\u7ed1\u5b9a this\u3002\u51fd\u6570\u7ec4\u4ef6\u65e0 this \u95ee\u9898\u3002<\/li>\n<\/ol>\n\n\n\n<p><strong>Hooks \u4f7f\u7528\u89c4\u5219\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53ea\u80fd\u5728\u51fd\u6570\u7ec4\u4ef6\u7684<strong>\u9876\u5c42<\/strong>\u8c03\u7528\uff0c\u4e0d\u80fd\u5728\u5faa\u73af\u3001\u6761\u4ef6\u6216\u5d4c\u5957\u51fd\u6570\u4e2d\u8c03\u7528<\/li>\n\n\n<li>\u53ea\u80fd\u5728 React \u51fd\u6570\u7ec4\u4ef6\u6216\u81ea\u5b9a\u4e49 Hook \u4e2d\u8c03\u7528<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">useState \u2014 \u7ba1\u7406\u72b6\u6001<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">state<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setState<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">initialValue<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u57fa\u672c\u4f7f\u7528<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">name<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setName<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">''<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u51fd\u6570\u5f0f\u66f4\u65b0\uff08\u4f9d\u8d56\u524d\u4e00\u4e2a\u72b6\u6001\u65f6\u63a8\u8350\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">count<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setCount<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#B5CEA8\">0<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">setCount<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u60f0\u6027\u521d\u59cb\u5316<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">data<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setData<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> expensiveComputation<\/span><span style=\"color:#D4D4D4\">());<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">useEffect \u2014 \u5904\u7406\u526f\u4f5c\u7528<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#DCDCAA\">useEffect<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ \u526f\u4f5c\u7528\u903b\u8f91<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">    \/\/ \u6e05\u7406\u51fd\u6570\uff08\u53ef\u9009\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}, [<\/span><span style=\"color:#9CDCFE\">\u4f9d\u8d56\u6570\u7ec4<\/span><span style=\"color:#D4D4D4\">]);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u6570\u636e\u8bf7\u6c42\uff08\u4ec5\u5728\u6302\u8f7d\u65f6\u6267\u884c\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">useEffect<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  fetch<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'\/api\/user'<\/span><span style=\"color:#D4D4D4\">).<\/span><span style=\"color:#DCDCAA\">then<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">res<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> res<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">json<\/span><span style=\"color:#D4D4D4\">()).<\/span><span style=\"color:#DCDCAA\">then<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">setUser<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}, []); <\/span><span style=\"color:#6A9955\">\/\/ \u7a7a\u6570\u7ec4<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u8ba2\u9605\u4e0e\u6e05\u7406<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">useEffect<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> subscription<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#9CDCFE\">api<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">subscribe<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#9CDCFE\"> subscription<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">unsubscribe<\/span><span style=\"color:#D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}, [<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\">]);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">useCallback \u2014 \u7f13\u5b58\u51fd\u6570\u5f15\u7528<\/h3>\n\n\n\n<p>\u907f\u514d\u5b50\u7ec4\u4ef6\u4e0d\u5fc5\u8981\u7684\u91cd\u65b0\u6e32\u67d3\uff0c\u8fd4\u56de\u7f13\u5b58\u7684\u51fd\u6570\u3002\u914d\u5408 React.memo \u4f7f\u7528\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> memoizedCallback<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useCallback<\/span><span style=\"color:#D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> doSomething<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">a<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">b<\/span><span style=\"color:#D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  [<\/span><span style=\"color:#9CDCFE\">a<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">b<\/span><span style=\"color:#D4D4D4\">],<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u5178\u578b\u573a\u666f\uff1a\u914d\u5408 React.memo \u907f\u514d\u5b50\u7ec4\u4ef6\u91cd\u6e32\u67d3<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Parent<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">count<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setCount<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#B5CEA8\">0<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> handleClick<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useCallback<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    setCount<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }, []); <\/span><span style=\"color:#6A9955\">\/\/ \u6c38\u8fdc\u4e0d\u53d8\u7684\u51fd\u6570\u5f15\u7528<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#4EC9B0\">Child<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">handleClick<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> Child<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#9CDCFE\">React<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">memo<\/span><span style=\"color:#D4D4D4\">(({ <\/span><span style=\"color:#9CDCFE\">onClick<\/span><span style=\"color:#D4D4D4\"> }) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'Child \u6e32\u67d3'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">onClick<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">Click<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">useMemo \u2014 \u7f13\u5b58\u8ba1\u7b97\u7ed3\u679c<\/h3>\n\n\n\n<p>\u4ec5\u5728\u4f9d\u8d56\u53d8\u5316\u65f6\u91cd\u65b0\u8ba1\u7b97\uff0c\u8fd4\u56de\u7f13\u5b58\u7684\u503c\u3002\u9002\u7528\u4e8e\u6602\u8d35\u7684\u8ba1\u7b97\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> memoizedValue<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useMemo<\/span><span style=\"color:#D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> expensiveComputation<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">deps<\/span><span style=\"color:#D4D4D4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  [<\/span><span style=\"color:#9CDCFE\">deps<\/span><span style=\"color:#D4D4D4\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u793a\u4f8b\uff1a\u8fc7\u6ee4\u5217\u8868<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">users<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setUsers<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">([]);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">query<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setQuery<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">''<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> filteredUsers<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useMemo<\/span><span style=\"color:#D4D4D4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#9CDCFE\"> users<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">filter<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">u<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> u<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">name<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">includes<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">query<\/span><span style=\"color:#D4D4D4\">)),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  [<\/span><span style=\"color:#9CDCFE\">users<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">query<\/span><span style=\"color:#D4D4D4\">]<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">useRef \u2014 \u53ef\u53d8\u5f15\u7528<\/h3>\n\n\n\n<p>\u5e38\u7528\u4e8e\u8bbf\u95ee DOM \u548c\u4fdd\u5b58\u4e0d\u89e6\u53d1\u91cd\u65b0\u6e32\u67d3\u7684\u53ef\u53d8\u503c\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u8bbf\u95ee DOM<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> TextInput<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> inputRef<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useRef<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#569CD6\">null<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  useEffect<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#9CDCFE\"> inputRef<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">current<\/span><span style=\"color:#D4D4D4\">?.<\/span><span style=\"color:#DCDCAA\">focus<\/span><span style=\"color:#D4D4D4\">(), []);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">input<\/span><span style=\"color:#9CDCFE\"> ref<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">inputRef<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u4fdd\u5b58\u53ef\u53d8\u503c\uff08\u4e0d\u89e6\u53d1\u91cd\u6e32\u67d3\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Timer<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> intervalRef<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useRef<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#569CD6\">null<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">count<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setCount<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#B5CEA8\">0<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#DCDCAA\"> start<\/span><span style=\"color:#D4D4D4\"> = () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    intervalRef<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">current<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">setInterval<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">      setCount<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    }, <\/span><span style=\"color:#B5CEA8\">1000<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#DCDCAA\"> stop<\/span><span style=\"color:#D4D4D4\"> = () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> clearInterval<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">intervalRef<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">current<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#6A9955\"> \/* ... *\/<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">useContext \u2014 \u6d88\u8d39 Context<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> ThemeContext<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">createContext<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'light'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> ThemedButton<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> theme<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useContext<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">ThemeContext<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">theme<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u6309\u94ae<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">useReducer \u2014 \u590d\u6742\u72b6\u6001\u7ba1\u7406<\/h3>\n\n\n\n<p>useState \u7684\u66ff\u4ee3\u65b9\u6848\uff0c\u9002\u5408\u7ba1\u7406\u590d\u6742\u7684\u3001\u4e0b\u4e00\u4e2a\u72b6\u6001\u4f9d\u8d56\u524d\u4e00\u4e2a\u72b6\u6001\u7684\u72b6\u6001\u903b\u8f91\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">state<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">dispatch<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useReducer<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">reducer<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">initialState<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> counterReducer<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">action<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  switch<\/span><span style=\"color:#D4D4D4\"> (<\/span><span style=\"color:#9CDCFE\">action<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">type<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    case<\/span><span style=\"color:#CE9178\"> 'increment'<\/span><span style=\"color:#D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">      return<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#9CDCFE\"> state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\"> };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    case<\/span><span style=\"color:#CE9178\"> 'decrement'<\/span><span style=\"color:#D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">      return<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#9CDCFE\"> state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\"> - <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\"> };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    case<\/span><span style=\"color:#CE9178\"> 'reset'<\/span><span style=\"color:#D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">      return<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#9CDCFE\"> action<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">payload<\/span><span style=\"color:#D4D4D4\"> };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    default<\/span><span style=\"color:#D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">      throw<\/span><span style=\"color:#569CD6\"> new<\/span><span style=\"color:#DCDCAA\"> Error<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'Unknown action type'<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u4f7f\u7528<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">state<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">dispatch<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useReducer<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">counterReducer<\/span><span style=\"color:#D4D4D4\">, { <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#B5CEA8\"> 0<\/span><span style=\"color:#D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">dispatch<\/span><span style=\"color:#D4D4D4\">({ <\/span><span style=\"color:#9CDCFE\">type:<\/span><span style=\"color:#CE9178\"> 'increment'<\/span><span style=\"color:#D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">dispatch<\/span><span style=\"color:#D4D4D4\">({ <\/span><span style=\"color:#9CDCFE\">type:<\/span><span style=\"color:#CE9178\"> 'reset'<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">payload:<\/span><span style=\"color:#B5CEA8\"> 10<\/span><span style=\"color:#D4D4D4\"> });<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd \u4ee5\u4e0b\u5173\u4e8e Hooks \u4f7f\u7528\u89c4\u5219\u7684\u8bf4\u6cd5\uff0c\u6b63\u786e\u7684\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u53ef\u4ee5\u5728\u5faa\u73af\u4e2d\u8c03\u7528 useState<\/li>\n\n\n<li>B. Hooks \u53ea\u80fd\u5728\u51fd\u6570\u7ec4\u4ef6\u9876\u5c42\u8c03\u7528<\/li>\n\n\n<li>C. \u53ef\u4ee5\u5728\u6761\u4ef6\u8bed\u53e5\u4e2d\u4f7f\u7528 useEffect<\/li>\n\n\n<li>D. \u666e\u901a JavaScript \u51fd\u6570\u4e2d\u53ef\u4ee5\u8c03\u7528 Hooks<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd useCallback \u548c useMemo \u7684\u4e3b\u8981\u533a\u522b\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. useCallback \u7f13\u5b58\u51fd\u6570\uff0cuseMemo \u7f13\u5b58\u8ba1\u7b97\u7ed3\u679c<\/li>\n\n\n<li>B. useCallback \u7f13\u5b58\u8ba1\u7b97\u7ed3\u679c\uff0cuseMemo \u7f13\u5b58\u51fd\u6570<\/li>\n\n\n<li>C. \u4e8c\u8005\u5b8c\u5168\u76f8\u540c<\/li>\n\n\n<li>D. useCallback \u53ea\u80fd\u5728\u7c7b\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aA<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd useRef \u521b\u5efa\u7684 ref \u5bf9\u8c61\uff0c\u4fee\u6539\u5176 current \u5c5e\u6027\u4f1a\u89e6\u53d1\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\u5417\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u4f1a<\/li>\n\n\n<li>B. \u4e0d\u4f1a<\/li>\n\n\n<li>C. \u53d6\u51b3\u4e8e\u503c\u662f\u5426\u6539\u53d8<\/li>\n\n\n<li>D. \u53ea\u5728\u7c7b\u7ec4\u4ef6\u4e2d\u4f1a<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08\u4fee\u6539 ref.current \u4e0d\u4f1a\u89e6\u53d1\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd useReducer \u76f8\u6bd4 useState \u66f4\u9002\u5408\u4ec0\u4e48\u573a\u666f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u7b80\u5355\u7684\u57fa\u7840\u7c7b\u578b\u72b6\u6001<\/li>\n\n\n<li>B. \u591a\u4e2a\u5b50\u503c\u3001\u72b6\u6001\u903b\u8f91\u590d\u6742\u7684\u573a\u666f<\/li>\n\n\n<li>C. \u6240\u6709\u573a\u666f\u90fd\u4e00\u6837<\/li>\n\n\n<li>D. \u53ea\u80fd\u5728 Redux \u4e2d\u4f7f\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Redux \u4e0e Recoil<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Redux<\/h3>\n\n\n\n<p>Redux \u662f JavaScript \u72b6\u6001\u7ba1\u7406\u5bb9\u5668\uff0c\u63d0\u4f9b<strong>\u53ef\u9884\u6d4b\u7684\u72b6\u6001\u7ba1\u7406<\/strong>\u3002\u9002\u7528\u4e8e\u5927\u578b\u5e94\u7528\u4e2d\u8de8\u7ec4\u4ef6\u5171\u4eab\u7684\u590d\u6742\u72b6\u6001\u3002<\/p>\n\n\n\n<p><strong>\u4e09\u5927\u539f\u5219\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5355\u4e00\u6570\u636e\u6e90<\/strong>\uff1a\u6574\u4e2a\u5e94\u7528\u7684 State \u5b58\u50a8\u5728\u552f\u4e00\u7684 Store \u4e2d\u3002<\/li>\n\n\n<li><strong>State \u53ea\u8bfb<\/strong>\uff1a\u552f\u4e00\u6539\u53d8 State \u7684\u65b9\u5f0f\u662f\u53d1\u8d77 Action\u3002<\/li>\n\n\n<li><strong>\u7eaf\u51fd\u6570\u6267\u884c\u4fee\u6539<\/strong>\uff1aReducer \u662f\u7eaf\u51fd\u6570\uff0c\u63a5\u6536\u65e7 State \u548c Action\uff0c\u8fd4\u56de\u65b0 State\u3002<\/li>\n<\/ol>\n\n\n\n<p><strong>\u6838\u5fc3\u6982\u5ff5\uff1a<\/strong>Store\uff08\u5b58\u50a8\u72b6\u6001\uff09\u3001Action\uff08\u63cf\u8ff0\u4e8b\u4ef6\uff09\u3001Reducer\uff08\u66f4\u65b0\u89c4\u5219\uff09\u3001Dispatch\uff08\u89e6\u53d1\u66f4\u65b0\uff09<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">createStore<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'redux'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 1. Action Types<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> INCREMENT<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#CE9178\">'INCREMENT'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 2. Action Creator<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#DCDCAA\"> increment<\/span><span style=\"color:#D4D4D4\"> = () <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> ({ <\/span><span style=\"color:#9CDCFE\">type:<\/span><span style=\"color:#4FC1FF\"> INCREMENT<\/span><span style=\"color:#D4D4D4\"> });<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 3. Reducer<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#DCDCAA\"> counterReducer<\/span><span style=\"color:#D4D4D4\"> = (<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\"> = { <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#B5CEA8\"> 0<\/span><span style=\"color:#D4D4D4\"> }, <\/span><span style=\"color:#9CDCFE\">action<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  switch<\/span><span style=\"color:#D4D4D4\"> (<\/span><span style=\"color:#9CDCFE\">action<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">type<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    case<\/span><span style=\"color:#4FC1FF\"> INCREMENT<\/span><span style=\"color:#D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">      return<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">count:<\/span><span style=\"color:#9CDCFE\"> state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#D4D4D4\"> + <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\"> };<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    default<\/span><span style=\"color:#D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">      return<\/span><span style=\"color:#9CDCFE\"> state<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 4. Store<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> store<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">createStore<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">counterReducer<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">store<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">subscribe<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#9CDCFE\"> console<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">log<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">store<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">getState<\/span><span style=\"color:#D4D4D4\">()));<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">store<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">dispatch<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#DCDCAA\">increment<\/span><span style=\"color:#D4D4D4\">());<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>React-Redux\uff08Redux Toolkit\uff09\uff1a<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">Provider<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useSelector<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useDispatch<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'react-redux'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">configureStore<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">createSlice<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> '@reduxjs\/toolkit'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> counterSlice<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">createSlice<\/span><span style=\"color:#D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  name:<\/span><span style=\"color:#CE9178\"> 'counter'<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  initialState:<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">value:<\/span><span style=\"color:#B5CEA8\"> 0<\/span><span style=\"color:#D4D4D4\"> },<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  reducers:<\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    increment<\/span><span style=\"color:#9CDCFE\">:<\/span><span style=\"color:#9CDCFE\"> state<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">value<\/span><span style=\"color:#D4D4D4\"> += <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\">; },<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    decrement<\/span><span style=\"color:#9CDCFE\">:<\/span><span style=\"color:#9CDCFE\"> state<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">value<\/span><span style=\"color:#D4D4D4\"> -= <\/span><span style=\"color:#B5CEA8\">1<\/span><span style=\"color:#D4D4D4\">; },<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    incrementByAmount<\/span><span style=\"color:#9CDCFE\">:<\/span><span style=\"color:#D4D4D4\"> (<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">action<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">value<\/span><span style=\"color:#D4D4D4\"> += <\/span><span style=\"color:#9CDCFE\">action<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">payload<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> store<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">configureStore<\/span><span style=\"color:#D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  reducer:<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">counter:<\/span><span style=\"color:#9CDCFE\"> counterSlice<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">reducer<\/span><span style=\"color:#D4D4D4\"> }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> Counter<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> count<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useSelector<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">state<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> state<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">counter<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">value<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> dispatch<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useDispatch<\/span><span style=\"color:#D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">span<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">span<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> dispatch<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">counterSlice<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">actions<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">increment<\/span><span style=\"color:#D4D4D4\">())<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">        +1<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u6839\u7ec4\u4ef6<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> App<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#4EC9B0\">Provider<\/span><span style=\"color:#9CDCFE\"> store<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">store<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#4EC9B0\">Counter<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#4EC9B0\">Provider<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Recoil<\/h3>\n\n\n\n<p>Recoil \u662f Facebook \u63a8\u51fa\u7684\u8f7b\u91cf\u7ea7\u72b6\u6001\u7ba1\u7406\u5e93\u3002\u6838\u5fc3\u6982\u5ff5\uff1a<strong>Atom<\/strong>\uff08\u72b6\u6001\u5355\u5143\uff09\u548c <strong>Selector<\/strong>\uff08\u6d3e\u751f\u72b6\u6001\uff09\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#D4D4D4\"> { <\/span><span style=\"color:#9CDCFE\">RecoilRoot<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">atom<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">selector<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  useRecoilState<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useRecoilValue<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'recoil'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 1. \u5b9a\u4e49 Atom<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> textState<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">atom<\/span><span style=\"color:#D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  key:<\/span><span style=\"color:#CE9178\"> 'textState'<\/span><span style=\"color:#D4D4D4\">,  <\/span><span style=\"color:#6A9955\">\/\/ \u5168\u5c40\u552f\u4e00 key<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  default:<\/span><span style=\"color:#CE9178\"> ''<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 2. \u5b9a\u4e49 Selector\uff08\u6d3e\u751f\u72b6\u6001\uff09<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">const<\/span><span style=\"color:#4FC1FF\"> charCountState<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">selector<\/span><span style=\"color:#D4D4D4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">  key:<\/span><span style=\"color:#CE9178\"> 'charCountState'<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">  get<\/span><span style=\"color:#9CDCFE\">:<\/span><span style=\"color:#D4D4D4\"> ({ <\/span><span style=\"color:#9CDCFE\">get<\/span><span style=\"color:#D4D4D4\"> }) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    const<\/span><span style=\"color:#4FC1FF\"> text<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">get<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">textState<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    return<\/span><span style=\"color:#9CDCFE\"> text<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">length<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ 3. \u4f7f\u7528<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> TextInput<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">text<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setText<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useRecoilState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">textState<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">input<\/span><span style=\"color:#9CDCFE\"> value<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">text<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      onChange<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> setText<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">target<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">value<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> CharCount<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> count<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useRecoilValue<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">charCountState<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#808080\"> &#x3C;<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u5b57\u7b26\u6570: <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">count<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> App<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#4EC9B0\">RecoilRoot<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#4EC9B0\">TextInput<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#4EC9B0\">CharCount<\/span><span style=\"color:#808080\"> \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#4EC9B0\">RecoilRoot<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u5ba2\u89c2\u9898\u7ec3\u4e60<\/h3>\n\n\n\n<p><strong>\ud83d\udcdd Redux \u4e09\u5927\u539f\u5219\u4e0d\u5305\u62ec\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u5355\u4e00\u6570\u636e\u6e90<\/li>\n\n\n<li>B. State \u53ea\u8bfb<\/li>\n\n\n<li>C. \u4f7f\u7528\u7eaf\u51fd\u6570\u6267\u884c\u4fee\u6539<\/li>\n\n\n<li>D. \u72b6\u6001\u5206\u6563\u7ba1\u7406<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aD\uff08Redux \u5f3a\u8c03\u5355\u4e00\u6570\u636e\u6e90\uff0c\u800c\u975e\u5206\u6563\u7ba1\u7406\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd Redux Toolkit \u4e2d createSlice \u7684\u4f5c\u7528\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. \u521b\u5efa React \u7ec4\u4ef6<\/li>\n\n\n<li>B. \u540c\u65f6\u751f\u6210 action creators \u548c reducer<\/li>\n\n\n<li>C. \u521b\u5efa\u8def\u7531\u914d\u7f6e<\/li>\n\n\n<li>D. \u521b\u5efa CSS \u6837\u5f0f<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08createSlice \u7b80\u5316\u4e86 Redux \u7684\u4f7f\u7528\uff0c\u81ea\u52a8\u751f\u6210 action \u548c reducer\uff09<\/strong><\/p>\n\n\n\n<p><strong>\ud83d\udcdd Recoil \u4e2d\uff0cAtom \u548c Selector \u7684\u5173\u7cfb\u662f\uff1f<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A. Selector \u662f Atom \u7684\u53e6\u4e00\u79cd\u5199\u6cd5<\/li>\n\n\n<li>B. Selector \u662f\u57fa\u4e8e Atom \u6216\u5176\u4ed6 Selector \u7684\u6d3e\u751f\u72b6\u6001<\/li>\n\n\n<li>C. Atom \u548c Selector \u4e92\u4e0d\u76f8\u5173<\/li>\n\n\n<li>D. Selector \u66ff\u4ee3 Atom<\/li>\n<\/ul>\n\n\n\n<p>\u2705 <strong>\u7b54\u6848\uff1aB\uff08Selector \u7c7b\u4f3c Vue \u7684 computed\uff0c\u662f\u6d3e\u751f\u72b6\u6001\uff09<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u603b\u7ed3<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>\u77e5\u8bc6\u70b9<\/th><th>\u6838\u5fc3\u8981\u70b9<\/th><\/tr><\/thead><tbody><tr><td>React \u6838\u5fc3\u6982\u5ff5<\/td><td>\u7ec4\u4ef6\u3001State\u3001Props\uff1b\u865a\u62df DOM\uff1bDiff \u7b97\u6cd5\uff08\u540c\u5c42\u6bd4\u8f83\u3001key\uff09<\/td><\/tr><tr><td>\u51fd\u6570\u7ec4\u4ef6<\/td><td>useState \u72b6\u6001\u3001useEffect \u751f\u547d\u5468\u671f\u3001\u4e8b\u4ef6\u9a7c\u5cf0\u7ed1\u5b9a\u3001\u65e0 this<\/td><\/tr><tr><td>\u7c7b\u7ec4\u4ef6<\/td><td>constructor\/render\/componentDidMount\/componentWillUnmount\uff1bthis \u7ed1\u5b9a\u95ee\u9898<\/td><\/tr><tr><td>\u7ec4\u4ef6\u901a\u4fe1<\/td><td>\u7236\u2192\u5b50 Props\uff1b\u5b50\u2192\u7236 \u56de\u8c03\u51fd\u6570\uff1b\u8de8\u7ec4\u4ef6 Context\uff08Provider + useContext\uff09<\/td><\/tr><tr><td>React Router<\/td><td>SPA \u6982\u5ff5\uff1bHash\/History \u6a21\u5f0f\uff1bRoutes\/Route\/Link\/useParams\/useNavigate<\/td><\/tr><tr><td>Hooks<\/td><td>useState\/useEffect\/useCallback\/useMemo\/useRef\/useContext\/useReducer<\/td><\/tr><tr><td>\u72b6\u6001\u7ba1\u7406<\/td><td>Redux\uff1aStore\/Action\/Reducer\/Dispatch\uff1bRecoil\uff1aAtom\/Selector<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e3b\u89c2\u9898\u5b9e\u6218\uff1a\u5b9e\u73b0\u4e00\u4e2a\u4efb\u52a1\u7ba1\u7406\u7ec4\u4ef6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u9898\u76ee\u8981\u6c42<\/h3>\n\n\n\n<p>\u8bf7\u4f7f\u7528 React + Hooks \u5b9e\u73b0\u4e00\u4e2a<strong>\u4efb\u52a1\u7ba1\u7406\uff08Todo List\uff09\u7ec4\u4ef6<\/strong>\uff0c\u6ee1\u8db3\u4ee5\u4e0b\u529f\u80fd\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5c55\u793a\u4efb\u52a1\u5217\u8868\uff0c\u6bcf\u6761\u4efb\u52a1\u5305\u542b\uff1a\u6807\u9898\u3001\u5b8c\u6210\u72b6\u6001\u3001\u521b\u5efa\u65f6\u95f4<\/li>\n\n\n<li>\u53ef\u4ee5<strong>\u6dfb\u52a0<\/strong>\u65b0\u4efb\u52a1\uff08\u8f93\u5165\u6846 + \u6dfb\u52a0\u6309\u94ae\uff0c\u56de\u8f66\u4e5f\u53ef\u6dfb\u52a0\uff09<\/li>\n\n\n<li>\u53ef\u4ee5<strong>\u5207\u6362<\/strong>\u4efb\u52a1\u7684\u5b8c\u6210\u72b6\u6001\uff08\u52fe\u9009\u590d\u9009\u6846\u6216\u70b9\u51fb\u6587\u5b57\uff09<\/li>\n\n\n<li>\u53ef\u4ee5<strong>\u5220\u9664<\/strong>\u5355\u4e2a\u4efb\u52a1<\/li>\n\n\n<li>\u5e95\u90e8\u663e\u793a\u7edf\u8ba1\uff1a<strong>\u603b\u8ba1 \/ \u5df2\u5b8c\u6210 \/ \u672a\u5b8c\u6210<\/strong> \u6570\u91cf<\/li>\n\n\n<li>\u652f\u6301\u6309\u5b8c\u6210\u72b6\u6001<strong>\u7b5b\u9009<\/strong>\uff1a\u5168\u90e8 \/ \u5df2\u5b8c\u6210 \/ \u672a\u5b8c\u6210<\/li>\n\n\n<li>\u7a7a\u5217\u8868\u65f6\u663e\u793a\u53cb\u597d\u7684\u7a7a\u72b6\u6001\u63d0\u793a<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u53c2\u8003\u7b54\u6848<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#C586C0\">import<\/span><span style=\"color:#9CDCFE\"> React<\/span><span style=\"color:#D4D4D4\">, { <\/span><span style=\"color:#9CDCFE\">useState<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useMemo<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">useCallback<\/span><span style=\"color:#D4D4D4\"> } <\/span><span style=\"color:#C586C0\">from<\/span><span style=\"color:#CE9178\"> 'react'<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ ========== \u7c7b\u578b\u5b9a\u4e49 ==========<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ \u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u8fd9\u4e9b\u53ef\u4ee5\u7528 TypeScript interface \u5b9a\u4e49<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ interface Todo {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/   id: number;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/   title: string;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/   completed: boolean;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/   createdAt: Date;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">\/\/ ========== TodoList \u7ec4\u4ef6 ==========<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">function<\/span><span style=\"color:#DCDCAA\"> TodoList<\/span><span style=\"color:#D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ ---------- \u72b6\u6001\u7ba1\u7406 ----------<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">todos<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setTodos<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">([]);           <\/span><span style=\"color:#6A9955\">\/\/ \u4efb\u52a1\u5217\u8868<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">inputValue<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setInputValue<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">''<\/span><span style=\"color:#D4D4D4\">);  <\/span><span style=\"color:#6A9955\">\/\/ \u8f93\u5165\u6846\u503c<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#4FC1FF\">filter<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#4FC1FF\">setFilter<\/span><span style=\"color:#D4D4D4\">] = <\/span><span style=\"color:#DCDCAA\">useState<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">'all'<\/span><span style=\"color:#D4D4D4\">);       <\/span><span style=\"color:#6A9955\">\/\/ \u7b5b\u9009\u6761\u4ef6: all | completed | active<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ ---------- \u6dfb\u52a0\u4efb\u52a1 ----------<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> addTodo<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useCallback<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">    \/\/ \u53bb\u9664\u9996\u5c3e\u7a7a\u683c\uff0c\u7a7a\u5185\u5bb9\u4e0d\u6dfb\u52a0<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    const<\/span><span style=\"color:#4FC1FF\"> trimmed<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#9CDCFE\">inputValue<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">trim<\/span><span style=\"color:#D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    if<\/span><span style=\"color:#D4D4D4\"> (!<\/span><span style=\"color:#9CDCFE\">trimmed<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#C586C0\">return<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">    \/\/ \u521b\u5efa\u65b0\u4efb\u52a1\u5bf9\u8c61<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">    const<\/span><span style=\"color:#4FC1FF\"> newTodo<\/span><span style=\"color:#D4D4D4\"> = {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      id:<\/span><span style=\"color:#9CDCFE\"> Date<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">now<\/span><span style=\"color:#D4D4D4\">(),                    <\/span><span style=\"color:#6A9955\">\/\/ \u4f7f\u7528\u65f6\u95f4\u6233\u4f5c\u4e3a\u552f\u4e00 ID<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      title:<\/span><span style=\"color:#9CDCFE\"> trimmed<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      completed:<\/span><span style=\"color:#569CD6\"> false<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      createdAt:<\/span><span style=\"color:#569CD6\"> new<\/span><span style=\"color:#DCDCAA\"> Date<\/span><span style=\"color:#D4D4D4\">().<\/span><span style=\"color:#DCDCAA\">toLocaleString<\/span><span style=\"color:#D4D4D4\">(),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    };<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">    \/\/ \u51fd\u6570\u5f0f\u66f4\u65b0\uff1a\u57fa\u4e8e\u524d\u4e00\u4e2a\u72b6\u6001\u8ffd\u52a0<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    setTodos<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> [<\/span><span style=\"color:#9CDCFE\">newTodo<\/span><span style=\"color:#D4D4D4\">, ...<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#D4D4D4\">]); <\/span><span style=\"color:#6A9955\">\/\/ \u65b0\u4efb\u52a1\u6dfb\u52a0\u5230\u5217\u8868\u9876\u90e8<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    setInputValue<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#CE9178\">''<\/span><span style=\"color:#D4D4D4\">);                   <\/span><span style=\"color:#6A9955\">\/\/ \u6e05\u7a7a\u8f93\u5165\u6846<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }, [<\/span><span style=\"color:#9CDCFE\">inputValue<\/span><span style=\"color:#D4D4D4\">]);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ ---------- \u5207\u6362\u5b8c\u6210\u72b6\u6001 ----------<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> toggleTodo<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useCallback<\/span><span style=\"color:#D4D4D4\">((<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    setTodos<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">      prev<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">map<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#569CD6\"> =><\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">        todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\"> === <\/span><span style=\"color:#9CDCFE\">id<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">          ? { ...<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">completed:<\/span><span style=\"color:#D4D4D4\"> !<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">completed<\/span><span style=\"color:#D4D4D4\"> }  <\/span><span style=\"color:#6A9955\">\/\/ \u7ffb\u8f6c\u5b8c\u6210\u72b6\u6001<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">          : <\/span><span style=\"color:#9CDCFE\">todo<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">      )<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ ---------- \u5220\u9664\u4efb\u52a1 ----------<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> deleteTodo<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useCallback<\/span><span style=\"color:#D4D4D4\">((<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">    setTodos<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">prev<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> prev<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">filter<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\"> !== <\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\">));<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }, []);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ ---------- \u952e\u76d8\u4e8b\u4ef6\uff08\u56de\u8f66\u6dfb\u52a0\uff09 ----------<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> handleKeyDown<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useCallback<\/span><span style=\"color:#D4D4D4\">((<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    if<\/span><span style=\"color:#D4D4D4\"> (<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">key<\/span><span style=\"color:#D4D4D4\"> === <\/span><span style=\"color:#CE9178\">'Enter'<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#DCDCAA\">      addTodo<\/span><span style=\"color:#D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }, [<\/span><span style=\"color:#9CDCFE\">addTodo<\/span><span style=\"color:#D4D4D4\">]);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ ---------- \u6d3e\u751f\u6570\u636e\uff1a\u7b5b\u9009\u540e\u7684\u4efb\u52a1\u5217\u8868 ----------<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> filteredTodos<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useMemo<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">    switch<\/span><span style=\"color:#D4D4D4\"> (<\/span><span style=\"color:#9CDCFE\">filter<\/span><span style=\"color:#D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">      case<\/span><span style=\"color:#CE9178\"> 'completed'<\/span><span style=\"color:#D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">        return<\/span><span style=\"color:#9CDCFE\"> todos<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">filter<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">t<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> t<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">completed<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">      case<\/span><span style=\"color:#CE9178\"> 'active'<\/span><span style=\"color:#D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">        return<\/span><span style=\"color:#9CDCFE\"> todos<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">filter<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">t<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> !<\/span><span style=\"color:#9CDCFE\">t<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">completed<\/span><span style=\"color:#D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">      default<\/span><span style=\"color:#D4D4D4\">:<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">        return<\/span><span style=\"color:#9CDCFE\"> todos<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }, [<\/span><span style=\"color:#9CDCFE\">todos<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#9CDCFE\">filter<\/span><span style=\"color:#D4D4D4\">]);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ ---------- \u6d3e\u751f\u6570\u636e\uff1a\u7edf\u8ba1\u6570\u636e ----------<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">  const<\/span><span style=\"color:#4FC1FF\"> stats<\/span><span style=\"color:#D4D4D4\"> = <\/span><span style=\"color:#DCDCAA\">useMemo<\/span><span style=\"color:#D4D4D4\">(() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#D4D4D4\"> ({<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    total:<\/span><span style=\"color:#9CDCFE\"> todos<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">length<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    completed:<\/span><span style=\"color:#9CDCFE\"> todos<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">filter<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">t<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#9CDCFE\"> t<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">completed<\/span><span style=\"color:#D4D4D4\">).<\/span><span style=\"color:#9CDCFE\">length<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">    active:<\/span><span style=\"color:#9CDCFE\"> todos<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">filter<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">t<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> !<\/span><span style=\"color:#9CDCFE\">t<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">completed<\/span><span style=\"color:#D4D4D4\">).<\/span><span style=\"color:#9CDCFE\">length<\/span><span style=\"color:#D4D4D4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  }), [<\/span><span style=\"color:#9CDCFE\">todos<\/span><span style=\"color:#D4D4D4\">]);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">  \/\/ ========== \u6e32\u67d3 ==========<\/span><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">  return<\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#9CDCFE\"> className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"todo-container\"<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">h2<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\ud83d\udccb \u4efb\u52a1\u7ba1\u7406<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">h2<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">      {<\/span><span style=\"color:#6A9955\">\/* ---- \u8f93\u5165\u533a\u57df ---- *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#9CDCFE\"> className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"todo-input-area\"<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#569CD6\">input<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">          type<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"text\"<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">          value<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">inputValue<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">          onChange<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">) <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> setInputValue<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">e<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">target<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">value<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">          onKeyDown<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">handleKeyDown<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">          placeholder<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"\u8f93\u5165\u4efb\u52a1\uff0c\u6309\u56de\u8f66\u6dfb\u52a0...\"<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        \/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#9CDCFE\"> onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">addTodo<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#D4D4D4\">\u6dfb\u52a0<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">      {<\/span><span style=\"color:#6A9955\">\/* ---- \u7b5b\u9009\u6309\u94ae ---- *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#9CDCFE\"> className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"todo-filters\"<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">        {<\/span><span style=\"color:#D4D4D4\">[<\/span><span style=\"color:#CE9178\">'all'<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#CE9178\">'active'<\/span><span style=\"color:#D4D4D4\">, <\/span><span style=\"color:#CE9178\">'completed'<\/span><span style=\"color:#D4D4D4\">].<\/span><span style=\"color:#DCDCAA\">map<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">type<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">          &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">            key<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">type<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">            className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">filter<\/span><span style=\"color:#D4D4D4\"> === <\/span><span style=\"color:#9CDCFE\">type<\/span><span style=\"color:#D4D4D4\"> ? <\/span><span style=\"color:#CE9178\">'active'<\/span><span style=\"color:#D4D4D4\"> : <\/span><span style=\"color:#CE9178\">''<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">            onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> setFilter<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">type<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">          ><\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">            {<\/span><span style=\"color:#9CDCFE\">type<\/span><span style=\"color:#D4D4D4\"> === <\/span><span style=\"color:#CE9178\">'all'<\/span><span style=\"color:#D4D4D4\"> ? <\/span><span style=\"color:#CE9178\">`\u5168\u90e8(<\/span><span style=\"color:#569CD6\">${<\/span><span style=\"color:#9CDCFE\">stats<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">total<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#CE9178\">)`<\/span><span style=\"color:#D4D4D4\"> :<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">             type<\/span><span style=\"color:#D4D4D4\"> === <\/span><span style=\"color:#CE9178\">'active'<\/span><span style=\"color:#D4D4D4\"> ? <\/span><span style=\"color:#CE9178\">`\u672a\u5b8c\u6210(<\/span><span style=\"color:#569CD6\">${<\/span><span style=\"color:#9CDCFE\">stats<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">active<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#CE9178\">)`<\/span><span style=\"color:#D4D4D4\"> :<\/span><\/span>\n<span class=\"line\"><span style=\"color:#CE9178\">             `\u5df2\u5b8c\u6210(<\/span><span style=\"color:#569CD6\">${<\/span><span style=\"color:#9CDCFE\">stats<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">completed<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#CE9178\">)`<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">          &#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">        ))<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">      {<\/span><span style=\"color:#6A9955\">\/* ---- \u4efb\u52a1\u5217\u8868 ---- *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">      {<\/span><span style=\"color:#9CDCFE\">filteredTodos<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">length<\/span><span style=\"color:#D4D4D4\"> === <\/span><span style=\"color:#B5CEA8\">0<\/span><span style=\"color:#D4D4D4\"> ? (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A9955\">        \/* \u7a7a\u72b6\u6001 *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#9CDCFE\"> className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"empty-state\"<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">          {<\/span><span style=\"color:#9CDCFE\">todos<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">length<\/span><span style=\"color:#D4D4D4\"> === <\/span><span style=\"color:#B5CEA8\">0<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">            ? <\/span><span style=\"color:#CE9178\">'\u2728 \u8fd8\u6ca1\u6709\u4efb\u52a1\uff0c\u6dfb\u52a0\u4e00\u4e2a\u5427\uff01'<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">            : <\/span><span style=\"color:#CE9178\">'\u6ca1\u6709\u5339\u914d\u7684\u4efb\u52a1'<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;\/<\/span><span style=\"color:#569CD6\">p<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">      ) : (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;<\/span><span style=\"color:#569CD6\">ul<\/span><span style=\"color:#9CDCFE\"> className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"todo-list\"<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">          {<\/span><span style=\"color:#9CDCFE\">filteredTodos<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#DCDCAA\">map<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#569CD6\"> =><\/span><span style=\"color:#D4D4D4\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">            &#x3C;<\/span><span style=\"color:#569CD6\">li<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">              key<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">              className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#CE9178\">`todo-item <\/span><span style=\"color:#569CD6\">${<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">completed<\/span><span style=\"color:#D4D4D4\"> ? <\/span><span style=\"color:#CE9178\">'completed'<\/span><span style=\"color:#D4D4D4\"> : <\/span><span style=\"color:#CE9178\">''<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#CE9178\">`<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">            ><\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">              {<\/span><span style=\"color:#6A9955\">\/* \u590d\u9009\u6846 *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">              &#x3C;<\/span><span style=\"color:#569CD6\">input<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">                type<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"checkbox\"<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">                checked<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">completed<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">                onChange<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> toggleTodo<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">              \/><\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">              {<\/span><span style=\"color:#6A9955\">\/* \u4efb\u52a1\u5185\u5bb9\uff08\u70b9\u51fb\u4e5f\u53ef\u5207\u6362\uff09 *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">              &#x3C;<\/span><span style=\"color:#569CD6\">span<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">                className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"todo-title\"<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">                onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> toggleTodo<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">              ><\/span><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">                {<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">title<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">              &#x3C;\/<\/span><span style=\"color:#569CD6\">span<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">              {<\/span><span style=\"color:#6A9955\">\/* \u521b\u5efa\u65f6\u95f4 *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">              &#x3C;<\/span><span style=\"color:#569CD6\">span<\/span><span style=\"color:#9CDCFE\"> className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"todo-time\"<\/span><span style=\"color:#808080\">><\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">createdAt<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#808080\">&#x3C;\/<\/span><span style=\"color:#569CD6\">span<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">              {<\/span><span style=\"color:#6A9955\">\/* \u5220\u9664\u6309\u94ae *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">              &#x3C;<\/span><span style=\"color:#569CD6\">button<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">                className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"delete-btn\"<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9CDCFE\">                onClick<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#D4D4D4\">() <\/span><span style=\"color:#569CD6\">=><\/span><span style=\"color:#DCDCAA\"> deleteTodo<\/span><span style=\"color:#D4D4D4\">(<\/span><span style=\"color:#9CDCFE\">todo<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">id<\/span><span style=\"color:#D4D4D4\">)<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">              ><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">                \u5220\u9664<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">              &#x3C;\/<\/span><span style=\"color:#569CD6\">button<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">            &#x3C;\/<\/span><span style=\"color:#569CD6\">li<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">          ))<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">        &#x3C;\/<\/span><span style=\"color:#569CD6\">ul<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">      )<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#569CD6\">      {<\/span><span style=\"color:#6A9955\">\/* ---- \u5e95\u90e8\u7edf\u8ba1 ---- *\/<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#9CDCFE\"> className<\/span><span style=\"color:#D4D4D4\">=<\/span><span style=\"color:#CE9178\">\"todo-footer\"<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">        \u603b\u8ba1 <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">stats<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">total<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#D4D4D4\"> \u9879 | \u5df2\u5b8c\u6210 <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">stats<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">completed<\/span><span style=\"color:#569CD6\">}<\/span><span style=\"color:#D4D4D4\"> | \u672a\u5b8c\u6210 <\/span><span style=\"color:#569CD6\">{<\/span><span style=\"color:#9CDCFE\">stats<\/span><span style=\"color:#D4D4D4\">.<\/span><span style=\"color:#9CDCFE\">active<\/span><span style=\"color:#569CD6\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">      &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#808080\">    &#x3C;\/<\/span><span style=\"color:#569CD6\">div<\/span><span style=\"color:#808080\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#C586C0\">export<\/span><span style=\"color:#C586C0\"> default<\/span><span style=\"color:#9CDCFE\"> TodoList<\/span><span style=\"color:#D4D4D4\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u5173\u952e\u6ce8\u91ca\u8bf4\u660e<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>useState<\/strong>\uff1a\u7ba1\u7406 todos \u6570\u7ec4\u3001inputValue \u8f93\u5165\u6846\u503c\u548c filter \u7b5b\u9009\u6761\u4ef6\u4e09\u4e2a\u72ec\u7acb\u72b6\u6001\u3002\u6bcf\u9879\u5173\u6ce8\u4e00\u4e2a\u5173\u6ce8\u70b9\u3002<\/li>\n\n\n<li><strong>useCallback<\/strong>\uff1aaddTodo\u3001toggleTodo\u3001deleteTodo \u4e09\u4e2a\u6838\u5fc3\u64cd\u4f5c\u90fd\u4f7f\u7528\u4e86 useCallback \u7f13\u5b58\u51fd\u6570\u5f15\u7528\uff0c\u907f\u514d\u5b50\u7ec4\u4ef6\u4e0d\u5fc5\u8981\u7684\u91cd\u65b0\u6e32\u67d3\u3002<\/li>\n\n\n<li><strong>useMemo<\/strong>\uff1afilteredTodos\uff08\u7b5b\u9009\u7ed3\u679c\uff09\u548c stats\uff08\u7edf\u8ba1\u6570\u636e\uff09\u90fd\u662f\u6d3e\u751f\u6570\u636e\uff0c\u4f7f\u7528 useMemo \u7f13\u5b58\uff0c\u4ec5\u5728\u4f9d\u8d56\u53d8\u5316\u65f6\u91cd\u65b0\u8ba1\u7b97\uff0c\u907f\u514d\u6bcf\u6b21\u6e32\u67d3\u90fd\u91cd\u65b0\u8fc7\u6ee4\u3002<\/li>\n\n\n<li><strong>\u51fd\u6570\u5f0f setState<\/strong>\uff1aaddTodo \u4e2d\u4f7f\u7528 <code>setTodos(prev => [...])<\/code> \u786e\u4fdd\u57fa\u4e8e\u6700\u65b0\u72b6\u6001\u8ffd\u52a0\uff0c\u9632\u6b62\u5e76\u53d1\u72b6\u6001\u66f4\u65b0\u4e22\u5931\u6570\u636e\u3002<\/li>\n\n\n<li><strong>\u4e0d\u53d8\u6027\uff08Immutability\uff09<\/strong>\uff1atoggleTodo \u4f7f\u7528 map \u521b\u5efa\u65b0\u6570\u7ec4\u800c\u975e\u76f4\u63a5\u4fee\u6539\u539f\u5bf9\u8c61\uff1bdeleteTodo \u4f7f\u7528 filter \u521b\u5efa\u65b0\u6570\u7ec4\u3002\u8fd9\u786e\u4fdd React \u80fd\u6b63\u786e\u68c0\u6d4b\u72b6\u6001\u53d8\u5316\u3002<\/li>\n\n\n<li><strong>\u7a7a\u72b6\u6001\u5904\u7406<\/strong>\uff1a\u5217\u8868\u4e3a\u7a7a\u65f6\u663e\u793a\u53cb\u597d\u63d0\u793a\uff0c\u533a\u5206\u4e86&#8221;\u8fd8\u6ca1\u6709\u4efb\u52a1&#8221;\u548c&#8221;\u5f53\u524d\u7b5b\u9009\u65e0\u5339\u914d&#8221;\u4e24\u79cd\u60c5\u51b5\u3002<\/li>\n\n\n<li><strong>\u952e\u76d8\u4e8b\u4ef6<\/strong>\uff1a\u7ed1\u5b9a onKeyDown \u76d1\u542c\u56de\u8f66\u952e\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u8003\u5bdf\u77e5\u8bc6\u70b9\u603b\u7ed3<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>useState \u2014 \u7ec4\u4ef6\u72b6\u6001\u7ba1\u7406<\/li>\n\n\n<li>useCallback \u2014 \u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u7f13\u5b58<\/li>\n\n\n<li>useMemo \u2014 \u6d3e\u751f\u6570\u636e\uff08\u7b5b\u9009 + \u7edf\u8ba1\uff09<\/li>\n\n\n<li>\u51fd\u6570\u5f0f setState \u2014 \u786e\u4fdd\u72b6\u6001\u66f4\u65b0\u7684\u6b63\u786e\u6027<\/li>\n\n\n<li>\u4e0d\u53ef\u53d8\u6570\u636e\u64cd\u4f5c \u2014 map \/ filter \/ \u5c55\u5f00\u8fd0\u7b97\u7b26<\/li>\n\n\n<li>\u6761\u4ef6\u6e32\u67d3 \u2014 \u7a7a\u72b6\u6001\u3001\u7b5b\u9009\u7ed3\u679c<\/li>\n\n\n<li>\u5217\u8868\u6e32\u67d3 \u2014 key \u7684\u6b63\u786e\u4f7f\u7528<\/li>\n\n\n<li>\u8868\u5355\u5904\u7406 \u2014 \u53d7\u63a7\u7ec4\u4ef6 + \u952e\u76d8\u4e8b\u4ef6<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>React \u4ecb\u7ecd\u4e0e\u6838\u5fc3\u6982\u5ff5 React \u4ecb\u7ecd\u53ca\u7279\u6027 React \u662f\u7531 Facebook\uff08Meta\uff09\u5f00\u53d1\u5e76\u5f00\u6e90\u7684 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-288","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09 - LeezP\u2018s Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/leezp.top\/?p=288\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09 - LeezP\u2018s Blog\" \/>\n<meta property=\"og:description\" content=\"React \u4ecb\u7ecd\u4e0e\u6838\u5fc3\u6982\u5ff5 React \u4ecb\u7ecd\u53ca\u7279\u6027 React \u662f\u7531 Facebook\uff08Meta\uff09\u5f00\u53d1\u5e76\u5f00\u6e90\u7684 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/leezp.top\/?p=288\" \/>\n<meta property=\"og:site_name\" content=\"LeezP\u2018s Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-13T06:46:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-13T07:53:11+00:00\" \/>\n<meta name=\"author\" content=\"LeezPayne\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"LeezPayne\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/leezp.top\/?p=288#article\",\"isPartOf\":{\"@id\":\"https:\/\/leezp.top\/?p=288\"},\"author\":{\"name\":\"LeezPayne\",\"@id\":\"https:\/\/leezp.top\/#\/schema\/person\/74a8eae3251b96c500cb907559caad13\"},\"headline\":\"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09\",\"datePublished\":\"2026-05-13T06:46:22+00:00\",\"dateModified\":\"2026-05-13T07:53:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/leezp.top\/?p=288\"},\"wordCount\":784,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/leezp.top\/#\/schema\/person\/74a8eae3251b96c500cb907559caad13\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/leezp.top\/?p=288#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/leezp.top\/?p=288\",\"url\":\"https:\/\/leezp.top\/?p=288\",\"name\":\"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09 - LeezP\u2018s Blog\",\"isPartOf\":{\"@id\":\"https:\/\/leezp.top\/#website\"},\"datePublished\":\"2026-05-13T06:46:22+00:00\",\"dateModified\":\"2026-05-13T07:53:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/leezp.top\/?p=288#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/leezp.top\/?p=288\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/leezp.top\/?p=288#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/leezp.top\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/leezp.top\/#website\",\"url\":\"https:\/\/leezp.top\/\",\"name\":\"LeezP\u2018s Blog | \u674e\u5b50\u76ae\u7684\u535a\u5ba2\",\"description\":\"\u674e\u5b50\u76ae\u7684\u535a\u5ba2\",\"publisher\":{\"@id\":\"https:\/\/leezp.top\/#\/schema\/person\/74a8eae3251b96c500cb907559caad13\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/leezp.top\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/leezp.top\/#\/schema\/person\/74a8eae3251b96c500cb907559caad13\",\"name\":\"LeezPayne\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/leezp.top\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/leezp.top\/wp-content\/uploads\/2023\/10\/Plum-Ext.png\",\"contentUrl\":\"https:\/\/leezp.top\/wp-content\/uploads\/2023\/10\/Plum-Ext.png\",\"width\":720,\"height\":720,\"caption\":\"LeezPayne\"},\"logo\":{\"@id\":\"https:\/\/leezp.top\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/leezp.top\"],\"url\":\"https:\/\/leezp.top\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09 - LeezP\u2018s Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/leezp.top\/?p=288","og_locale":"zh_CN","og_type":"article","og_title":"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09 - LeezP\u2018s Blog","og_description":"React \u4ecb\u7ecd\u4e0e\u6838\u5fc3\u6982\u5ff5 React \u4ecb\u7ecd\u53ca\u7279\u6027 React \u662f\u7531 Facebook\uff08Meta\uff09\u5f00\u53d1\u5e76\u5f00\u6e90\u7684 [&hellip;]","og_url":"https:\/\/leezp.top\/?p=288","og_site_name":"LeezP\u2018s Blog","article_published_time":"2026-05-13T06:46:22+00:00","article_modified_time":"2026-05-13T07:53:11+00:00","author":"LeezPayne","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"LeezPayne","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"7 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/leezp.top\/?p=288#article","isPartOf":{"@id":"https:\/\/leezp.top\/?p=288"},"author":{"name":"LeezPayne","@id":"https:\/\/leezp.top\/#\/schema\/person\/74a8eae3251b96c500cb907559caad13"},"headline":"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09","datePublished":"2026-05-13T06:46:22+00:00","dateModified":"2026-05-13T07:53:11+00:00","mainEntityOfPage":{"@id":"https:\/\/leezp.top\/?p=288"},"wordCount":784,"commentCount":0,"publisher":{"@id":"https:\/\/leezp.top\/#\/schema\/person\/74a8eae3251b96c500cb907559caad13"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/leezp.top\/?p=288#respond"]}]},{"@type":"WebPage","@id":"https:\/\/leezp.top\/?p=288","url":"https:\/\/leezp.top\/?p=288","name":"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09 - LeezP\u2018s Blog","isPartOf":{"@id":"https:\/\/leezp.top\/#website"},"datePublished":"2026-05-13T06:46:22+00:00","dateModified":"2026-05-13T07:53:11+00:00","breadcrumb":{"@id":"https:\/\/leezp.top\/?p=288#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/leezp.top\/?p=288"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/leezp.top\/?p=288#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/leezp.top\/"},{"@type":"ListItem","position":2,"name":"React\u57fa\u7840\u77e5\u8bc6\uff08\u673a\u8bd5\u590d\u4e60\u7528\uff09"}]},{"@type":"WebSite","@id":"https:\/\/leezp.top\/#website","url":"https:\/\/leezp.top\/","name":"LeezP\u2018s Blog | \u674e\u5b50\u76ae\u7684\u535a\u5ba2","description":"\u674e\u5b50\u76ae\u7684\u535a\u5ba2","publisher":{"@id":"https:\/\/leezp.top\/#\/schema\/person\/74a8eae3251b96c500cb907559caad13"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/leezp.top\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"https:\/\/leezp.top\/#\/schema\/person\/74a8eae3251b96c500cb907559caad13","name":"LeezPayne","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/leezp.top\/#\/schema\/person\/image\/","url":"https:\/\/leezp.top\/wp-content\/uploads\/2023\/10\/Plum-Ext.png","contentUrl":"https:\/\/leezp.top\/wp-content\/uploads\/2023\/10\/Plum-Ext.png","width":720,"height":720,"caption":"LeezPayne"},"logo":{"@id":"https:\/\/leezp.top\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/leezp.top"],"url":"https:\/\/leezp.top\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/leezp.top\/index.php?rest_route=\/wp\/v2\/posts\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leezp.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leezp.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leezp.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leezp.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=288"}],"version-history":[{"count":8,"href":"https:\/\/leezp.top\/index.php?rest_route=\/wp\/v2\/posts\/288\/revisions"}],"predecessor-version":[{"id":296,"href":"https:\/\/leezp.top\/index.php?rest_route=\/wp\/v2\/posts\/288\/revisions\/296"}],"wp:attachment":[{"href":"https:\/\/leezp.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leezp.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leezp.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}