{"id":38427,"date":"2023-08-17T08:15:51","date_gmt":"2023-05-06T09:21:14","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/"},"modified":"2024-04-30T18:54:46","modified_gmt":"2024-04-30T10:54:46","slug":"%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/","title":{"rendered":"\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60React\u5165\u95e8-React\u7684\u57fa\u7840\u77e5\u8bc6"},"content":{"rendered":"<h1>\u8868\u683c\u76ee\u5f55<\/h1>\n<p>\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React \u306e\u57fa\u672c \u2190\u2605\u3053\u3053<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React Router \u7de8<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c flux\u7de8<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Redux \u7de8: immutability \u3068\u306f<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Redux \u7de8: Redux \u5358\u4f53\u3067\u72b6\u614b\u7ba1\u7406\u3092\u3057\u3063\u304b\u308a\u7406\u89e3\u3059\u308b<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Redux \u7de8: Redux \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b<br \/>\n\u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Mobx \u7de8<\/p>\n<h1>\u5728\u5f00\u59cb\u4f7f\u7528React\u4e4b\u524d<\/h1>\n<p>\u4f5c\u4e3a\u4e00\u4e2a\u65e5\u5e38\u63a5\u89e6\u540e\u7aef\u7684\u4eba\uff0c\u6211\u60f3\u5c06\u4e2a\u4ebaReact\u5b66\u4e60\u7684\u8bb0\u5f55\u4fdd\u7559\u4e0b\u6765\uff0c\u4ee5\u4fbf\u63a5\u89e6\u524d\u7aef\u77e5\u8bc6\u3002\u867d\u7136\u5df2\u7ecf\u6709\u5f88\u591a\u5173\u4e8eReact\u7684\u6587\u7ae0\u6d41\u4f20\uff0c\u4f46\u6211\u60f3\u5728\u8fd9\u91cc\u4e3b\u8981\u8ba8\u8bba\u6700\u8fd1\u7684React\uff0c\u4ee5\u53caReact Router\u3001Redux\u3001\u5176\u4ed6Redux\u4e2d\u95f4\u4ef6\u548cMobX\u3002\u6b64\u5916\uff0c\u6211\u8fd8\u60f3\u7ed3\u5408webpack v4\u548cbabel\uff0c\u4ee5\u4fbf\u5728React\u7684\u5de5\u4f5c\u573a\u6240\u4e2d\u53ef\u4ee5\u5e94\u7528\u5230\u3002<\/p>\n<p>\u8fd9\u6b21\u5b66\u4e60React\u4e3b\u8981\u53c2\u8003\u7684\u662f\u4ee5\u4e0bReact JS\u6559\u7a0b\u89c6\u9891\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">React JS Tutorials<\/ul>\n<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" title=\"React JS Tutorials\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/videoseries?list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>\u5728\u8fd9\u4e2a\u8fc7\u7a0b\u4e2d\uff0c\u6709\u4e9b\u90e8\u5206\u56e0\u4e3aWebpack\u7248\u672c\u8fc7\u65e7\u800c\u65e0\u6cd5\u8fd0\u884c\uff0c\u4f46\u5728\u8fd9\u91cc\u6211\u4eec\u4f1a\u5bf9\u5b83\u4eec\u8fdb\u884c\u4fee\u6b63\u4ee5\u9002\u5e94\u3002\u7531\u4e8e\u5185\u5bb9\u6bd4\u8f83\u957f\uff0c\u6211\u60f3\u5206\u6210\u591a\u4e2a\u90e8\u5206\u6765\u8fdb\u884c\u89e3\u91ca\u3002<\/p>\n<h1>\u672c\u8bfe\u6240\u4f7f\u7528\u7684\u6587\u4ef6<\/h1>\n<p>\u672c\u6b21\u8bb2\u5ea7\u6240\u4f7f\u7528\u7684\u6587\u4ef6\u53ef\u5728\u4ee5\u4e0b\u5b58\u50a8\u5e93\u4e2d\u627e\u5230\u3002<\/p>\n<ul class=\"post-ul\">https:\/\/github.com\/TsutomuNakamura\/my-react-js-tutorials\/tree\/master\/1-basic-react\/00_start_point\/react-tutorial<\/ul>\n<h1>React \u662f\u4ec0\u4e48?<\/h1>\n<p>\u603b\u7684\u6765\u8bf4\uff0cView\u5c42\u662fJavaScript\u524d\u7aef\u6846\u67b6\uff0c\u5177\u6709\u4ee5\u4e0b\u7279\u70b9\u3002<\/p>\n<h2>\u5ba3\u8a00\u7684 de) &#8211; \u8072\u660e\u7684 de) &#8211; \u58f0\u660e\u7684<\/h2>\n<p>\u901a\u8fc7\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u5bf9\u6bcf\u4e2a\u72b6\u6001\u8fdb\u884c\u7b80\u5355\u7684\u8bbe\u8ba1\uff0cReact \u53ef\u4ee5\u5728\u6570\u636e\u53d1\u751f\u66f4\u6539\u65f6\uff0c\u4ec5\u9ad8\u6548\u66f4\u65b0\u548c\u6e32\u67d3\u9002\u5f53\u7684\u7ec4\u4ef6\u3002<br \/>\n\u5f00\u53d1\u8005\u65e0\u9700\u5173\u6ce8\u627e\u5230\u5e94\u8be5\u66f4\u65b0\u7684\u5408\u9002\u7ec4\u4ef6\u7684\u903b\u8f91\u3002<br \/>\n\u58f0\u660e\u5f0f\u89c6\u56fe\u589e\u52a0\u4e86\u53ef\u9884\u6d4b\u6027\uff0c\u5e76\u4e14\u4f7f\u4ee3\u7801\u66f4\u6613\u4e8e\u8c03\u8bd5\u3002<br \/>\n\u6b64\u5916\uff0c\u53ef\u4ee5\u4f7f\u7528 JSX \u8bed\u6cd5\uff08\u4e00\u79cd\u5728 JavaScript \u5185\u5d4c\u5165 HTML \u6807\u7b7e\u7684\u8bed\u6cd5\uff09\uff0c\u4f7f\u6e32\u67d3\u7684\u5f62\u5f0f\u66f4\u52a0\u76f4\u89c2\u3002<\/p>\n<h2>\u7ec4\u4ef6\u5316<\/h2>\n<p>\u901a\u8fc7\u6784\u5efa\u7ba1\u7406\u81ea\u8eab\u72b6\u6001\u7684\u5c01\u88c5\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u901a\u8fc7\u8c03\u7528\u8fd9\u4e9b\u7ec4\u4ef6\u6765\u521b\u5efa\u590d\u6742\u7684UI\u3002\u8fd9\u4e9b\u7ec4\u4ef6\u4e0d\u662f\u6a21\u677f\uff0c\u800c\u662f\u4f7f\u7528JavaScript\u7f16\u5199\uff0c\u53ef\u4ee5\u8f7b\u677e\u4f20\u9012\u4e30\u5bcc\u7684\u6570\u636e\u5230\u5e94\u7528\u7a0b\u5e8f\uff0c\u5e76\u4e14\u53ef\u4ee5\u5728DOM\u4e4b\u5916\u7ef4\u6301\u72b6\u6001\u3002<\/p>\n<h2>\u5faa\u73af\u4f7f\u7528<\/h2>\n<p>\u7531\u4e8eReact\u4e0d\u5bf9\u5f00\u53d1\u8005\u7684\u5176\u4ed6\u6280\u672f\u77e5\u8bc6\u4f5c\u51fa\u5047\u8bbe\uff0c\u56e0\u6b64\u53ef\u4ee5\u5728\u4e0d\u91cd\u65b0\u7f16\u5199\u73b0\u6709\u4ee3\u7801\u7684\u60c5\u51b5\u4e0b\uff0c\u4f7f\u7528React\u5f00\u53d1\u65b0\u529f\u80fd\u3002<br \/>\n\u4f8b\u5982\uff0c\u53ef\u4ee5\u4f7f\u7528Node\u6765\u652f\u6301SSR\uff08\u670d\u52a1\u5668\u7aef\u6e32\u67d3\uff09\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528React Native\u5f00\u53d1\u5f3a\u5927\u7684\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n<p>\u6b64\u5916\uff0cReact \u6709\u4e00\u4e2a\u7279\u70b9\u662f\u5c06Facebook\u4f5c\u4e3a\u5176\u540e\u53f0\uff0c\u4e4b\u524d\u53ef\u80fd\u4f1a\u56e0\u4e3a\u5176\u91c7\u7528BSD + \u7279\u8bb8\u8bb8\u53ef\u8bc1\u7b49\u8bb8\u53ef\u5f62\u5f0f\u800c\u4f7f\u67d0\u4e9b\u4eba\u5bf9\u4f01\u4e1a\u5e94\u7528\u7a0b\u5e8f\u7684\u5f00\u53d1\u4ea7\u751f\u72b9\u8c6b\uff0c\u4f46\u57282017\u5e749\u6708\u5de6\u53f3\u6539\u4e3a\u4e86MIT\u8bb8\u53ef\u8bc1\uff0c\u4f7f\u5176\u6bd4\u4ee5\u524d\u66f4\u6613\u4e8e\u4f7f\u7528\u3002<\/p>\n<p>\u65e2\u7136\u6211\u4eec\u5df2\u7ecf\u638c\u63e1\u4e86React\u7684\u57fa\u672c\u7279\u70b9\uff0c\u90a3\u4e48\u63a5\u4e0b\u6765\u5c31\u7acb\u5373\u5f00\u59cb\u4f7f\u7528React\u6765\u8fdb\u884c\u7f16\u7a0b\u5427\u3002<\/p>\n<h1>\u73af\u5883\u51c6\u5907<\/h1>\n<p>\u8fd9\u6b21\u6211\u4eec\u662f\u5728\u4ee5\u4e0b\u8fd9\u6837\u7684\u73af\u5883\u4e2d\u521b\u5efa\u7684\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u74b0\u5883\u6982\u8981<\/ul>\n<\/li>\n<\/ul>\n<p>\u6f14\u7b97\u5b50<br \/>\n\u610f\u5473<\/p>\n<p>node version<br \/>\nv8 \u7cfb<\/p>\n<p>npm version<br \/>\n5 \u7cfb<\/p>\n<p>webpack<br \/>\n4 \u7cfb<\/p>\n<p>OS<br \/>\nArch Linux<\/p>\n<p>\u8ba9\u6211\u4eec\u4ee5\u4e00\u4e2a\u7b80\u5355\u7684\u7ed3\u6784\u4f5c\u4e3a\u4f8b\u5b50\u6765\u4f53\u9a8c\u4e00\u4e0bReact\uff0c\u4ee5\u4fbf\u786e\u8ba4React\u7684\u57fa\u672c\u64cd\u4f5c\u3002<\/p>\n<h2>\u521b\u5efa\u5de5\u4f5c\u7a7a\u95f4<\/h2>\n<p>\u521b\u5efa\u4e00\u4e2a\u540d\u4e3areact-tutorial\u7684\u5de5\u4f5c\u76ee\u5f55\uff0c\u4ee5\u4fbf\u4e8e\u5236\u4f5c\u4e00\u4e2a\u80fd\u591f\u4f53\u9a8cReact\u57fa\u672c\u64cd\u4f5c\u7684\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> <span class=\"nb\">mkdir <\/span>react-tutorial\r\n<span class=\"gp\">$<\/span> <span class=\"nb\">cd <\/span>react-tutorial\r\n<span class=\"gp\">$<\/span> <span class=\"nb\">mkdir<\/span> <span class=\"nt\">-p<\/span> src\/js\r\n<\/code><\/pre>\n<p>\u4f7f\u7528npm init\u547d\u4ee4\u6765\u521b\u5efa\u9879\u76ee\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> npm init\r\n<span class=\"c\">......\r\n<\/span><span class=\"go\">package name: (react-tutorial) \r\nversion: (1.0.0) \r\ndescription: \r\n<\/span><span class=\"gp\">entry point: (index.js) webpack.config.js    #<\/span> &lt;- <span class=\"s2\">\"webpack.config.js\"<\/span> \u5165\u529b<span class=\"o\">(<\/span>\u5148\u306bwebpack.config.js \u4f5c\u3063\u3066\u304a\u3051\u3070\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u9078\u629e\u3055\u308c\u308b<span class=\"o\">)<\/span>\r\n<span class=\"go\">test command: \r\ngit repository: \r\nkeywords: \r\nauthor: Your Name\r\nlicense: (ISC) \r\n<\/span><span class=\"c\">......\r\n<\/span><\/code><\/pre>\n<p>\u88dc\u5145\uff1a\u6839\u64da @ksilverwall \u7528\u6236\u7684\u8a55\u8ad6\uff0c\u5982\u679c\u5728\u5275\u5efa\u9805\u76ee\u6642\u6c92\u6709\u8f38\u5165description\u548cgit repository\uff0c\u7576\u57f7\u884c\u5f8c\u7e8c\u7684npm install\u7b49\u547d\u4ee4\u6642\u6703\u51fa\u73fe\u4ee5\u4e0b\u8b66\u544a\u3002<\/p>\n<pre class=\"post-pre\"><code>npm WARN react-tutorial@1.0.0 No description\r\nnpm WARN react-tutorial@1.0.0 No repository field.\r\n<\/code><\/pre>\n<p>\u8fd9\u4e2a\u8b66\u544a\u672c\u8eab\u6ca1\u6709\u95ee\u9898\uff0c\u6240\u4ee5\u53ef\u4ee5\u6309\u539f\u6837\u8fdb\u884c\uff0c\u6ca1\u5173\u7cfb\u3002\u4f46\u662f\uff0c\u5982\u679c\u6709\u4eba\u5728\u610f\u7684\u8bdd\uff0c\u8bf7\u5728\u63cf\u8ff0\u548cGit\u4ed3\u5e93\u4e2d\u586b\u5165\u9002\u5f53\u7684\u503c\u3002<\/p>\n<p>\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u5b89\u88c5React\u3001Webpack\u548cBabel\u3002<br \/>\n\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\uff0c\u6211\u4eec\u5c06\u4f7f\u7528Babel\u6765\u652f\u6301ES6\u8bed\u6cd5\uff0c\u5e76\u4f7f\u7528Webpack\u8fdb\u884c\u6a21\u5757\u6253\u5305\u548c\u5f00\u53d1\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> webpack webpack-cli webpack-dev-server\r\n<span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">-g<\/span> webpack webpack-cli\r\n<span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> @babel\/core @babel\/preset-env @babel\/preset-react babel-loader\r\n<span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> react react-dom\r\n<\/code><\/pre>\n<p>\u521b\u5efawebpack.config.js\u6587\u4ef6\u5e76\u7f16\u5199\u6346\u7ed1\u89c4\u5219\u3002<br \/>\n\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u8bbe\u7f6ewebpack.config.js\uff0c\u4ece.\/src\/js\/client.js\u4f5c\u4e3a\u8d77\u70b9\u8bfb\u53d6\u6587\u4ef6\u5185\u90e8\u7684import\u8bed\u6cd5\uff0c\u5e76\u5c06\u8fd9\u4e9b\u6e90\u4ee3\u7801\u8fdb\u884c\u6a21\u5757\u6346\u7ed1\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"kd\">var<\/span> <span class=\"nx\">debug<\/span>   <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NODE_ENV<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">production<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"kd\">var<\/span> <span class=\"nx\">webpack<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">webpack<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n<span class=\"kd\">var<\/span> <span class=\"nx\">path<\/span>    <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">path<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n\r\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"na\">context<\/span><span class=\"p\">:<\/span> <span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nx\">join<\/span><span class=\"p\">(<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">src<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span>\r\n  <span class=\"na\">entry<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/js\/client.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"na\">module<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">rules<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span>\r\n      <span class=\"na\">test<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">\\.<\/span><span class=\"sr\">jsx<\/span><span class=\"se\">?<\/span><span class=\"sr\">$\/<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"na\">exclude<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">(<\/span><span class=\"sr\">node_modules|bower_components<\/span><span class=\"se\">)<\/span><span class=\"sr\">\/<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"na\">use<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span>\r\n          <span class=\"na\">loader<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">babel-loader<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n          <span class=\"na\">options<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"na\">presets<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-env<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\r\n          <span class=\"p\">}<\/span>\r\n        <span class=\"p\">}]<\/span>\r\n      <span class=\"p\">}]<\/span>\r\n    <span class=\"p\">},<\/span>\r\n    <span class=\"na\">output<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"nx\">__dirname<\/span> <span class=\"o\">+<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/src\/<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">filename<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">client.min.js<\/span><span class=\"dl\">\"<\/span>\r\n    <span class=\"p\">},<\/span>\r\n    <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"nx\">debug<\/span> <span class=\"p\">?<\/span> <span class=\"p\">[]<\/span> <span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n      <span class=\"k\">new<\/span> <span class=\"nx\">webpack<\/span><span class=\"p\">.<\/span><span class=\"nx\">optimize<\/span><span class=\"p\">.<\/span><span class=\"nx\">OccurrenceOrderPlugin<\/span><span class=\"p\">(),<\/span>\r\n      <span class=\"k\">new<\/span> <span class=\"nx\">webpack<\/span><span class=\"p\">.<\/span><span class=\"nx\">optimize<\/span><span class=\"p\">.<\/span><span class=\"nx\">UglifyJsPlugin<\/span><span class=\"p\">({<\/span> <span class=\"na\">mangle<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span> <span class=\"na\">sourcemap<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">}),<\/span>\r\n    <span class=\"p\">]<\/span>\r\n<span class=\"p\">};<\/span>\r\n<\/code><\/pre>\n<p>\u63a5\u4e0b\u6765\uff0c\u521b\u5efasrc\/index.html\u6587\u4ef6\u3002<br \/>\n\u5728src\/index.html\u6587\u4ef6\u4e2d\uff0c\u6307\u5b9a\u52a0\u8f7d\u7531Webpack\u521b\u5efa\u7684client.min.js\u6587\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"cp\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"nt\">&lt;html&gt;<\/span>\r\n  <span class=\"nt\">&lt;head&gt;<\/span>\r\n    <span class=\"nt\">&lt;meta<\/span> <span class=\"na\">charset=<\/span><span class=\"s\">\"utf-8\"<\/span><span class=\"nt\">&gt;<\/span>\r\n    <span class=\"nt\">&lt;title&gt;<\/span>React Tutorials<span class=\"nt\">&lt;\/title&gt;<\/span>\r\n    <span class=\"c\">&lt;!-- change this up! http:\/\/www.bootstrapcdn.com\/bootswatch\/ --&gt;<\/span>\r\n    <span class=\"nt\">&lt;link<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/maxcdn.bootstrapcdn.com\/bootswatch\/3.3.6\/cosmo\/bootstrap.min.css\"<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"text\/css\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span><span class=\"nt\">\/&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/head&gt;<\/span>\r\n\r\n  <span class=\"nt\">&lt;body&gt;<\/span>\r\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"app\"<\/span><span class=\"nt\">&gt;&lt;\/div&gt;<\/span>\r\n    <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"client.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/body&gt;<\/span>\r\n<span class=\"nt\">&lt;\/html&gt;<\/span>\r\n<\/code><\/pre>\n<p>\u8ba9\u6211\u4eec\u6253\u5f00client.js\u6587\u4ef6\u5e76\u4f7f\u7528React\u7684JSX\u5728\u5c4f\u5e55\u4e0a\u5448\u73b0&#8221;Welcome!&#8221;\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Welcome!<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n<span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(&lt;<\/span><span class=\"nc\">Layout<\/span><span class=\"p\">\/&gt;,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u7528webpack\u547d\u4ee4\u6765\u521b\u5efaclient.min.js\u6587\u4ef6\uff0c\u7136\u540e\u5728Chrome\u4e2d\u6253\u5f00index.html\u6587\u4ef6\u5373\u53ef\uff0c\u51c6\u5907\u5de5\u4f5c\u5df2\u5b8c\u6210\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> webpack <span class=\"nt\">--mode<\/span> development\r\n<span class=\"go\">Hash: f97a4ff0cc28741ce49d\r\nVersion: webpack 4.6.0\r\nTime: 995ms\r\nBuilt at: 2018-04-29 11:18:20\r\n        Asset      Size  Chunks             Chunk Names\r\nclient.min.js  1.66 MiB    main  [emitted]  main\r\nEntrypoint main = client.min.js\r\n[.\/js\/client.js] 2.31 KiB {main} [built]\r\n    + 21 hidden modules\r\n\r\n<\/span><span class=\"gp\">$<\/span> google-chrome-stable .\/src\/index.html\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/42-0.png\" alt=\"React_CreateProject0001.png\" \/><\/div>\n<p>\u6b22\u8fce\uff01\u770b\u5230\u663e\u793a\u4e86\u3002\u4f7f\u7528JSX\u8fdb\u884c\u9996\u6b21\u5143\u7d20\u6e32\u67d3\u3002<br \/>\n\u5c1d\u8bd5\u901a\u8fc7\u66f4\u6539client.js\u7684\u5185\u5bb9\u6765\u786e\u8ba4\u663e\u793a\u662f\u5426\u4f1a\u53d1\u751f\u53d8\u5316\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Welcome<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span> <span class=\"nx\">works<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n\r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u8d2d\u4e70\u4e00\u4e2a\u5168\u65b0\u7684\uff0c\u5219\u4f7f\u7528webpack\u547d\u4ee4\u8fdb\u884c\u8f6c\u8bd1\uff0c\u7136\u540e\u518d\u6b21\u5728Chrome\u4e2d\u6253\u5f00\u5c4f\u5e55\u8fdb\u884c\u5c1d\u8bd5\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> webpack <span class=\"nt\">--mode<\/span> development\r\n<span class=\"c\">......\r\n<\/span>\r\n<span class=\"gp\">$<\/span> google-chrome-stable .\/src\/index.html\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/47-0.png\" alt=\"React_CreateProject0002.png\" \/><\/div>\n<p>\u8fd9\u6b21\u663e\u793a\u4e3a &#8220;It works!&#8221;\u3002<br \/>\nReact \u4f7f\u7528JSX\u8bed\u6cd5\u53ef\u4ee5\u6e32\u67d3\u5c4f\u5e55\u3002<\/p>\n<h2>\u4f7f\u7528webpack-dev-server\u542f\u52a8\u5f00\u53d1\u7528\u7684web\u670d\u52a1\u5668\u3002<\/h2>\n<p>webpack\u63d0\u4f9b\u4e86\u4e00\u4e2a\u7528\u4e8e\u5f00\u53d1\u7684web\u670d\u52a1\u5668\u3002<br \/>\n\u901a\u8fc7\u4f7f\u7528\u5f00\u53d1\u7528\u7684web\u670d\u52a1\u5668\uff08webpack-dev-server\uff09\uff0c\u60a8\u53ef\u4ee5\u540c\u65f6\u8fdb\u884c\u6346\u7ed1\u548c\u5f00\u53d1\u4e2d\u670d\u52a1\u7684\u53d1\u5e03\uff0c\u4ece\u800c\u5927\u5927\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\uff0c\u8fd9\u662f\u4e00\u4e2a\u4e0d\u5bb9\u9519\u8fc7\u7684\u529f\u80fd\u3002<\/p>\n<p>\u90a3\u4e48\u8ba9\u6211\u4eec\u6765\u8bd5\u7740\u542f\u52a8webpack-dev-server\u5427\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> .\/node_modules\/.bin\/webpack-dev-server <span class=\"nt\">--content-base<\/span> src <span class=\"nt\">--mode<\/span> development\r\n<\/code><\/pre>\n<p>\u5982\u679c\u4f7f\u7528webpack 4\u7248\u672c\u7684\u8bdd<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> webpack serve\r\n<\/code><\/pre>\n<p>\u8bf7\u4ee5\u53e6\u4e00\u79cd\u65b9\u5f0f\u6267\u884c\u3002<\/p>\n<p>\u60a8\u53ef\u4ee5\u5c1d\u8bd5\u5728Web\u6d4f\u89c8\u5668\u4e2d\u8bbf\u95eehttp:\/\/localhost:8080\u4ee5\u67e5\u770b\u5f53\u524d\u72b6\u6001\u3002\u7136\u540e\u5e94\u8be5\u4f1a\u663e\u793a\u5148\u524d\u663e\u793a\u7684It works\uff01\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/57-0.png\" alt=\"React_CreateProject0003.png\" \/><\/div>\n<p>\u8ba9\u6211\u4eec\u5728\u8fd9\u4e2a\u72b6\u6001\u4e0b\uff0c\u4fee\u6539\u5e76\u8986\u76d6\u4fdd\u5b58.\/src\/js\/client.js\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span> <span class=\"nx\">works<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Welcome<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n\r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/60-0.png\" alt=\"React_CreateProject0004.png\" \/><\/div>\n<p>\u4f7f\u7528webpack-dev-server\u53ef\u4ee5\u6709\u6548\u5730\u8fdb\u884c\u5f00\u53d1\uff0c\u8fd9\u6837\u60a8\u53ef\u4ee5\u5728Web\u9875\u9762\u4e0a\u5b9e\u65f6\u67e5\u770b\u5230\u53d8\u5316\u3002<\/p>\n<h2>\u5728npm\u811a\u672c\u4e2d\u6ce8\u518cwebpack-dev-server\u7684\u542f\u52a8\u547d\u4ee4\u3002<\/h2>\n<p>\u5c06webpack-dev-server\u547d\u4ee4\u6ce8\u518c\u4e3anpm\u811a\u672c\uff0c\u6dfb\u52a0\u5230package.json\u4e2d\uff0c\u5e76\u914d\u7f6e\u8ba9\u5b83\u901a\u8fc7npm start\u547d\u4ee4\u6765\u542f\u52a8\u3002\u5728npm\u811a\u672c\u4e2d\uff0c\u7531\u4e8e\u4f1a\u81ea\u52a8\u5c06.\/node_modules\u76ee\u5f55\u6dfb\u52a0\u5230PATH\u4e2d\uff0c\u6240\u4ee5\u53ea\u9700\u8981\u5728package.json\u4e2d\u5982\u4e0b\u914d\u7f6e\u5373\u53ef\uff1a<\/p>\n<pre class=\"post-pre\"><code> <span class=\"err\">......<\/span>\r\n   <span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"err\">+<\/span>    <span class=\"nl\">\"start\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"webpack-dev-server --content-base src --mode development --inline\"<\/span><span class=\"p\">,<\/span>\r\n<\/span>     <span class=\"nl\">\"test\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"echo <\/span><span class=\"se\">\\\"<\/span><span class=\"s2\">Error: no test specified<\/span><span class=\"se\">\\\"<\/span><span class=\"s2\"> &amp;&amp; exit 1\"<\/span>\r\n   <span class=\"p\">}<\/span><span class=\"err\">,<\/span>\r\n <span class=\"err\">......<\/span>\r\n<\/code><\/pre>\n<p>\u5f53\u9644\u52a0\u5185\u5bb9\u7f16\u8f91\u5b8c\u6210\u540e\uff0c\u5c1d\u8bd5\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u542f\u52a8webpack-dev-server\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> npm start\r\n<\/code><\/pre>\n<p>\u6211\u8ba4\u4e3a\u5982\u679c\u5728\u8fd9\u79cd\u72b6\u6001\u4e0b\uff0c\u50cf\u4e4b\u524d\u4e00\u6837\u901a\u8fc7Web\u6d4f\u89c8\u5668\u8bbf\u95eehttp:\/\/localhost:8080\uff0c\u5c31\u53ef\u4ee5\u770b\u5230\u7531React\u6e32\u67d3\u7684\u9875\u9762\u3002<\/p>\n<p>\u6211\u4eec\u5df2\u7ecf\u51c6\u5907\u597d\u4e86\u5f00\u53d1\u73af\u5883\u3002\u63a5\u4e0b\u6765\u6211\u4eec\u5c06\u5f00\u59cb\u5f00\u53d1\u4e00\u4e2a\u57fa\u4e8e\u5b9e\u9645React\u5f00\u53d1\u573a\u666f\u7684Web\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n<h1>JSX\u53ef\u4ee5\u7528\u4e2d\u6587\u7ffb\u8bd1\u4e3a\u201cJavaScript XML\u201d\u3002<\/h1>\n<p>\u6211\u7528webpack\u548cbabel\u521b\u5efa\u4e86\u4e00\u4e2a\u7b80\u5355\u7684React\u5e94\u7528\u9879\u76ee\u3002<br \/>\n\u63a5\u4e0b\u6765\u6211\u5c06\u89e3\u91ca\u4e00\u4e0b\u5728React\u5e94\u7528\u7a0b\u5e8f\u7684\u7a0b\u5e8f\u4e2d\u51fa\u73b0\u7684JSX\u3002<\/p>\n<h2>\u5173\u4e8eJSX<\/h2>\n<p>\u521b\u5efaReact\u5e94\u7528\u7a0b\u5e8f\u65f6\uff0c\u51fa\u73b0\u4e86\u4ee5\u4e0b\u63cf\u8ff0\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">......<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>It works!<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">......<\/span>\r\n<\/code><\/pre>\n<p>\u8fd9\u4e2a<\/p>\n<h1>&#8230;<\/h1>\n<p>\u7684\u5199\u6cd5\u662fHTML\u6807\u7b7e\uff0c\u5728JavaScript\u7684\u8bed\u6cd5\u4e2d\u5e76\u4e0d\u5e38\u89c1\u3002<br \/>\n\u7136\u800c\uff0c\u901a\u8fc7\u8fd9\u79cd\u5199\u6cd5\uff0c\u5b9e\u9645\u4e0a\u5c06HTML\u6807\u7b7e\u7684\u5185\u5bb9\u6e32\u67d3\u5230\u4e86\u5c4f\u5e55\u4e0a\u3002<\/p>\n<p>\u8fd9\u662f\u5728\u6267\u884cwebpack\u547d\u4ee4\u65f6\uff0c\u5185\u90e8\u4f1a\u8c03\u7528babel\u5e76\u5c06\u5176\u8f6c\u6362\u4e3a\u4e00\u79cd\u5e38\u89c1\u7684Web\u6d4f\u89c8\u5668\u53ef\u89e3\u91ca\u7684JavaScript\u8bed\u6cd5\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"p\">......<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">createElement<\/span><span class=\"p\">(<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">h1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"kc\">null<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome!<\/span><span class=\"dl\">\"<\/span>\r\n    <span class=\"p\">);<\/span>\r\n<span class=\"p\">......<\/span>\r\n<\/code><\/pre>\n<p>\u8c03\u7528React.createElement\u65b9\u6cd5\uff0c\u5e76\u5c06h1\u4f5c\u4e3aHTML\u6807\u7b7e\u540d\uff0c\u5c5e\u6027\u503c\u4e3anull\uff0c\u88ab\u6807\u7b7e\u5305\u88f9\u7684\u6587\u672cWelcome!\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u3002<br \/>\n\u5b9e\u9645\u4e0a\uff0c\u5f53\u5355\u72ec\u8fd0\u884cbabel\u65f6\uff0c\u5b83\u4f1a\u88ab\u7f16\u8bd1\u6210\u7a0d\u5fae\u590d\u6742\u4e00\u4e9b\u7684\u5f62\u5f0f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">-g<\/span> <span class=\"nt\">--no-save<\/span> @babel\/cli\r\n<span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">-g<\/span> <span class=\"nt\">--no-save<\/span> @babel\/core @babel\/preset-react @babel\/preset-env\r\n<span class=\"gp\">$<\/span> babel <span class=\"nt\">--presets<\/span> @babel\/preset-react,@babel\/preset-env .\/src\/js\/client.js\r\n<span class=\"c\">  ......\r\n<\/span><span class=\"go\">  _createClass(Layout, [{\r\n    key: \"render\",\r\n    value: function render() {\r\n      return _react2.default.createElement(\r\n        \"h1\",\r\n        null,\r\n        \"It works!\"\r\n<\/span><span class=\"gp\">      );<\/span>\r\n<span class=\"go\">    }\r\n<\/span><span class=\"gp\">  }]);<\/span>\r\n<span class=\"c\">  ......\r\n<\/span><\/code><\/pre>\n<p>\u7136\u800c\uff0c\u65e0\u8bba\u5982\u4f55\uff0c\u5b83\u5c06\u88ab\u8f6c\u6362\u4e3a\u7b26\u5408JavaScript\u8bed\u6cd5\u7684\u8bed\u6cd5\u3002<br \/>\n\u901a\u8fc7\u4f7f\u7528webpack\u548cbabel\uff0cReact\/JSX\u8bed\u6cd5\u4f1a\u88ab\u7f16\u8bd1\u4e3a\u5178\u578b\u7684JavaScript\uff0c\u4ee5\u4fbf\u5728\u4efb\u4f55Web\u6d4f\u89c8\u5668\u4e0a\u90fd\u53ef\u4ee5\u6267\u884c\u3002<\/p>\n<h2>\u5728\u63cf\u8ff0\u591a\u4e2a\u7ec4\u4ef6\u65f6\u9700\u8981\u6ce8\u610f\u7684\u8981\u70b9<\/h2>\n<p>\u5f53\u4f7f\u7528JSX\u65f6\uff0c\u60a8\u53ef\u4ee5\u5728JavaScript\u4e2d\u76f4\u63a5\u5d4c\u5165\u6807\u7b7e\uff0c\u5c31\u50cf\u6b63\u5e38\u7f16\u5199HTML\u4e00\u6837\u3002\u4e0d\u8fc7\uff0c\u9700\u8981\u6ce8\u610f\u4e00\u4e9b\u8981\u70b9\u3002\u73b0\u5728\u8ba9\u6211\u4eec\u5c06src\/js\/client.js\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u4fee\u6539\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Welcome<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span><span class=\"dl\">'<\/span><span class=\"s1\">s works!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"s1\">     );<\/span>\r\n<span class=\"s1\">   }<\/span>\r\n<span class=\"s1\"> }<\/span>\r\n\r\n<span class=\"s1\"> const app = document.getElementById(<\/span><span class=\"dl\">'<\/span><span class=\"nx\">app<\/span><span class=\"dl\">'<\/span><span class=\"s1\">);<\/span>\r\n<span class=\"s1\"> ReactDOM.render(&lt;Layout\/&gt;, app);<\/span>\r\n<\/code><\/pre>\n<p>\u6309\u4e0bGoogle Chrome\u7684F12\u952e\u6253\u5f00\u63a7\u5236\u53f0\uff0c\u60a8\u53ef\u80fd\u4f1a\u5728\u9519\u8bef\u6d88\u606f\u4e2d\u770b\u5230\u4ee5\u4e0b\u7c7b\u4f3c\u7684\u4fe1\u606f\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/84-0.png\" alt=\"React_JSXcomponent0000.png\" \/><\/div>\n<pre class=\"post-pre\"><code>SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag\r\n<\/code><\/pre>\n<p>\u53ea\u80fd\u5c06JSX\u7ec4\u4ef6\u6392\u6210\u4e24\u884c\uff0c\u5fc5\u987b\u901a\u8fc7\u7236\u7ea7\u7ec4\u4ef6\u8fdb\u884c\u5305\u88f9\u624d\u80fd\u5b8c\u6210\u3002<br \/>\n\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u8fdb\u884c\u63cf\u8ff0\uff0c\u53ef\u4ee5\u6b63\u786e\u6e32\u67d3\u9519\u8bef\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Welcome<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span><span class=\"dl\">'<\/span><span class=\"s1\">s works!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+      &lt;div&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+        &lt;h1&gt;Welcome!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+        &lt;h1&gt;It<\/span><span class=\"dl\">'<\/span><span class=\"nx\">s<\/span> <span class=\"nx\">works<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n\r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<h2>\u5173\u4e8e\u53d8\u91cf\u7684\u5904\u7406<\/h2>\n<p>\u5728JSX\u4e2d\u5d4c\u5165\u7528JavaScript\u5b9a\u4e49\u7684\u53d8\u91cf\uff0c\u53ef\u4ee5\u4f7f\u7528{\u53d8\u91cf\u540d}\u8fdb\u884c\u5d4c\u5165\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"kd\">let<\/span> <span class=\"nx\">name<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Tsutomu<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Welcome<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span><span class=\"dl\">'<\/span><span class=\"s1\">s works!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"s1\">-      &lt;\/div&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+      &lt;h1&gt;It<\/span><span class=\"dl\">'<\/span><span class=\"nx\">s<\/span> <span class=\"p\">{<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n\r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u8fd8\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528{\u6570\u5f0f}\u5c06\u6570\u5b66\u516c\u5f0f\u7684\u8ba1\u7b97\u7ed3\u679c\u5d4c\u5165\u5176\u4e2d\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span><span class=\"dl\">'<\/span><span class=\"s1\">s {name}!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+      &lt;h1&gt;It<\/span><span class=\"dl\">'<\/span><span class=\"nx\">s<\/span> <span class=\"p\">{<\/span><span class=\"mi\">1<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">2<\/span><span class=\"p\">}<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n\r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u53e6\u5916\uff0c\u60a8\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5c06\u51fd\u6570\u5d4c\u5165\u66ff\u4ee3\u53d8\u91cf\u7684\u7528\u6cd5\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span><span class=\"dl\">'<\/span><span class=\"s1\">s {1 + 2}!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+      &lt;h1&gt;It<\/span><span class=\"dl\">'<\/span><span class=\"nx\">s<\/span> <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">get_result<\/span><span class=\"p\">(<\/span><span class=\"mi\">3<\/span><span class=\"p\">)}<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"nx\">get_result<\/span><span class=\"p\">(<\/span><span class=\"nx\">num<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">return<\/span> <span class=\"mi\">1<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">num<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"p\">}<\/span>\r\n<\/span> <span class=\"p\">}<\/span>\r\n\r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u6b64\u5916\uff0c\u60a8\u53ef\u4ee5\u521b\u5efa\u533f\u540d\u51fd\u6570\u5e76\u7acb\u5373\u8c03\u7528\u5b83\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span><span class=\"dl\">'<\/span><span class=\"s1\">s {this.get_result(3)}!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+      &lt;h1&gt;It<\/span><span class=\"dl\">'<\/span><span class=\"nx\">s<\/span> <span class=\"p\">{<\/span> <span class=\"p\">((<\/span><span class=\"nx\">num<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> <span class=\"k\">return<\/span> <span class=\"mi\">1<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">num<\/span><span class=\"p\">;<\/span> <span class=\"p\">})(<\/span><span class=\"mi\">3<\/span><span class=\"p\">)<\/span> <span class=\"p\">}<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span> <span class=\"nx\">get_result<\/span><span class=\"p\">(<\/span><span class=\"nx\">num<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">return<\/span> <span class=\"mi\">1<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">num<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span> <span class=\"p\">}<\/span>\r\n<\/span> <span class=\"p\">}<\/span>\r\n\r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u6b64\u5916\uff0c\u8fd8\u53ef\u4ee5\u4f7f\u7528\u6784\u9020\u51fd\u6570\u6765\u5f15\u7528\u5728\u5176\u4e2d\u521d\u59cb\u5316\u7684\u6210\u5458\u53d8\u91cf\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Tsutomu<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"p\">}<\/span>\r\n<\/span>   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span><span class=\"dl\">'<\/span><span class=\"s1\">s { ((num) =&gt; { return 1 + num; })(3) }!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+      &lt;h1&gt;It<\/span><span class=\"dl\">'<\/span><span class=\"nx\">s<\/span> <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n\r\n <span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n <span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span><span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<h1>React \u7ec4\u4ef6\u5316<\/h1>\n<p>\u901a\u8fc7\u5c06 React \u7ec4\u4ef6\u5316\uff0c\u53ef\u4ee5\u5c06\u5185\u5bb9\u5206\u6563\u5230\u591a\u4e2a\u6587\u4ef6\u4e2d\uff0c\u800c\u4e0d\u662f\u50cf\u4e0a\u4e00\u7bc7\u6587\u7ae0\u90a3\u6837\u628a\u6240\u6709\u5185\u5bb9\u90fd\u653e\u5728\u4e00\u4e2a\u6587\u4ef6\u4e2d\uff0c\u8fd9\u6837\u53ef\u4ee5\u63d0\u9ad8\u518d\u5229\u7528\u6027\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Tsutomu<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>It's <span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"si\">}<\/span>!<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n<span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nx\">render<\/span><span class=\"p\">(&lt;<\/span><span class=\"nc\">Layout<\/span><span class=\"p\">\/&gt;,<\/span> <span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\r\n<\/code><\/pre>\n<p>\u5c06\u6b64\u6e90\u4ee3\u7801\u4e2d\u7684Layout\u7c7b\u79fb\u690d\u5230\u65b0\u7684\u6587\u4ef6src\/js\/components\/Layout.js\u4e2d\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> <span class=\"nb\">mkdir<\/span> <span class=\"nt\">-p<\/span> .\/src\/js\/components\r\n<span class=\"gp\">$<\/span> <span class=\"nb\">touch <\/span>src\/js\/components\/Layout.js\r\n<\/code><\/pre>\n<p>\u8bf7\u521b\u5efasrc\/js\/components\/Layout.js\u6587\u4ef6\u5e76\u5c06\u4ee5\u4e0b\u5185\u5bb9\u4ecesrc\/js\/client.js\u79fb\u52a8\u5230\u8be5\u6587\u4ef6\u4e2d\u3002<br \/>\n\u53e6\u5916\uff0c\u6211\u4eec\u5c06\u4f7f\u7528export\u8bed\u6cd5\uff0c\u4ee5\u4fbf\u7a0d\u540e\u53ef\u4ee5\u4ecesrc\/js\/client.js\u8fdb\u884c\u5f15\u7528\u5e76\u4ece\u5916\u90e8\u8bbf\u95ee\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Tsutomu<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>It's <span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"si\">}<\/span>!<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u6211\u4eec\u5c06\u5728 client.js \u4e2d\u5bfc\u5165\u8fd9\u4e2a Layout \u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"nx\">Layout<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/components\/Layout<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n<span class=\"hdl\"><span class=\"o\">-<\/span><span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span> <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Tsutomu<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span> <span class=\"p\">}<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span> <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span><span class=\"dl\">'<\/span><span class=\"s1\">s {this.name}!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"s1\">-    );<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"s1\">-  }<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"s1\">-}<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"s1\">- <\/span>\r\n<\/span><span class=\"s1\"> const app = document.getElementById(<\/span><span class=\"dl\">'<\/span><span class=\"nx\">app<\/span><span class=\"dl\">'<\/span><span class=\"s1\">);<\/span>\r\n<span class=\"s1\"> ReactDOM.render(&lt;Layout\/&gt;, app);<\/span>\r\n<\/code><\/pre>\n<p>\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\uff0cJSX\u7684Layout\u6807\u7b7e\u73b0\u5728\u53ef\u4ee5\u50cf\u4ee5\u524d\u4e00\u6837\u5728client.js\u4e2d\u4f7f\u7528\u3002<br \/>\n\u6267\u884cnpm start\u547d\u4ee4\u5e76\u5728http:\/\/localhost:8080\u4e0a\u786e\u8ba4\u4e4b\u524d\u7684It&#8217;s Tsutomu!\u4ecd\u7136\u663e\u793a\u3002<\/p>\n<h2>\u521b\u5efa Header\u3001Footer \u7ec4\u4ef6<\/h2>\n<p>\u521b\u5efa\u4e86Layout\u7ec4\u4ef6\u4e4b\u540e\uff0c\u63a5\u4e0b\u6765\u6211\u4eec\u8981\u521b\u5efaHeader\u548cFooter\u7ec4\u4ef6\u3002<\/p>\n<h2>\u521b\u5efaHeader\u7ec4\u4ef6<\/h2>\n<p>\u8bf7\u521b\u5efasrc\/js\/components\/Header.js\u6587\u4ef6\uff0c\u5e76\u5f00\u59cb\u5236\u4f5cHeader\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Header<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>header<span class=\"p\">&lt;\/<\/span><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u4e00\u65e6\u521b\u5efa\u4e86Header\u7ec4\u4ef6\uff0c\u5c31\u53ef\u4ee5\u5c06\u5176\u5f15\u5165\u5230Layout.js\u4e2d\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span> <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Tsutomu<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span> <span class=\"p\">}<\/span>\r\n<\/span>   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">It<\/span><span class=\"dl\">'<\/span><span class=\"s1\">s {this.name}!&lt;\/h1&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+      &lt;div&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+        &lt;Header \/&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"s1\">+      &lt;\/div&gt;<\/span>\r\n<\/span><span class=\"s1\">     );<\/span>\r\n<span class=\"s1\">   }<\/span>\r\n<span class=\"s1\"> }<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/116-0.png\" alt=\"React_CreateHeaderAndFooterComponents0000.png\" \/><\/div>\n<p>\u8bf7\u95eeheader\u662f\u5426\u6b63\u5e38\u663e\u793a\uff1f<br \/>\n\u73b0\u5728\u6211\u4eec\u5c1d\u8bd5\u5c06Layout.js\u5185\u7684Header\u7ec4\u4ef6\u589e\u52a0\u52303\u4e2a\uff0c\u4ee5\u786e\u4fdd\u53ef\u91cd\u7528\u6027\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span>       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/119-0.png\" alt=\"React_CreateHeaderAndFooterComponents0001.png\" \/><\/div>\n<h2>\u9875\u811a\u7ec4\u4ef6<\/h2>\n<p>\u63a5\u4e0b\u6765\u6211\u4eec\u5c06\u521b\u5efa Footer \u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Footer<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">footer<\/span><span class=\"p\">&gt;<\/span>footer<span class=\"p\">&lt;\/<\/span><span class=\"nt\">footer<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u6211\u4eec\u5c06\u8fd9\u4e2a\u5185\u5bb9\u50cf\u4e4b\u524d\u4e00\u6837\u5f15\u5165\u5230Layout.js\u4e2d\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"nx\">Footer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Footer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Footer<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span>       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/125-0.png\" alt=\"React_CreateHeaderAndFooterComponents0002.png\" \/><\/div>\n<h2>\u8865\u5145\uff1a\u5173\u4e8e\u5c06\u591a\u4e2a\u7ec4\u4ef6\u6392\u5217\u5728\u4e00\u8d77\u7684\u6ce8\u610f\u4e8b\u9879<\/h2>\n<p>\u5982\u679c\u9700\u8981\u5c06\u591a\u4e2a\u7ec4\u4ef6\u5e76\u5217\u6392\u5217\uff0c\u4e5f\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u6570\u7ec4\u5e76\u4f7f\u7528\u5b83\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Footer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Footer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kd\">let<\/span> <span class=\"nx\">components<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[&lt;<\/span><span class=\"nc\">Header<\/span> <span class=\"p\">\/&gt;,<\/span> <span class=\"p\">&lt;<\/span><span class=\"nc\">Footer<\/span> <span class=\"p\">\/&gt;];<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"si\">{<\/span><span class=\"nx\">components<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u8c03\u7528\u7ec4\u4ef6\u4e2d\u7684\u7ec4\u4ef6\u3002<\/h2>\n<p>\u6211\u521a\u521a\u521b\u5efa\u4e86Header\u7ec4\u4ef6\uff0c\u4f46\u662f\u8fd9\u4e2a\u7ec4\u4ef6\u4e5f\u53ef\u4ee5\u8c03\u7528\u5176\u4ed6\u7ec4\u4ef6\u3002<br \/>\n\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u5982\u679c\u8981\u4ece\u4e00\u4e2a\u7ec4\u4ef6\u4e2d\u8c03\u7528\u53e6\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u901a\u5e38\u4f1a\u521b\u5efa\u4e00\u4e2a\u7528\u4e8e\u5b58\u653e\u5176\u4ed6\u7ec4\u4ef6\u7684\u76ee\u5f55\u3002<\/p>\n<p>\u4e3a\u4e86\u5728header\u533a\u57df\u4f7f\u7528h1\u5143\u7d20\u6765\u663e\u793a\u6807\u9898\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2aTitle\u7ec4\u4ef6\u3002\u9996\u5148\uff0c\u521b\u5efasrc\/js\/components\/Header\u76ee\u5f55\uff0c\u5728\u5176\u4e2d\u521b\u5efa\u4e00\u4e2aTitle.js\u6587\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> <span class=\"nb\">mkdir<\/span> <span class=\"nt\">-p<\/span> src\/js\/components\/Header\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Title<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Welcome!<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u521b\u5efa\u7ec4\u4ef6\u540e\uff0c\u5c1d\u8bd5\u4eceHeader\u7ec4\u4ef6\u4e2d\u5f15\u7528Title\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+<\/span><span class=\"k\">import<\/span> <span class=\"nx\">Title<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header\/Title<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Header<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">header<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">header<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/header<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"nx\">header<\/span><span class=\"o\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Title<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"o\">&lt;<\/span><span class=\"sr\">\/header<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u8ba9\u6211\u4eec\u6253\u5f00Web\u6d4f\u89c8\u5668\u5e76\u786e\u8ba4\u663e\u793a\u3002\u6807\u9898\u5e94\u8be5\u663e\u793a\u5728\u6807\u9898\u4e2d\u3002<\/p>\n<p>\u4ee5\u4e0a\u662f\u5173\u4e8e\u7ec4\u4ef6\u7684\u8bf4\u660e\u3002<br \/>\n\u901a\u8fc7\u5c06\u5e03\u5c40\u7684\u5404\u4e2a\u90e8\u5206\u7ec4\u4ef6\u5316\uff0c\u53ef\u4ee5\u589e\u52a0\u91cd\u590d\u4f7f\u7528\u6027\uff0c\u5e76\u671f\u671b\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u548c\u8bbe\u8ba1\u7edf\u4e00\u6027\u3002<br \/>\n\u901a\u8fc7\u5de7\u5999\u5730\u521b\u5efa\u53ef\u91cd\u590d\u4f7f\u7528\u7684\u7ec4\u4ef6\uff0c\u6211\u4eec\u53ef\u4ee5\u9ad8\u6548\u5730\u5f00\u53d1\u5927\u578bWeb\u9879\u76ee\u7684\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n<h1>React\u7684state\u548c\u751f\u547d\u5468\u671f<\/h1>\n<p>React \u6709\u4e00\u4e2a\u53eb\u505astate\u7684\u72b6\u6001\u6570\u636e\u3002\u8fd9\u4e2astate\u662f\u7528\u6765\u4fdd\u5b58\u5e94\u7528\u7a0b\u5e8f\u7684\u72b6\u6001\u7684\uff0c\u5b83\u5b58\u653e\u4e86\u5173\u4e8e\u5982\u4f55\u6e32\u67d3\u7ec4\u4ef6\u7684\u4fe1\u606f\u3002state\u53ef\u4ee5\u901a\u8fc7setState\u65b9\u6cd5\u8fdb\u884c\u4fee\u6539\uff0c\u5f53state\u53d1\u751f\u53d8\u5316\u65f6\uff0c\u4f1a\u81ea\u52a8\u89e6\u53d1\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6\u7684\u547d\u4ee4\uff0c\u5e76\u5c06\u5176\u6392\u961f\u3002\u6b64\u5916\uff0csetState\u65b9\u6cd5\u662f\u4e00\u79cd\u7528\u4e8e\u4fee\u6539state\u72b6\u6001\u5e76\u91cd\u65b0\u6e32\u67d3\u7ec4\u4ef6\u7684\u57fa\u672c\u65b9\u6cd5\uff0c\u5728React\u4e2d\u7ecf\u5e38\u88ab\u4f7f\u7528\u3002<\/p>\n<p>\u8ba9\u6211\u4eec\u5728\u8fd9\u91cc\u5b66\u4e60React\u548cstate\u7684\u7279\u70b9\uff0c\u5e76\u5b66\u4e60\u5982\u4f55\u521b\u5efa\u5177\u6709\u54cd\u5e94\u6027\u7684\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n<h2>\u5173\u4e8e\u56fd\u5bb6<\/h2>\n<p>\u5728React\u7ec4\u4ef6\u4e2d\uff0cstate\u4f4d\u4e8e\u62e5\u6709React.Component\u7c7b\u4f5c\u4e3a\u7236\u7c7b\u7684\u7c7b\u4e2d\uff0c\u53ef\u4ee5\u901a\u8fc7this.state\u8fdb\u884c\u8bbf\u95ee\u3002<\/p>\n<p>\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u5b9e\u9645\u7ec4\u88c5\u4e00\u4e0b\u3002<br \/>\n\u8bf7\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u5b9a\u4e49\u6784\u9020\u51fd\u6570\u5e76\u8bbe\u7f6ethis.state\u7684\u521d\u59cb\u503c\uff0c\u4f7f\u7528setTimeout\u51fd\u6570\u4f7f\u5f97\u5728\u521d\u59cb\u754c\u9762\u663e\u793a\u540e1000\u6beb\u79d2\u540e\u66f4\u65b0\u5c4f\u5e55\u663e\u793a\u7684\u7a0b\u5e8f\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Footer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Footer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span><span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Tsutomu<\/span><span class=\"dl\">\"<\/span><span class=\"p\">};<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"p\">}<\/span>\r\n<\/span>   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"nx\">setTimeout<\/span><span class=\"p\">(<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">setState<\/span><span class=\"p\">({<\/span><span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Hello<\/span><span class=\"dl\">\"<\/span><span class=\"p\">});<\/span> <span class=\"p\">}<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"p\">,<\/span> <span class=\"mi\">1000<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"p\">);<\/span>\r\n<\/span>     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"o\">\/&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Footer<\/span> <span class=\"o\">\/&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5f53\u8fd9\u4e2athis.state\u7684\u6570\u636e\u901a\u8fc7setState\u65b9\u6cd5\u8bbe\u7f6e\u6216\u4fee\u6539\u540e\uff0c\u4f1a\u81ea\u52a8\u68c0\u6d4b\u66f4\u65b0\u5dee\u5f02\uff0c\u5e76\u4e14\u53ea\u91cd\u65b0\u5448\u73b0JSX\u5185\u90e8\u5fc5\u8981\u7684\u5730\u65b9\uff0c\u4f7f\u5f97dom\u91cd\u65b0\u6e32\u67d3\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/146-0.gif\" alt=\"React_StateAndPropsAndApplicationData0000.gif\" \/><\/div>\n<p>\u4e3a\u4e86\u4f7f\u5176\u66f4\u52a0\u76f4\u89c2\u6613\u61c2\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u6309\u4e0bF12\u952e\u6253\u5f00Chrome\u5f00\u53d1\u8005\u6a21\u5f0f\u5e76\u9009\u62e9Rendering\uff0c\u7136\u540e\u52fe\u9009Paint flashing\u6765\u52a8\u6001\u8f6c\u6362dom\uff0c\u5e76\u786e\u8ba4\u5c4f\u5e55\u53d8\u5316\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/148-0.png\" alt=\"React_CreateHeaderAndFooterComponents0002.png\" \/><\/div>\n<p>\u5982\u679c\u8fd9\u6837\u505a\uff0c\u53ef\u4ee5\u5b9e\u65f6\u663e\u793a\u72b6\u6001\u53d8\u5316\u7684DOM\uff0c\u5e76\u4ee5\u4e0d\u540c\u7684\u989c\u8272\u8fdb\u884c\u6807\u793a\u3002<br \/>\n\u901a\u8fc7\u89c2\u5bdf\u8fd9\u79cd\u663e\u793a\u65b9\u5f0f\uff0c\u53ef\u4ee5\u4e86\u89e3\u5230React\u5728\u91cd\u65b0\u6e32\u67d3\u65f6\u4e0d\u4f1a\u66f4\u65b0\u6574\u4e2a\u7ec4\u4ef6\uff0c\u800c\u662f\u53ea\u66f4\u65b0\u9700\u8981\u66f4\u65b0\u7684\u90e8\u5206\u3002<br \/>\n\u5982\u679c\u67e5\u770b\u76f8\u5173\u7684\u6e90\u4ee3\u7801\u4f4d\u7f6e&#8230;<\/p>\n<pre class=\"post-pre\"><code>  <span class=\"p\">......<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"si\">}<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Header<\/span> <span class=\"p\">\/&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Footer<\/span> <span class=\"p\">\/&gt;<\/span>\r\n    <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n  <span class=\"p\">......<\/span>\r\n<\/code><\/pre>\n<p>\u8fd9\u6bb5\u6587\u672c\u4ee5\u53ca\u524d\u9762\u7684\u663e\u793a\u5df2\u7ecf\u786e\u8ba4\uff0c\u867d\u7136\u6709\u4e00\u4e9b\u6587\u5b57\u4e0d\u662f\u6765\u81ea\u4e8e`this.state.name`\uff0c\u4f46\u662f\u5b83\u4eec\u4e00\u8d77\u66f4\u65b0\u7684\u53ea\u662f`Header`\u548c`Footer`\u7ec4\u4ef6\u3002React \u5728\u524d\u7aef JavaScript \u4e2d\uff0c\u5373\u4f7f\u6d89\u53ca\u6210\u672c\u9ad8\u7684 DOM \u6e32\u67d3\uff0c\u4e5f\u53ea\u4f1a\u66f4\u65b0\u5fc5\u8981\u7684\u90e8\u5206\uff0c\u56e0\u6b64\u65e0\u9700\u7f16\u5199\u590d\u6742\u7684\u5904\u7406\u903b\u8f91\uff0c\u5c31\u53ef\u4ee5\u5b9e\u73b0\u9ad8\u6548\u7684\u6e32\u67d3\u5904\u7406\u3002<\/p>\n<h2>\u5173\u4e8e\u9053\u5177<\/h2>\n<p>HTML \u6807\u7b7e\u4e2d\u7684\u5c5e\u6027\u53ef\u4ee5\u901a\u8fc7\u6307\u5b9a\u53c2\u6570\u6765\u5bf9\u6807\u7b7e\u5143\u7d20\u8fdb\u884c\u8bbe\u7f6e\uff0c\u4ece\u800c\u5728\u76f8\u540c\u7684\u5143\u7d20\u4e2d\u5b9e\u73b0\u7ec6\u5fae\u7684\u5dee\u5f02\uff0c\u4f8b\u5982\u6539\u53d8\u5927\u5c0f\u3001\u6539\u53d8\u989c\u8272\u6216\u6ce8\u518c\u4e8b\u4ef6\u7b49\u7b49\u3002<\/p>\n<p>\u5728 React \u7684 JSX \u4e2d\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7\u4f20\u9012\u53c2\u6570\u6765\u4f7f\u7528\u6bcf\u4e2a\u7ec4\u4ef6\uff0c\u5e76\u4e14\u901a\u8fc7\u8fd9\u6837\u505a\u53ef\u4ee5\u4e3a\u6bcf\u4e2a\u7ec4\u4ef6\u4f20\u9012\u5355\u72ec\u7684\u503c\u4f5c\u4e3a\u53c2\u6570\u3002<\/p>\n<p>\u5728 React \u7684 JSX \u4e2d\uff0c\u6211\u4eec\u79f0\u4e4b\u4e3a Props\u3002<\/p>\n<p>\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u7acb\u523b\u4f7f\u7528 Props \u8fdb\u884c\u7f16\u7a0b\u5427\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Footer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Footer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span> <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span><span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Tsutomu<\/span><span class=\"dl\">\"<\/span><span class=\"p\">};<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span> <span class=\"p\">}<\/span>\r\n<\/span>   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>    <span class=\"nx\">setTimeout<\/span><span class=\"p\">(<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>      <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">setState<\/span><span class=\"p\">({<\/span><span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Nakamura<\/span><span class=\"dl\">\"<\/span><span class=\"p\">});<\/span> <span class=\"p\">}<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>    <span class=\"p\">,<\/span> <span class=\"mi\">1000<\/span><span class=\"p\">);<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"kd\">const<\/span> <span class=\"nx\">title<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome Tsutomu!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span>     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Footer<\/span> <span class=\"o\">\/&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728\u4e0a\u8ff0\u7684\u6587\u4ef6\u4e2d\uff0c<\/p>\n<header title=\"{title}\"><\/header>\n<p>\u4e2d\u7684title={title} \u662f\u4e00\u4e2aprops\u3002<\/p>\n<p>\u63a5\u4e0b\u6765\u6253\u5f00Header.js\u6587\u4ef6\u3002<br \/>\n\u5728Header.js\u4e2d\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7this.props\u8bbf\u95ee\u4eceLayout.js\u4f20\u9012\u8fc7\u6765\u7684props\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Title<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header\/Title<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Header<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">);<\/span>\r\n<\/span>     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">header<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Title<\/span> <span class=\"o\">\/&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/header<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5f53\u68c0\u67e5Web\u6d4f\u89c8\u5668\u7684\u5f00\u53d1\u8005\u7a97\u53e3\u65f6\uff0cthis.props \u7684\u663e\u793a\u5982\u4e0b\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/159-0.png\" alt=\"React_StateAndPropsAndApplicationData0003.png\" \/><\/div>\n<p>\u8981\u4f20\u9012\u4e00\u4e2a\u5b57\u7b26\u4e32\uff0c\u53ef\u4ee5\u4f7f\u7528{&#8220;string&#8221;}\u7684\u5f62\u5f0f\u6765\u4f20\u9012\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Footer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Footer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"kd\">const<\/span> <span class=\"nx\">title<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome Tsutomu!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">some string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Footer<\/span> <span class=\"o\">\/&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/162-0.png\" alt=\"React_StateAndPropsAndApplicationData0004.png\" \/><\/div>\n<p>\u53e6\u5916\uff0c\u5982\u679c\u521b\u5efa\u4e86\u4e24\u4e2aHeader\u7ec4\u4ef6\u5e76\u4f20\u9012\u4e0d\u540c\u7684props\uff0c\u90a3\u4e48\u5c06\u8c03\u7528\u5177\u6709\u4e0d\u540cprops\u7684\u6bcf\u4e2aHeader\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Footer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Footer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"kd\">const<\/span> <span class=\"nx\">title<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome Tsutomu!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">some string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Thank you<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Footer<\/span> <span class=\"o\">\/&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u6211\u4eec\u5df2\u7ecf\u7406\u89e3\u4e86Props\u7684\u5916\u90e8\u8981\u6c42\uff0c\u4e0b\u4e00\u6b65\u662f\u4eceHeader\u7ec4\u4ef6\u4f20\u9012props\u5230Title\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Title<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header\/Title<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Header<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>  <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">);<\/span>\r\n<\/span>    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">header<\/span><span class=\"o\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">Title<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">Title<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">header<\/span><span class=\"o\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728\u7ec4\u4ef6\u4e2d\uff0c\u6211\u4eec\u53ef\u4ee5\u8fd9\u6837\u5199\uff0c\u5e76\u4f7f\u7528title props\u5c06\u4f20\u9012\u7684\u503c\u5728<\/p>\n<h1>\u6807\u7b7e\u4e2d\u663e\u793a\u51fa\u6765\u3002<\/h1>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Title<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>    <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Welcome<\/span><span class=\"o\">!&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>    <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u4fdd\u5b58\u5e76\u5728Web\u6d4f\u89c8\u5668\u4e0a\u901a\u8fc7http:\/\/localhost:8080\u8fdb\u884c\u5c4f\u5e55\u786e\u8ba4\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/170-0.png\" alt=\"React_StateAndPropsAndApplicationData0005.png\" \/><\/div>\n<p>\u4f1a\u663e\u793a\u4e24\u4e2a\u4e0d\u540c\u6807\u9898\u7684\u7ec4\u4ef6\u3002<br \/>\n\u901a\u8fc7\u4f7f\u7528props\uff0c\u53ef\u4ee5\u5927\u5927\u63d0\u9ad8\u4e00\u4e2a\u7ec4\u4ef6\u7684\u53ef\u91cd\u7528\u6027\u3002<\/p>\n<h2>state \u548c props \u7684\u7ec4\u5408<\/h2>\n<p>\u6211\u4eec\u4e5f\u53ef\u4ee5\u5c06state\u548cprops\u7ec4\u5408\u5728\u4e00\u8d77\u4f7f\u7528\u3002<br \/>\n\u8ba9\u6211\u4eec\u5c06Layout.js\u7684\u4ee3\u7801\u4fee\u6539\u5982\u4e0b\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Footer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Footer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span><span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome<\/span><span class=\"dl\">\"<\/span><span class=\"p\">};<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"p\">}<\/span>\r\n<\/span>   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"kd\">const<\/span> <span class=\"nx\">title<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome Tsutomu!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"nx\">setTimeout<\/span><span class=\"p\">(<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">setState<\/span><span class=\"p\">({<\/span><span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome Tsutomu!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">});<\/span> <span class=\"p\">},<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>     <span class=\"mi\">2000<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"p\">);<\/span>\r\n<\/span>     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Thank you<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Footer<\/span> <span class=\"o\">\/&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u901a\u8fc7\u5c06props\u5e94\u7528\u4e8estate\u7684\u503c\uff0c\u53ef\u4ee5\u5b9e\u73b0\u53ea\u6709\u7b2c\u4e00\u4e2aHeader\u7ec4\u4ef6\u5728\u663e\u793a\u540e2\u79d2\u66f4\u6539\u6807\u9898\u3002<\/p>\n<h1>\u5173\u4e8e\u6d3b\u52a8\u548c\u6570\u636e\u53d8\u66f4<\/h1>\n<p>\u6253\u5f00Header.js\u6587\u4ef6\uff0c\u6dfb\u52a0\u4e00\u4e2a\u8f93\u5165\u6846\uff0c\u901a\u8fc7\u7528\u6237\u5728\u8868\u5355\u4e2d\u8f93\u5165\u7684\u6570\u636e\u5b9e\u65f6\u89e6\u53d1\u4e8b\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Title<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header\/Title<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Header<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">header<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Title<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">input<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span>       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/header<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728\u4e4b\u524d\u7684\u7f16\u8f91\u4e2d\uff0cLayout.js\u4e2d\u6709\u4e24\u4e2aHeader\u7ec4\u4ef6\u7684\u8bb0\u5f55\uff0c\u6240\u4ee5\u6211\u4eec\u9700\u8981\u5220\u9664\u4e00\u4e2a\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Footer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Footer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n     <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span><span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome<\/span><span class=\"dl\">\"<\/span><span class=\"p\">};<\/span>\r\n   <span class=\"p\">}<\/span>\r\n   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"nx\">setTimeout<\/span><span class=\"p\">(<\/span>\r\n       <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">called<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">setState<\/span><span class=\"p\">({<\/span><span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome Tsutomu!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">});<\/span> <span class=\"p\">},<\/span>\r\n       <span class=\"mi\">2000<\/span>\r\n     <span class=\"p\">);<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Thank you<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Footer<\/span> <span class=\"o\">\/&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u8ba9\u6211\u4eec\u6765\u786e\u8ba4\u4e00\u4e0b http:\/\/localhost:8080 \u7684\u60c5\u51b5\u3002<br \/>\n\u7136\u540e\uff0c\u9875\u9762\u4f1a\u51fa\u73b0\u5982\u4e0b\u7684\u60c5\u51b5\uff0cTitle \u4e2d\u4f1a\u6dfb\u52a0\u4e00\u4e2a input\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/182-0.png\" alt=\"React_EventAndDataChanges0000.png\" \/><\/div>\n<p>\u7136\u800c\uff0c\u5982\u679c\u4fdd\u6301\u5f53\u524d\u72b6\u6001\uff0c\u5373\u4f7f\u5728\u8868\u5355\u4e2d\u8f93\u5165\u6587\u5b57\u4e5f\u4e0d\u4f1a\u89e6\u53d1\u4efb\u4f55\u4e8b\u4ef6\u3002<br \/>\n\u63a5\u4e0b\u6765\uff0c\u8ba9\u6211\u4eec\u6dfb\u52a0\u4e00\u4e2a\u5904\u7406\u7a0b\u5e8f\uff0c\u4ee5\u83b7\u53d6\u5728\u6b64\u8f93\u5165\u8868\u5355\u4e2d\u8f93\u5165\u7684\u503c\uff0c\u5e76\u5b9e\u65f6\u6e32\u67d3\u6807\u9898\u3002<\/p>\n<h2>\u6dfb\u52a0\u7528\u4e8e\u83b7\u53d6\u8f93\u5165\u5185\u5bb9\u7684\u5904\u7406\u7a0b\u5e8f<\/h2>\n<p>\u8ba9\u6211\u4eec\u5728Layout.js\u4e2d\u521b\u5efa\u4e00\u4e2achangeTitle\u65b9\u6cd5\uff0c\u5e76\u5c06\u5b83\u4f20\u9012\u7ed9Header\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n <span class=\"k\">import<\/span> <span class=\"nx\">Footer<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Footer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n <span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"kd\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n     <span class=\"k\">super<\/span><span class=\"p\">();<\/span>\r\n     <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span><span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome<\/span><span class=\"dl\">\"<\/span><span class=\"p\">};<\/span>\r\n   <span class=\"p\">}<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"nx\">changeTitle<\/span><span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">setState<\/span><span class=\"p\">({<\/span><span class=\"nx\">title<\/span><span class=\"p\">});<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"p\">}<\/span>\r\n<\/span>   <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"nx\">setTimeout<\/span><span class=\"p\">(<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">called<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">setState<\/span><span class=\"p\">({<\/span><span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Welcome Tsutomu!<\/span><span class=\"dl\">\"<\/span><span class=\"p\">});<\/span> <span class=\"p\">},<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>     <span class=\"mi\">2000<\/span>\r\n<\/span><span class=\"hdl\"><span class=\"o\">- <\/span>   <span class=\"p\">);<\/span>\r\n<\/span>     <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"nx\">Header<\/span> <span class=\"nx\">changeTitle<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">changeTitle<\/span><span class=\"p\">.<\/span><span class=\"nx\">bind<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">)}<\/span> <span class=\"nx\">title<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;<\/span>\r\n<\/span>         <span class=\"o\">&lt;<\/span><span class=\"nx\">Footer<\/span> <span class=\"o\">\/&gt;<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;<\/span>\r\n     <span class=\"p\">);<\/span>\r\n   <span class=\"p\">}<\/span>\r\n <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u4e0a\u8ff0\u7684changeTitle\u51fd\u6570\u7684this.setState({title}); \u8fd9\u79cd\u5199\u6cd5\u662fES6\u7684\u5199\u6cd5\uff0c\u4e0ethis.setState({title: title}); \u6709\u76f8\u540c\u7684\u610f\u601d\u3002<br \/>\n\u6b64\u5916\uff0c\u901a\u8fc7\u5c06\u65b9\u6cd5\u901a\u8fc7props\u4f20\u9012\u7ed9Header\u7ec4\u4ef6\u4f5c\u4e3a<\/p>\n<header>\uff0c\u5728Header.js\u4e2d\u5c31\u53ef\u4ee5\u8c03\u7528Layout.js\u7684changeTitle(title)\u65b9\u6cd5\u3002\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u7f16\u8f91Header.js\u3002<br \/>\n\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\uff0cHeader\u7ec4\u4ef6\u548cTitle\u7ec4\u4ef6\u53ea\u9700\u8981\u76f4\u63a5\u663e\u793aLayout\u7ec4\u4ef6\u4f20\u9012\u7684\u503c\uff0c\u800c\u65e0\u9700\u7ba1\u7406Layout\u7ec4\u4ef6\u4f55\u65f6\u4f20\u9012\u4ec0\u4e48\u503c\u3002<\/p>\n<pre class=\"post-pre\"><code> <span class=\"kn\">import<\/span> <span class=\"nn\">React<\/span> <span class=\"n\">from<\/span> <span class=\"s\">\"react\"<\/span><span class=\"o\">;<\/span>\r\n <span class=\"kn\">import<\/span> <span class=\"nn\">Title<\/span> <span class=\"n\">from<\/span> <span class=\"s\">\".\/Header\/Title\"<\/span><span class=\"o\">;<\/span>\r\n\r\n <span class=\"n\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Header<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"o\">.<\/span><span class=\"na\">Component<\/span> <span class=\"o\">{<\/span>\r\n<span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"n\">handleChange<\/span><span class=\"o\">(<\/span><span class=\"n\">e<\/span><span class=\"o\">)<\/span> <span class=\"o\">{<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"kd\">const<\/span> <span class=\"n\">title<\/span> <span class=\"o\">=<\/span> <span class=\"n\">e<\/span><span class=\"o\">.<\/span><span class=\"na\">target<\/span><span class=\"o\">.<\/span><span class=\"na\">value<\/span><span class=\"o\">;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>   <span class=\"k\">this<\/span><span class=\"o\">.<\/span><span class=\"na\">props<\/span><span class=\"o\">.<\/span><span class=\"na\">changeTitle<\/span><span class=\"o\">(<\/span><span class=\"n\">title<\/span><span class=\"o\">);<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span> <span class=\"o\">}<\/span>\r\n<\/span>   <span class=\"n\">render<\/span><span class=\"o\">()<\/span> <span class=\"o\">{<\/span>\r\n     <span class=\"n\">console<\/span><span class=\"o\">.<\/span><span class=\"na\">log<\/span><span class=\"o\">(<\/span><span class=\"k\">this<\/span><span class=\"o\">.<\/span><span class=\"na\">props<\/span><span class=\"o\">);<\/span>\r\n     <span class=\"k\">return<\/span> <span class=\"o\">(<\/span>\r\n       <span class=\"o\">&lt;<\/span><span class=\"n\">header<\/span><span class=\"o\">&gt;<\/span>\r\n         <span class=\"o\">&lt;<\/span><span class=\"nc\">Title<\/span> <span class=\"n\">title<\/span><span class=\"o\">={<\/span><span class=\"k\">this<\/span><span class=\"o\">.<\/span><span class=\"na\">props<\/span><span class=\"o\">.<\/span><span class=\"na\">title<\/span><span class=\"o\">}<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>       <span class=\"o\">&lt;<\/span><span class=\"n\">input<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>       <span class=\"o\">&lt;<\/span><span class=\"n\">input<\/span> <span class=\"n\">value<\/span><span class=\"o\">={<\/span><span class=\"k\">this<\/span><span class=\"o\">.<\/span><span class=\"na\">props<\/span><span class=\"o\">.<\/span><span class=\"na\">title<\/span><span class=\"o\">}<\/span> <span class=\"n\">onChange<\/span><span class=\"o\">={<\/span><span class=\"k\">this<\/span><span class=\"o\">.<\/span><span class=\"na\">handleChange<\/span><span class=\"o\">.<\/span><span class=\"na\">bind<\/span><span class=\"o\">(<\/span><span class=\"k\">this<\/span><span class=\"o\">)}<\/span> <span class=\"o\">\/&gt;<\/span>\r\n<\/span>       <span class=\"o\">&lt;\/<\/span><span class=\"n\">header<\/span><span class=\"o\">&gt;<\/span>\r\n     <span class=\"o\">);<\/span>\r\n   <span class=\"o\">}<\/span>\r\n <span class=\"o\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728\u8fd9\u4e2a\u72b6\u6001\u4e0b\uff0c\u6253\u5f00http:\/\/localhost:8080 \u5e76\u5c1d\u8bd5\u5728\u8f93\u5165\u6846\u4e2d\u8f93\u5165\u6587\u672c\u3002<br \/>\n\u8f93\u5165\u6846\u4e2d\u8f93\u5165\u7684\u503c\u5c06\u5b9e\u65f6\u53cd\u6620\u5728\u6807\u9898\u4e0a\uff0c\u5e76\u663e\u793a\u5728\u5c4f\u5e55\u4e0a\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/191-0.gif\" alt=\"React_EventAndDataChanges0001.gif\" \/><\/div>\n<p>\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5b66\u4e60\u4e86\u4f7f\u7528React\u8fdb\u884c\u57fa\u672c\u72b6\u6001\u7ba1\u7406\u548c\u6e32\u67d3\u3002\u5f53React\u7684\u72b6\u6001\u53d1\u751f\u6539\u53d8\u65f6\uff0c\u72b6\u6001\u4f1a\u7acb\u5373\u91cd\u65b0\u6e32\u67d3\uff0c\u4f60\u6709\u6ca1\u6709\u5bf9\u6b64\u6709\u6240\u4e86\u89e3\u5462\uff1f\u76ee\u524d\uff0c\u4f60\u5df2\u7ecf\u53ef\u4ee5\u65e0\u95ee\u9898\u5730\u4f7f\u7528React\u521b\u5efa\u7b80\u5355\u7684\u5e94\u7528\u7a0b\u5e8f\u4e86\u3002<\/p>\n<p>\u63a5\u4e0b\u6765\u6211\u4eec\u5c06\u5b66\u4e60\u4f7f\u7528React Router \u5b9e\u73b0\u5185\u5bb9\u5217\u8868\u663e\u793a\u548c\u901a\u8fc7\u4e0d\u540c\u7684\u8def\u5f84\u5728SPA\u4e2d\u5b9e\u73b0\u7f51\u9875\u7684\u65b9\u6cd5\u3002<\/p>\n<h2>\u9644\u6ce8\uff1a\u5173\u4e8eLayout\u7ec4\u4ef6\u4e2d\u7684bind(this)\u8fd9\u4e00\u63cf\u8ff0<\/h2>\n<p>\u5728\u5c06\u65b9\u6cd5\u4eceLayout\u7ec4\u4ef6\u4f20\u9012\u7ed9Header\u7ec4\u4ef6\u65f6\uff0c\u6211\u4eec\u4f7f\u7528\u4e86<\/p>\n<header>\u6765\u8c03\u7528bind(this)\u65b9\u6cd5\u8fdb\u884c\u4f20\u9012\u3002\u7136\u800c\uff0c\u5982\u679c\u6211\u4eec\u4e0d\u8fd9\u6837\u505a\uff0c\u800c\u662f\u4f7f\u7528<\/p>\n<header>\uff0c\u867d\u7136\u51fd\u6570\u672c\u8eab\u4f1a\u4f20\u9012\u5230Header\u7ec4\u4ef6\uff0c\u4f46\u5f53\u4eceHeader\u7ec4\u4ef6\u8c03\u7528\u8be5\u51fd\u6570\u65f6\uff0c\u5b83\u5c06\u53d8\u6210\u4e00\u4e2a\u4e0eLayout\u4f5c\u7528\u57df\u4e2d\u8c03\u7528\u7684\u51fd\u6570\u4e0d\u540c\u7684\u51fd\u6570\u3002\u56e0\u6b64\uff0c\u5982\u679c\u6211\u4eec\u5c06changeTitle\u51fd\u6570\u4f20\u9012\u7ed9Header\u7ec4\u4ef6\u5e76\u8c03\u7528\u5b83&#8230;<\/p>\n<pre class=\"post-pre\"><code>  <span class=\"nx\">changeTitle<\/span><span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">setState<\/span><span class=\"p\">({<\/span><span class=\"nx\">title<\/span><span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u5728\u4e0a\u8ff0\u7684\u4ee3\u7801\u4e2d\uff0cthis.setState({title}); \u4e2d\u7684this \u4e0d\u518d\u662fLayout \u5b9e\u4f8b\u3002<br \/>\n\u56e0\u6b64\uff0csetState\u51fd\u6570\u4e5f\u4e0d\u518d\u662fLayout\u7c7b\u5185\u7684\u51fd\u6570\uff0c\u53ef\u80fd\u4f1a\u4ea7\u751f\u610f\u60f3\u4e0d\u5230\u7684\u884c\u4e3a\u3002<br \/>\n\u4e3a\u4e86\u786e\u4fdd\u80fd\u591f\u786e\u5207\u8c03\u7528Layout\u5b9e\u4f8b\u7684setState\u51fd\u6570\uff0c\u6211\u4eec\u9700\u8981\u5c06bind\u51fd\u6570\u7684\u53c2\u6570this\uff08Layout\u5b9e\u4f8b\uff09\u4e0e<\/p>\n<header>\u8fdb\u884c\u7ed1\u5b9a\uff0c\u8fd9\u6837\u65e0\u8bba\u8be5\u51fd\u6570\u662f\u5426\u5728Header\u7ec4\u4ef6\u5185\u6216\u8005\u5176\u4ed6\u4efb\u4f55\u5730\u65b9\u8c03\u7528\uff0c\u90fd\u80fd\u8c03\u7528Layout\u5b9e\u4f8b\u7684changeTitle\u51fd\u6570\u3002\u53e6\u5916\uff0c\u5f53\u7136\u53ef\u4ee5\u8fd9\u6837\u505a\uff1a<\/p>\n<header>\uff0c\u8fd9\u6837\u53ef\u4ee5\u5c06changeTitle\u51fd\u6570\u4ee5someInstance\u4f5c\u7528\u57df\u7684\u65b9\u5f0f\u4f20\u9012\u8fdb\u53bb\u3002<\/p>\n<h2>\u88dc\u5145\uff1a\u53ef\u4ee5\u901a\u8fc7public class fields\u7684\u8bed\u6cd5\u6765\u7701\u7565bind\u7684\u63cf\u8ff0\u3002<\/h2>\n<p>\u901a\u8fc7\u4f7f\u7528\u516c\u5171\u7c7b\u5b57\u6bb5\u8bed\u6cd5\uff0c\u53ef\u4ee5\u7701\u7565\u5bf9\u7ed1\u5b9a\u7684\u58f0\u660e\u3002<\/p>\n<pre class=\"post-pre\"><code>  <span class=\"p\">...<\/span>\r\n  <span class=\"nx\">changeTitle<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>    <span class=\"cm\">\/* &lt;- \u95a2\u6570\u306e\u5ba3\u8a00\u3092\u3053\u306e\u3088\u3046\u306b\u5909\u3048\u308b *\/<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">setState<\/span><span class=\"p\">({<\/span><span class=\"nx\">title<\/span><span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Header<\/span> <span class=\"na\">changeTitle<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">changeTitle<\/span><span class=\"si\">}<\/span> <span class=\"na\">title<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>    \/* <span class=\"p\">&lt;<\/span><span class=\"err\">-<\/span> <span class=\"na\">bind<\/span> <span class=\"err\">\u306e\u8a18\u8f09\u304c\u7701\u7565\u3067\u304d\u308b<\/span> <span class=\"err\">*\/<\/span>\r\n        <span class=\"err\">&lt;<\/span><span class=\"na\">Footer<\/span> <span class=\"p\">\/&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<ul class=\"post-ul\">2019-04-30 @6in \u3055\u3093\u306e\u30b3\u30e1\u30f3\u30c8\u3088\u308a\u8ffd\u8a18:<\/ul>\n<p>\u9700\u8981\u5b89\u88c5@babel\/plugin-proposal-class-properties\u63d2\u4ef6\uff0c\u5e76\u5c06\u5176\u4f5c\u4e3a.babelrc\u6216webpack.config.js\u4e2d\u7684\u63d2\u4ef6\u6307\u5b9a\uff0c\u4ee5\u4f7f\u7528public class fields\u8bed\u6cd5\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"gp\">$<\/span> npm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> @babel\/plugin-proposal-class-properties\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"p\">{<\/span>\r\n  <span class=\"dl\">\"<\/span><span class=\"s2\">plugins<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">@babel\/plugin-proposal-class-properties<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">loose<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}]<\/span>\r\n  <span class=\"p\">]<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code>       <span class=\"p\">......<\/span>\r\n       <span class=\"nx\">use<\/span><span class=\"p\">:<\/span> <span class=\"p\">[{<\/span>\r\n         <span class=\"na\">loader<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">babel-loader<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n         <span class=\"na\">options<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n<span class=\"hdl\"><span class=\"o\">- <\/span>         <span class=\"na\">presets<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-env<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"na\">presets<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-react<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@babel\/preset-env<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>           <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@babel\/plugin-proposal-class-properties<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">loose<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">}]<\/span>\r\n<\/span><span class=\"hil\"><span class=\"o\">+ <\/span>         <span class=\"p\">]<\/span>\r\n<\/span>         <span class=\"p\">}<\/span>\r\n       <span class=\"p\">......<\/span>\r\n<\/code><\/pre>\n<p>\u8bf7\u5728\u5b8c\u6210\u4e4b\u540e\u91cd\u65b0\u8fd0\u884cnpm start\u3002<\/p>\n<h2>\u88dc\u5145\uff1a\u4f7f\u7528\u7bad\u5934\u51fd\u6570\u53ef\u4ee5\u7701\u7565bind\u7684\u58f0\u660e\u3002<\/h2>\n<p>\u4f7f\u7528\u7bad\u5934\u51fd\u6570\u4e5f\u53ef\u4ee5\u7701\u7565bind\u7684\u58f0\u660e\u3002<\/p>\n<pre class=\"post-pre\"><code>  <span class=\"p\">...<\/span>\r\n  <span class=\"nx\">changeTitle<\/span><span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">setState<\/span><span class=\"p\">({<\/span><span class=\"nx\">title<\/span><span class=\"p\">});<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"nx\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Header<\/span> <span class=\"na\">changeTitle<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">handleClick<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span> <span class=\"na\">title<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"si\">}<\/span> <span class=\"p\">\/&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Footer<\/span> <span class=\"p\">\/&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u8fd9\u79cd\u5199\u6cd5\u7684\u7f3a\u70b9\u901a\u5e38\u4e0d\u4f1a\u6210\u4e3a\u95ee\u9898\uff0c\u4f46\u6709\u4e00\u4e9b\u6ce8\u610f\u70b9\u3002<\/p>\n<p>\u4f7f\u7528\u8fd9\u79cd\u65b9\u6cd5\u65f6\uff0c\u6bcf\u6b21\u8c03\u7528render\u65b9\u6cd5\u90fd\u4f1a\u751f\u6210changeTitle\u51fd\u6570\u3002<br \/>\n\u800c\u4e14\uff0c\u5982\u679c\u5b50\u7ec4\u4ef6\u901a\u8fc7prop\u5e76\u4e14\u4ee5\u8fd9\u79cd\u65b9\u5f0f\u4f20\u9012\u51fd\u6570\uff0c\u5219\u5b50\u7ec4\u4ef6\u5c06\u59cb\u7ec8\u91cd\u65b0\u6e32\u67d3\uff0c\u9664\u975e\u5355\u72ec\u7f16\u5199shouldComponentUpdate()\u65b9\u6cd5\u3002<br \/>\n\u7531\u4e8e\u8fd9\u4e9b\u95ee\u9898\uff0c\u901a\u5e38\u5efa\u8bae\u4f7f\u7528bind\u6216public class fields\u8bed\u6cd5\u7684\u65b9\u6cd5\u3002<\/p>\n<h1>\u8bf7\u63d0\u4f9b\u4ee5\u4e0b\u9009\u9879\u7684\u4e2d\u6587\u672c\u5730\u5316\uff1a<\/h1>\n<p>React A JavaScript library for building user interfaces<\/p>\n<p>https:\/\/reactjs.org\/<\/p>\n<p>REACT JS TUTORIAL #1 &#8211; Reactjs Javascript Introduction &amp; Workspace Setup<\/p>\n<p><iframe loading=\"lazy\" title=\"REACT JS TUTORIAL #1 - Reactjs Javascript Introduction &amp; Workspace Setup\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/MhkGQAoc7bc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>REACT JS TUTORIAL #2 &#8211; Reactjs Components &amp; Rendering<\/p>\n<p><iframe loading=\"lazy\" title=\"REACT JS TUTORIAL #2 - Reactjs Components &amp; Rendering\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/fd2Cayhez58?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>REACT JS TUTORIAL #3 &#8211; Composing Multiple React.js Components<\/p>\n<p><iframe loading=\"lazy\" title=\"REACT JS TUTORIAL #3 - Composing Multiple React.js Components\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/vu_rIMPROoQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Best way to build\/compile\/deploy ReactJS to production<\/p>\n<p>https:\/\/stackoverflow.com\/questions\/37152773\/best-way-to-build-compile-deploy-reactjs-to-production<\/p>\n<p>Handling Events<\/p>\n<p>https:\/\/reactjs.org\/docs\/handling-events.html<\/p>\n<p>Function.prototype.bind()<\/p>\n<p>https:\/\/developer.mozilla.org\/ja\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Function\/bind<\/p>\n<p>Public Class Fields saves sooo many keystrokes in React code<\/p>\n<p>https:\/\/www.peterbe.com\/plog\/public-class-fields<\/p>\n<\/header>\n<\/header>\n<\/header>\n<\/header>\n<\/header>\n","protected":false},"excerpt":{"rendered":"<p>\u8868\u683c\u76ee\u5f55 \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React \u306e\u57fa\u672c \u2190\u2605\u3053\u3053 \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Rea [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38427","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60React\u5165\u95e8-React\u7684\u57fa\u7840\u77e5\u8bc6 - Blog - Silicon Cloud<\/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:\/\/www.silicloud.com\/zh\/blog\/\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60react\u5165\u95e8-react\u7684\u57fa\u7840\u77e5\u8bc6\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60React\u5165\u95e8-React\u7684\u57fa\u7840\u77e5\u8bc6\" \/>\n<meta property=\"og:description\" content=\"\u8868\u683c\u76ee\u5f55 \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React \u306e\u57fa\u672c \u2190\u2605\u3053\u3053 \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Rea [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60react\u5165\u95e8-react\u7684\u57fa\u7840\u77e5\u8bc6\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-06T09:21:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T10:54:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/42-0.png\" \/>\n<meta name=\"author\" content=\"\u96c5, \u609f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u96c5, \u609f\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/\",\"name\":\"\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60React\u5165\u95e8-React\u7684\u57fa\u7840\u77e5\u8bc6 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-05-06T09:21:14+00:00\",\"dateModified\":\"2024-04-30T10:54:46+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60React\u5165\u95e8-React\u7684\u57fa\u7840\u77e5\u8bc6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6\",\"name\":\"\u96c5, \u609f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"caption\":\"\u96c5, \u609f\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<meta property=\"og:video\" content=\"https:\/\/www.youtube.com\/embed\/MhkGQAoc7bc\" \/>\n<meta property=\"og:video:type\" content=\"text\/html\" \/>\n<meta property=\"og:video:duration\" content=\"619\" \/>\n<meta property=\"og:video:width\" content=\"480\" \/>\n<meta property=\"og:video:height\" content=\"270\" \/>\n<meta property=\"ya:ovs:adult\" content=\"false\" \/>\n<meta property=\"ya:ovs:upload_date\" content=\"2023-05-06T09:21:14+00:00\" \/>\n<meta property=\"ya:ovs:allow_embed\" content=\"true\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60React\u5165\u95e8-React\u7684\u57fa\u7840\u77e5\u8bc6 - Blog - Silicon Cloud","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:\/\/www.silicloud.com\/zh\/blog\/\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60react\u5165\u95e8-react\u7684\u57fa\u7840\u77e5\u8bc6\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60React\u5165\u95e8-React\u7684\u57fa\u7840\u77e5\u8bc6","og_description":"\u8868\u683c\u76ee\u5f55 \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c React \u306e\u57fa\u672c \u2190\u2605\u3053\u3053 \u4eca\u304b\u3089\u59cb\u3081\u308bReact\u5165\u9580 \u301c Rea [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60react\u5165\u95e8-react\u7684\u57fa\u7840\u77e5\u8bc6\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-05-06T09:21:14+00:00","article_modified_time":"2024-04-30T10:54:46+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33e137434c4406c66d59\/42-0.png"}],"author":"\u96c5, \u609f","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u96c5, \u609f","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/","name":"\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60React\u5165\u95e8-React\u7684\u57fa\u7840\u77e5\u8bc6 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-05-06T09:21:14+00:00","dateModified":"2024-04-30T10:54:46+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4ece\u73b0\u5728\u5f00\u59cb\u5b66\u4e60React\u5165\u95e8-React\u7684\u57fa\u7840\u77e5\u8bc6"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6","name":"\u96c5, \u609f","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","caption":"\u96c5, \u609f"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8e%e7%8e%b0%e5%9c%a8%e5%bc%80%e5%a7%8b%e5%ad%a6%e4%b9%a0react%e5%85%a5%e9%97%a8-react%e7%9a%84%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]},"og_video":"https:\/\/www.youtube.com\/embed\/MhkGQAoc7bc","og_video_type":"text\/html","og_video_duration":"619","og_video_width":"480","og_video_height":"270","ya_ovs_adult":"false","ya_ovs_upload_date":"2023-05-06T09:21:14+00:00","ya_ovs_allow_embed":"true"},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38427"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38427\/revisions"}],"predecessor-version":[{"id":93682,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38427\/revisions\/93682"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}