{"id":34168,"date":"2024-11-25T15:59:42","date_gmt":"2024-11-25T07:59:42","guid":{"rendered":"https:\/\/fwq.ai\/blog\/34168\/"},"modified":"2024-11-25T15:59:42","modified_gmt":"2024-11-25T07:59:42","slug":"react%e5%a6%82%e4%bd%95%e6%9e%84%e5%bb%ba%e5%b0%8f%e7%a8%8b%e5%ba%8f%ef%bc%9f%e4%b8%a4%e7%a7%8d%e5%ae%9e%e7%8e%b0%e6%96%b9%e6%a1%88%e5%88%86%e4%ba%ab","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/34168\/","title":{"rendered":"React\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\u5206\u4eab"},"content":{"rendered":"<p>react\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e0b\u9762\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u901a\u8fc71500\u884c\u4ee3\u7801\u63ed\u79d8react\u5982\u4f55\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\uff0c\u4ecb\u7ecd\u4e00\u4e0breact \u6784\u5efa\u5c0f\u7a0b\u5e8f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/024\/61c3db46d72dc398.png\" class=\"aligncenter\" title=\"React\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\u5206\u4eab\u63d2\u56fe\" alt=\"React\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\u5206\u4eab\u63d2\u56fe\" \/><\/p>\n<p>\u4f60\u662f\u5426\u4f7f\u7528\u8fc7 \u3001 \u7c7b\u4f3c\u7684\u6846\u67b6\uff1f\u4f60\u662f\u5426\u60f3\u4e86\u89e3\u8fd9\u7c7b\u6846\u67b6\u5982\u4f55\u5b9e\u73b0 React \u4ee3\u7801\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\uff1f\u5982\u679c\u662f\u7684\u8bdd\uff0c\u90a3\u4e48\u4e5f\u8bb8\u4f60\u53ef\u4ee5\u82b1\u559d\u4e00\u676f\u5496\u5561\u7684\u65f6\u95f4\u7ee7\u7eed\u5f80\u4e0b\u9605\u8bfb\uff0c\u672c\u6587\u5c06\u901a\u8fc7\u4e24\u79cd\u65b9\u6848\u5b9e\u73b0 React \u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u3002\u5982\u679c\u4f60\u73b0\u5728\u5c31\u60f3\u9605\u8bfb\u8fd91500\u884c\u7684\u5b9e\u73b0\u4ee3\u7801\uff0c\u90a3\u4e48\u53ef\u4ee5\u76f4\u63a5\u70b9\u51fb\u8fdb\u884c\u83b7\u53d6\uff08\u4e5f\u8bb8\u8981\u591a\u559d\u51e0\u676f\u5496\u5561\uff09\u3002<\/p>\n<h2>\u9879\u76ee\u63cf\u8ff0<\/h2>\n<p>\u4e3a\u4e86\u66f4\u6e05\u6670\u63cf\u8ff0\u5b9e\u73b0\u8fc7\u7a0b\uff0c\u6211\u4eec\u628a\u5b9e\u73b0\u65b9\u6848\u5f53\u4f5c\u4e00\u4e2a\u9879\u76ee\u6765\u5bf9\u5f85\u3002<br \/>\u9879\u76ee\u9700\u6c42\uff1a\u4f7f\u5982\u4e0b\u8ba1\u6570\u5668\u529f\u80fd\u7684 React \u4ee3\u7801\u8fd0\u884c\u5230\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u3002<\/p>\n<pre>import&nbsp;React,&nbsp;{&nbsp;Component&nbsp;}&nbsp;from&nbsp;'react'\nimport&nbsp;{&nbsp;View,&nbsp;Text,&nbsp;Button&nbsp;}&nbsp;from&nbsp;'@leo\/components'\nimport&nbsp;'.\/index.css'\n\nexport&nbsp;default&nbsp;class&nbsp;Index&nbsp;extends&nbsp;Component&nbsp;{\n&nbsp;&nbsp;constructor()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;super()\n&nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{&nbsp;count:&nbsp;0&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;this.onAddClick&nbsp;=&nbsp;this.onAddClick.bind(this)\n&nbsp;&nbsp;&nbsp;&nbsp;this.onReduceClick&nbsp;=&nbsp;this.onReduceClick.bind(this)\n&nbsp;&nbsp;}\n&nbsp;&nbsp;componentDidMount&nbsp;()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;console.log('\u6267\u884ccomponentDidMount')\n&nbsp;&nbsp;&nbsp;&nbsp;this.setState({&nbsp;count:&nbsp;1&nbsp;})\n&nbsp;&nbsp;}\n&nbsp;&nbsp;onAddClick()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;this.setState({&nbsp;count:&nbsp;this.state.count&nbsp;+&nbsp;1&nbsp;})\n&nbsp;&nbsp;}\n&nbsp;&nbsp;onReduceClick()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;this.setState({&nbsp;count:&nbsp;this.state.count&nbsp;-&nbsp;1&nbsp;})\n&nbsp;&nbsp;}\n&nbsp;&nbsp;render&nbsp;()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;text&nbsp;=&nbsp;this.state.count&nbsp;%&nbsp;2&nbsp;===&nbsp;0&nbsp;?&nbsp;'\u5076\u6570'&nbsp;:&nbsp;'\u5947\u6570'\n&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;count:&nbsp;{this.state.count}&lt;\/text&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;{text}&lt;\/text&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;+1&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;-1&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;)\n&nbsp;&nbsp;}\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u5982\u679c\u4f7f\u7528\u8fc7 Taro \u6216\u8005 Remax \u7b49\u6846\u67b6\uff0c\u5bf9\u4e0a\u8ff0\u4ee3\u7801\u5e94\u8be5\u6709\u4f3c\u66fe\u76f8\u8bc6\u7684\u611f\u89c9\uff0c\u4e0a\u8ff0\u4ee3\u7801\u6b63\u5f0f\u6a21\u4eff\u8fd9\u7c7b\u6846\u67b6\u7684 React DSL \u5199\u6cd5\u3002\u5982\u679c\u60f3\u8feb\u5207\u770b\u5230\u5b9e\u73b0\u8fd9\u4e2a\u9700\u6c42\u7684\u6548\u679c\uff0c\u53ef\u70b9\u51fb\u6b64\u8fdb\u884c\u83b7\u53d6\u6e90\u7801\uff0c\u7136\u540e\u6839\u636e\u63d0\u793a\u8fd0\u884c\u9879\u76ee\uff0c\u5373\u53ef\u89c2\u5bdf\u5230\u5982\u4e0b\u6548\u679c\uff1a<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/image\/134\/532\/181\/1640225706275631.gif\" class=\"aligncenter\" title=\"React\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\u5206\u4eab\u63d2\u56fe1\" alt=\"React\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\u5206\u4eab\u63d2\u56fe1\" \/><\/p>\n<p>\u5230\u8fd9\u91cc\uff0c\u5c31\u6e05\u695a\u4e86\u77e5\u9053\u8fd9\u4e2a\u9879\u76ee\u7684\u9700\u6c42\u4ee5\u53ca\u6700\u7ec8\u5b9e\u73b0\u7ed3\u679c\u662f\u4ec0\u4e48\uff0c\u63a5\u4e0b\u6765\u4fbf\u662f\u91cd\u70b9\u9610\u8ff0\u4ece\u9700\u6c42\u70b9\u5230\u7ed3\u679c\u8fd9\u4e2a\u8fc7\u7a0b\u7684\u5177\u4f53\u5b9e\u73b0\u3002<\/p>\n<h2>\u5b9e\u73b0\u65b9\u6848<\/h2>\n<h3>\u6784\u5efa\u5c0f\u7a0b\u5e8f\u6846\u67b6\u4ea7\u7269<\/h3>\n<p>\u5f00\u53d1\u8fc7\u5c0f\u7a0b\u5e8f\u7684\u540c\u5b66\u90fd\u77e5\u9053\uff0c\u5c0f\u7a0b\u5e8f\u6846\u67b6\u5305\u542b\u4e3b\u4f53\u548c\u9875\u9762\uff0c\u5176\u4e2d\u4e3b\u4f53\u662f\u7531\u4e09\u4e2a\u6587\u4ef6\u751f\u7ec4\u6210\u7684\uff0c\u4e14\u5fc5\u987b\u653e\u5728\u6839\u76ee\u5f55\uff0c\u8fd9\u4e09\u4e2a\u6587\u4ef6\u5206\u522b\u662f\uff1a app.js (\u5fc5\u9700\uff0c\u5c0f\u7a0b\u5e8f\u903b\u8f91)\uff0capp.json\uff08\u5fc5\u9700\uff0c\u5c0f\u7a0b\u5e8f\u516c\u5171\u914d\u7f6e\uff09\uff0capp.wxss\uff08\u975e\u5fc5\u987b\uff0c\u5c0f\u7a0b\u5e8f\u516c\u5171\u6837\u5f0f\u8868\uff09\u3002\u6240\u4ee5\u8981\u5c06 React \u4ee3\u7801\u6784\u5efa\u6210\u5c0f\u7a0b\u5e8f\u4ee3\u7801\uff0c\u9996\u5148\u9700\u8981\u5148\u751f\u6210app.js\u548capp.json\u6587\u4ef6\u3002\u56e0\u4e3a\u672c\u6b21\u8f6c\u6362\u672a\u6d89\u53ca\u5230app.js\u6587\u4ef6\uff0c\u6240\u4ee5app.js\u5185\u5bb9\u53ef\u4ee5\u76f4\u63a5\u5199\u6b7b App({})\u4ee3\u66ff\u3002app.json\u662f\u914d\u7f6e\u6587\u4ef6\uff0c\u53ef\u4ee5\u76f4\u63a5\u5728 React \u5de5\u7a0b\u65b0\u589e\u4e00\u4e2aapp.config.js\u7528\u6765\u586b\u5199\u914d\u7f6e\u5185\u5bb9\uff0c\u5373 React \u4ee3\u7801\u5de5\u7a0b\u76ee\u5f55\u5982\u4e0b\uff1a<\/p>\n<pre>\u251c\u2500\u2500&nbsp;src\n\u2502&nbsp;&nbsp;&nbsp;\u251c\u2500\u2500&nbsp;app.config.js&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5c0f\u7a0b\u5e8f\u914d\u7f6e\u6587\u4ef6\uff0c\u7528\u6765\u751f\u6210app.json\u5185\u5bb9&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\u2502&nbsp;&nbsp;&nbsp;\u2514\u2500\u2500&nbsp;pages\n\u2502&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u2514\u2500\u2500&nbsp;index\n\u2502&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u251c\u2500\u2500&nbsp;index.css\n\u2502&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u2514\u2500\u2500&nbsp;index.jsx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;React\u4ee3\u7801\uff0c\u5373\u4e0a\u8ff0\u8ba1\u6570\u5668\u4ee3\u7801\n\u2514\u2500\u2500&nbsp;tsconfig.json<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>app.config.js\u5185\u5bb9\u5373\u662f\u5c0f\u7a0b\u5e8f\u5168\u5c40\u914d\u7f6e\u5185\u5bb9\uff0c\u5982\u4e0b\uff1a<\/p>\n<pre>module.exports&nbsp;=&nbsp;{\n&nbsp;&nbsp;pages:&nbsp;['pages\/index\/index'],\n&nbsp;&nbsp;window:&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;navigationBarTitleText:&nbsp;'react-wxapp',\n&nbsp;&nbsp;&nbsp;&nbsp;navigationBarBackgroundColor:&nbsp;'#282c34'\n&nbsp;&nbsp;}\n};<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u6709\u4e86\u8fd9\u4e2a\u914d\u7f6e\u6587\u4ef6\uff0c\u5c31\u53ef\u4ee5\u901a\u8fc7\u5982\u4e0b\u65b9\u5f0f\u751f\u6210app.js\u548capp.json\u6587\u4ef6\u3002<\/p>\n<pre>\/*outputDir\u4e3a\u5c0f\u7a0b\u5e8f\u4ee3\u7801\u751f\u6210\u76ee\u5f55*\/\nfs.writeFileSync(path.join(outputDir,&nbsp;'.\/app.js'),&nbsp;`App({})`)\nfs.writeFileSync(path.join(outputDir,&nbsp;'.\/app.json'),&nbsp;JSON.stringify(config,&nbsp;undefined,&nbsp;2))&nbsp;\/\/&nbsp;config\u5373\u4e3aapp.config.js\u6587\u4ef6\u5185\u5bb9<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u5c0f\u7a0b\u5e8f\u9875\u9762\u5219\u662f\u7531\u56db\u79cd\u7c7b\u578b\u6587\u4ef6\u6784\u6210\uff0c\u5206\u522b\u662fjs\uff08\u5fc5\u9700\uff0c\u9875\u9762\u903b\u8f91\uff09\u3001wxml(\u5fc5\u9700\uff0c\u9875\u9762\u7ed3\u662f\u6784)\u3001json\uff08\u975e\u5fc5\u9700\u3001\u9875\u9762\u914d\u7f6e\uff09\u3001wxss\uff08\u975e\u5fc5\u9700\u3001\u9875\u9762\u6837\u5f0f\u8868\uff09\u3002\u800cReact\u4ee3\u7801\u8f6c\u5c0f\u7a0b\u5e8f\uff0c\u4e3b\u8981\u662f\u8003\u8651\u5982\u4f55\u5c06React\u4ee3\u7801\u8f6c\u6362\u7a0b\u5e8f\u5bf9\u5e94\u7684js\u548cwxml\u7c7b\u578b\u6587\u4ef6\uff0c\u540e\u6587\u4f1a\u8be6\u7ec6\u9610\u8ff0\u3002<\/p>\n<h3>React\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u65b9\u6848\u5206\u6790<\/h3>\n<p>\u5b9e\u73b0React\u4ee3\u7801\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u4e0a\u4e3b\u8981\u6709\u4e24\u79cd\u65b9\u5f0f\uff0c\u4e00\u79cd\u662f\u7f16\u8bd1\u65f6\u5b9e\u73b0\uff0c\u4e00\u79cd\u662f\u8fd0\u884c\u65f6\u5b9e\u73b0\uff0c\u5982\u679c\u4f60\u5df2\u7ecf\u67e5\u770b\u7684\u672c\u9879\u76ee\uff0c\u5c31\u53ef\u4ee5\u53d1\u73b0\u6e90\u7801\u91cc\u4e5f\u4f53\u73b0\u51fa\u4e86\u8fd9\u4e24\u79cd\u65b9\u5f0f\uff08\u7f16\u8bd1\u65f6\u5b9e\u73b0\u76ee\u5f55\uff1apackages\/compile-core\uff1b\u8fd0\u884c\u65f6\u5b9e\u73b0\u76ee\u5f55\uff1apackages\/runtime-core\uff09\u3002<\/p>\n<p>\u7f16\u8bd1\u65f6\u65b9\u5f0f\u4e3b\u8981\u901a\u8fc7\u9759\u6001\u7f16\u8bd1\u5c06 JSX \u8f6c\u6362\u6210\u5c0f\u7a0b\u5e8f\u5bf9\u5e94\u7684 template \u6765\u5b9e\u73b0\u6e32\u67d3\uff0c\u7c7b\u4f3c Taro1.0 \u548c 2.0\uff0c\u6b64\u65b9\u5f0f\u6027\u80fd\u63a5\u8fd1\u539f\u751f\u5c0f\u7a0b\u5e8f\uff0c\u4f46\u662f\u8bed\u6cd5\u5374\u6709\u5f88\u5927\u7684\u9650\u5236\u3002\u8fd0\u884c\u65f6\u5b9e\u73b0\u662f\u901a\u8fc7react-reconciler\u91cd\u65b0\u5728\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u5b9a\u4e49\u4e00\u4e2a React \u6e32\u67d3\u5668\uff0c\u4f7f\u5f97 React \u4ee3\u7801\u53ef\u4ee5\u771f\u6b63\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u91cc\uff0c\u7c7b\u4f3c Taro3.0\u3001Remax \u7b49\uff0c\u56e0\u6b64\u8fd9\u79cd\u65b9\u5f0f\u65e0\u8bed\u6cd5\u9650\u5236\uff0c\u4f46\u662f\u6027\u80fd\u4f1a\u6bd4\u8f83\u5dee\u3002\u672c\u6b63\u662f\u53c2\u7167 Taro\u3001Remax \u8fd9\u7c7b\u6846\u67b6\u6e90\u7801\u5e76\u7b80\u5316\u5f88\u591a\u7ec6\u8282\u8fdb\u884c\u5b9e\u73b0\u7684\uff0c\u56e0\u6b64\u8fd9\u4e2a\u53ea\u662f\u9002\u5408\u6765\u5b66\u4e60\u7684\uff0c\u5e76\u4e0d\u80fd\u6295\u5165\u5b9e\u9645\u4e1a\u52a1\u8fdb\u884c\u4f7f\u7528\u3002<\/p>\n<p>\u63a5\u4e0b\u6765\u5c06\u5206\u522b\u8bb2\u8ff0\u5982\u4f55\u901a\u8fc7\u7f16\u8bd1\u65f6\u548c\u8fd0\u884c\u65f6\u8fd9\u4e24\u79cd\u65b9\u5f0f\u6765\u5b9e\u73b0 React \u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u3002<\/p>\n<h3>\u7f16\u8bd1\u65f6\u5b9e\u73b0<\/h3>\n<p>\u5728\u8bb2\u8ff0\u5177\u4f53\u5b9e\u73b0\u6d41\u7a0b\u4e4b\u524d\uff0c\u9996\u5148\u9700\u8981\u4e86\u89e3\u4e0b\u7f16\u8bd1\u65f6\u5b9e\u73b0\u8fd9\u4e2a\u540d\u8bcd\u7684\u6982\u5ff5\uff0c\u9996\u5148\u8fd9\u91cc\u7684\u7f16\u8bd1\u5e76\u975e\u4f20\u7edf\u7684\u9ad8\u5927\u4e0a\u201c\u7f16\u8bd1\u201d\uff0c\u4f20\u7edf\u610f\u4e49\u4e0a\u7684\u7f16\u8bd1\u4e00\u822c\u5c06\u9ad8\u7ea7\u8bed\u8a00\u5f80\u4f4e\u7ea7\u8bed\u8a00\u8fdb\u884c\u7f16\u8bd1\uff0c\u4f46\u8fd9\u91cc\u53ea\u662f\u5c06\u540c\u7b49\u6c34\u5e73\u8bed\u8a00\u8f6c\u6362\uff0c\u5373\u5c06javascript\u4ee3\u7801\u5b57\u7b26\u4e32\u7f16\u8bd1\u6210\u53e6\u4e00\u79cdjavascript\u4ee3\u7801\u5b57\u7b26\u4e32\uff0c\u56e0\u6b64\u8fd9\u91cc\u7684\u7f16\u8bd1\u66f4\u7c7b\u4f3c\u4e8e\u201c\u8f6c\u8bd1\u201d\u3002\u5176\u6b21\uff0c\u867d\u7136\u8fd9\u91cc\u79f0\u7f16\u8bd1\u65f6\u5b9e\u73b0\uff0c\u5e76\u975e\u6240\u6709\u5b9e\u73b0\u8fc7\u7a0b\u90fd\u662f\u7f16\u8bd1\u7684\uff0c\u8fd8\u662f\u9700\u8981\u5c11\u90e8\u5206\u5b9e\u73b0\u9700\u8981\u8fd0\u884c\u65f6\u914d\u5408\uff0c\u56e0\u6b64\u8fd9\u79cd\u65b9\u5f0f\u79f0\u4e3a\u91cd\u7f16\u8bd1\u8f7b\u8fd0\u884c\u65b9\u5f0f\u66f4\u4e3a\u5408\u9002\u3002\u540c\u6837\u7684\uff0c\u8fd0\u884c\u65f6\u5b9e\u73b0\u4e5f\u542b\u6709\u5c11\u91cf\u7f16\u8bd1\u65f6\u5b9e\u73b0\uff0c\u4ea6\u53ef\u79f0\u4e3a\u91cd\u8fd0\u884c\u8f7b\u7f16\u8bd1\u65b9\u5f0f\u3002<\/p>\n<p>\u4e3a\u4e86\u65b9\u4fbf\u5b9e\u73b0\u5c06javascript\u4ee3\u7801\u5b57\u7b26\u4e32\u7f16\u8bd1\u6210\u53e6\u4e00\u79cdjavascript\u4ee3\u7801\u5b57\u7b26\u4e32\uff0c\u8fd9\u91cc\u76f4\u63a5\u91c7\u7528Babel\u5de5\u5177\uff0c\u7531\u4e8e\u7bc7\u5e45\u95ee\u9898\uff0c\u8fd9\u91cc\u5c31\u4e0d\u8be6\u7ec6\u8bb2\u8ff0Babel\u7528\u6cd5\u4e86\uff0c\u5982\u679c\u5bf9Babel\u4e0d\u719f\u7684\u8bdd\uff0c\u53ef\u4ee5\u770b\u770b\u8fd9\u7bc7\u7b80\u5355\u4e86\u89e3\u4e0b\uff08\u6ca1\u9519\uff0c\u5c31\u662f\u7ed9\u81ea\u5df1\u6253\u5e7f\u544a\uff09\u3002\u63a5\u4e0b\u6765\u6211\u4eec\u6765\u5206\u6790\u7f16\u8bd1\u65f6\u5b9e\u73b0\u6b65\u9aa4\u6709\u54ea\u4e9b\uff1a<\/p>\n<p><strong>1. JSX\u8f6c\u6362\u6210\u5bf9\u5e94\u5c0f\u7a0b\u5e8f\u7684\u6a21\u677f<\/strong><\/p>\n<p>React\u662f\u901a\u8fc7JSX\u6765\u6e32\u67d3\u89c6\u56fe\u7684\uff0c\u800c\u5c0f\u7a0b\u5e8f\u5219\u901a\u8fc7wxml\u6765\u6e32\u67d3\u89c6\u56fe\uff0c\u8981\u5c06 React \u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u4e0a\uff0c\u5176\u91cd\u70b9\u5c31\u662f\u8981\u5982\u4f55\u5b9e\u73b0JSX\u8f6c\u6362\u6210\u5bf9\u5e94\u7684\u5c0f\u7a0b\u5e8f\u7684wxml\uff0c\u5176\u8f6c\u6362\u89c4\u5219\u5c31\u662f\u5c06JSX\u4f7f\u7528\u8bed\u6cd5\u8f6c\u6362\u6210\u5c0f\u7a0b\u5e8f\u76f8\u540c\u529f\u80fd\u7684\u8bed\u6cd5\uff0c\u4f8b\u5982\uff1a<\/p>\n<ul>\n<li>\n<p>\u6807\u7b7e\u5143\u7d20\u8f6c\u6362\uff1aView\u3001Text\u3001Button\u7b49\u6807\u7b7e\u76f4\u63a5\u6620\u5c04\u4e3a\u5c0f\u7a0b\u5e8f\u57fa\u7840\u7ec4\u4ef6\u672c\u8eab\uff08\u6539\u4e3a\u5c0f\u5199\uff09<\/p>\n<\/li>\n<li>\n<p>\u6837\u5f0f\u7c7b\u540d\u8f6c\u6362\uff1aclassName\u4fee\u6539\u4e3aclass<\/p>\n<pre>&lt;view&gt;&lt;\/view&gt;&nbsp;&nbsp;==&amp;gt;&nbsp;&nbsp;&lt;view&gt;&lt;\/view&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 \u767b\u5f55\u540e\u590d\u5236 <\/li>\n<li>\n<p>\u4e8b\u4ef6\u8f6c\u6362\uff1a\u5982onClick\u4fee\u6539\u4e3abindtap<\/p>\n<pre>&lt;view&gt;&lt;\/view&gt;&nbsp;&nbsp;==&amp;gt;&nbsp;&nbsp;&lt;view&gt;&lt;\/view&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 \u767b\u5f55\u540e\u590d\u5236 <\/li>\n<li>\n<p>\u5faa\u73af\u8f6c\u6362\uff1amap\u8bed\u6cd5\u4fee\u6539\u4e3awx:for<\/p>\n<pre>list.map(i&nbsp;=&amp;gt;&nbsp;&lt;text&gt;{i}&lt;\/text&gt;)&nbsp;=&amp;gt;&nbsp;&lt;text&gt;{{item}}&lt;\/text&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/li>\n<\/ul>\n<p>\u8bed\u6cd5\u8f6c\u6362\u8fdc\u4e0d\u6b62\u4e0a\u9762\u8fd9\u4e9b\u7c7b\u578b\uff0c\u5982\u679c\u8981\u4fdd\u8bc1\u5f00\u53d1\u8005\u53ef\u4ee5\u4f7f\u7528\u5404\u79cdJSX\u8bed\u6cd5\u5f00\u53d1\u5c0f\u7a0b\u5e8f\uff0c\u5c31\u9700\u8981\u5c3d\u53ef\u80fd\u7a77\u4e3e\u51fa\u6240\u6709\u8bed\u6cd5\u8f6c\u6362\u89c4\u5219\uff0c\u5426\u5219\u5f88\u53ef\u80fd\u5f00\u53d1\u8005\u7528\u4e86\u4e00\u4e2a\u5199\u6cd5\u5c31\u4e0d\u652f\u6301\u8f6c\u6362\u3002\u800c\u4e8b\u5b9e\u662f\uff0c\u6709\u4e9b\u5199\u6cd5\uff08\u6bd4\u5982\u52a8\u6001\u751f\u6210JSX\u7247\u6bb5\u7b49\u7b49\uff09\u662f\u6839\u672c\u65e0\u6cd5\u652f\u6301\u8f6c\u6362\uff0c\u8fd9\u4e5f\u662f\u524d\u6587\u4e3a\u4ec0\u4e48\u8bf4\u7f16\u8bd1\u65f6\u5b9e\u73b0\u65b9\u6848\u7684\u7f3a\u70b9\u662f\u8bed\u6cd5\u6709\u9650\u5236\uff0c\u5f00\u53d1\u8005\u4e0d\u80fd\u968f\u610f\u7f16\u7801\uff0c\u9700\u8981\u53d7\u9650\u4e8e\u6846\u67b6\u672c\u8eab\u5f00\u53d1\u89c4\u5219\u3002<\/p>\n<p>\u7531\u4e8e\u4e0a\u8ff0\u9700\u8981\u8f6c\u6362JSX\u4ee3\u7801\u8bed\u6cd5\u76f8\u5bf9\u7b80\u5355\uff0c\u53ea\u9700\u8981\u6d89\u53ca\u51e0\u79cd\u7b80\u5355\u8bed\u6cd5\u89c4\u5219\u8f6c\u6362\uff0c\u8fd9\u91cc\u76f4\u63a5\u8d34\u51fa\u8f6c\u6362\u540e\u7684wxml\u7ed3\u679c\u5982\u4e0b\uff0c\u5bf9\u5e94\u7684\u5b9e\u73b0\u4ee3\u7801\u4f4d\u4e8e\uff1apackages\/compile-core\/transform\/parseTemplate.ts\u3002<\/p>\n<pre>&lt;view&gt;\n&nbsp;&nbsp;&lt;view&gt;&lt;text&gt;count:&nbsp;{{count}}&lt;\/text&gt;&lt;\/view&gt;\n&nbsp;&nbsp;&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;{{text}}&lt;\/text&gt;\n&nbsp;&nbsp;&lt;\/view&gt;\n&nbsp;&nbsp;&lt;button&gt;+1&lt;\/button&gt;\n&nbsp;&nbsp;&lt;button&gt;-1&lt;\/button&gt;\n&lt;\/view&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p><strong>2. \u8fd0\u884c\u65f6\u9002\u914d<\/strong><\/p>\n<p>\u5982\u524d\u6587\u6240\u8bf4\uff0c\u867d\u7136\u8fd9\u4e2a\u65b9\u6848\u79f0\u4e3a\u7f16\u8bd1\u65f6\u5b9e\u73b0\uff0c\u4f46\u662f\u8981\u5c06React\u4ee3\u7801\u5728\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u9a71\u52a8\u8fd0\u884c\u8d77\u6765\uff0c\u8fd8\u9700\u8981\u5728\u8fd0\u884c\u65f6\u505a\u4e0b\u9002\u914d\u5904\u7406\u3002\u9002\u914d\u5904\u7406\u4e3b\u8981\u5728\u5c0f\u7a0b\u5e8fjs\u903b\u8f91\u5b9e\u73b0\uff0c\u5185\u5bb9\u4e3b\u8981\u6709\u4e09\u5757\uff1a\u6570\u636e\u6e32\u67d3\u3001\u4e8b\u4ef6\u5904\u7406\u3001\u751f\u547d\u5468\u671f\u6620\u5c04\u3002<\/p>\n<p>\u5c0f\u7a0b\u5e8fjs\u903b\u8f91\u662f\u901a\u8fc7\u4e00\u4e2aobject\u53c2\u6570\u914d\u7f6e\u58f0\u660e\u5468\u671f\u3001\u4e8b\u4ef6\u7b49\u6765\u8fdb\u884c\u6ce8\u518c\uff0c\u5e76\u901a\u8fc7setData\u65b9\u6cd5\u89e6\u53d1\u89c6\u56fe\u6e32\u67d3\uff1a<\/p>\n<pre>Component({\n&nbsp;&nbsp;data:&nbsp;{},\n&nbsp;&nbsp;onReady&nbsp;()&nbsp;{&nbsp;this.setData(..)&nbsp;},\n&nbsp;&nbsp;handleClick&nbsp;()&nbsp;{}\n})<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u800c\u8ba1\u6570\u5668React\u4ee3\u7801\u662f\u901a\u8fc7class\u58f0\u660e\u4e00\u4e2a\u7ec4\u4ef6\u903b\u8f91\uff0c\u7c7b\u4f3c\uff1a<\/p>\n<pre>class&nbsp;CustomComponent&nbsp;extends&nbsp;Component&nbsp;{\n&nbsp;&nbsp;state&nbsp;=&nbsp;{&nbsp;}\n&nbsp;&nbsp;componentDidMount()&nbsp;{&nbsp;this.setState(..)&nbsp;&nbsp;}\n&nbsp;&nbsp;handleClick&nbsp;()&nbsp;{&nbsp;}\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u4ece\u4e0a\u9762\u4e24\u6bb5\u4ee3\u7801\u53ef\u4ee5\u770b\u51fa\uff0c\u5c0f\u7a0b\u5e8f\u662f\u901a\u8fc7object\u58f0\u660e\u903b\u8f91\uff0cReact \u5219\u662f\u901a\u8fc7class\u8fdb\u884c\u58f0\u660e\u3002\u9664\u6b64\u4e4b\u5916\uff0c\u5c0f\u7a0b\u5e8f\u662f\u901a\u8fc7setData\u89e6\u53d1\u89c6\u56fe\uff08wxml\uff09\u6e32\u67d3\uff0cReact \u5219\u662f\u901a\u8fc7 setState \u89e6\u53d1\u89c6\u56fe\uff08render\u65b9\u6cd5\uff09\u6e32\u67d3\u3002\u6240\u4ee5\u8981\u4f7f\u5f97 React \u903b\u8f91\u53ef\u4ee5\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\uff0c\u53ef\u4ee5\u52a0\u5165\u4e00\u4e2a\u8fd0\u884c\u65f6\u57ab\u7247\uff0c\u5c06\u4e24\u8005\u903b\u8f91\u5199\u6cd5\u901a\u8fc7\u57ab\u7247\u5bf9\u5e94\u8d77\u6765\u3002\u518d\u4ecb\u7ecd\u8fd0\u884c\u65f6\u57ab\u7247\u5177\u4f53\u5b9e\u73b0\u524d\uff0c\u8fd8\u9700\u8981\u5bf9\u4e0a\u8ff0 React \u8ba1\u6570\u5668\u4ee3\u7801\u8fdb\u884c\u7b80\u5355\u7684\u8f6c\u6362\u5904\u7406\uff0c\u5904\u7406\u5b8c\u7684\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>import React, { Component } from \"..\/..\/npm\/app.js\";  \/\/ 1.app.js\u4e3a\u57ab\u7247\u5b9e\u73b0\u6587\u4ef6\nexport default class Index extends Component {\n  static $$events = [\"onAddClick\", \"onReduceClick\"];  \/\/ 2.\u6536\u96c6JSX\u4e8b\u4ef6\u540d\u79f0\n  constructor() {\n    super();\n    this.state = {\n      count: 0\n    };\n    this.onAddClick = this.onAddClick.bind(this);\n    this.onReduceClick = this.onReduceClick.bind(this);\n  }\n  componentDidMount() {\n    console.log('\u6267\u884ccomponentDidMount');\n    this.setState({\n      count: 1\n    });\n  }\n  onAddClick() {\n    this.setState({\n      count: this.state.count + 1\n    });\n  }\n  onReduceClick() {\n    this.setState({\n      count: this.state.count - 1\n    });\n  }\n  createData() {                                      \/\/ 3.render\u51fd\u6570\u6539\u4e3acreateData\uff0c\u5220\u9664\n    this.__state = arguments[0];                      \/\/ \u539f\u672c\u7684JSX\u4ee3\u7801\uff0c\u8fd4\u56de\u66f4\u65b0\u540e\u7684state\n                                                      \/\/ \u63d0\u4f9b\u7ed9\u5c0f\u7a0b\u5e8f\u8fdb\u884csetData\n    const text = this.state.count % 2 === 0 ? '\u5076\u6570' : '\u5947\u6570';\n    Object.assign(this.__state, {\n      text: text\n    });\n    return this.__state;\n  }\n\n}    \nPage(require('..\/..\/npm\/app.js').createPage(Index))\u3002 \/\/ 4.\u4f7f\u7528\u8fd0\u884c\u65f6\u57ab\u7247\u63d0\u4f9b\u7684createPage\n                                                      \/\/ \u65b9\u6cd5\u8fdb\u884c\u521d\u59cb\u5316\n                                                      \/\/ \u65b9\u6cd5\u8fdb\u884c\u521d\u59cb\u5316\u590d\u5236\u4ee3\u7801<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u5982\u4e0a\u4ee3\u7801\uff0c\u9700\u8981\u5904\u7406\u7684\u5730\u65b9\u67094\u5904\uff1a<\/p>\n<ul>\n<li>\n<p>Component\u8fdb\u884c\u91cd\u5199\uff0c\u91cd\u5199\u903b\u8f91\u5728\u8fd0\u884c\u65f6\u57ab\u7247\u6587\u4ef6\u5185\u5b9e\u73b0\uff0c\u5373app.js\uff0c\u5b9e\u73b0\u5177\u4f53\u903b\u8f91\u540e\u6587\u4f1a\u8d34\u51fa\u3002<\/p>\n<\/li>\n<li>\n<p>\u5c06\u539f\u672cJSX\u7684\u70b9\u51fb\u4e8b\u4ef6\u5bf9\u5e94\u7684\u56de\u8c03\u65b9\u6cd5\u540d\u79f0\u8fdb\u884c\u6536\u96c6\uff0c\u4ee5\u4fbf\u5728\u8fd0\u884c\u65f6\u57ab\u7247\u5728\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u8fdb\u884c\u4e8b\u4ef6\u6ce8\u518c\u3002<\/p>\n<\/li>\n<li>\n<p>\u56e0\u4e3a\u539f\u672crender\u65b9\u6cd5\u5185JSX\u7247\u6bb5\u8f6c\u6362\u4e3awxml\u4e86\uff0c\u6240\u4ee5\u8fd9\u91ccrender\u65b9\u6cd5\u53ef\u5c06JSX\u7247\u6bb5\u8fdb\u884c\u5220\u9664\u3002\u53e6\u5916\u56e0\u4e3aReact\u6bcf\u6b21\u6267\u884csetState\u90fd\u4f1a\u89e6\u53d1render\u65b9\u6cd5\uff0c\u800crender\u65b9\u6cd5\u5185\u4f1a\u63a5\u53d7\u5230\u6700\u65b0\u7684state\u6570\u636e\u6765\u66f4\u65b0\u89c6\u56fe\uff0c\u56e0\u6b64\u8fd9\u91cc\u4ea7\u751f\u7684\u6700\u65b0state\u6b63\u662f\u9700\u8981\u63d0\u4f9b\u7ed9\u5c0f\u7a0b\u5e8f\u7684setData\u65b9\u6cd5\uff0c\u4ece\u800c\u89e6\u53d1\u5c0f\u7a0b\u5e8f\u7684\u6570\u636e\u6e32\u67d3\uff0c\u4e3a\u6b64\u5c06render\u540d\u79f0\u91cd\u547d\u540d\u4e3acreateData\uff08\u751f\u4ea7\u5c0f\u7a0b\u5e8f\u7684data\u6570\u636e\uff09\uff0c\u540c\u65f6\u6539\u5199\u5185\u90e8\u903b\u8f91\uff0c\u5c06\u4ea7\u751f\u7684\u6700\u65b0state\u8fdb\u884c\u8fd4\u56de\u3002<\/p>\n<\/li>\n<li>\n<p>\u4f7f\u7528\u8fd0\u884c\u65f6\u57ab\u7247\u63d0\u4f9b\u7684createPage\u65b9\u6cd5\u8fdb\u884c\u521d\u59cb\u5316\uff08createPage\u65b9\u6cd5\u5b9e\u73b0\u5177\u4f53\u903b\u8f91\u540e\u6587\u4f1a\u8d34\u51fa\uff09\uff0c\u540c\u65f6\u901a\u8fc7\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u63d0\u4f9b\u7684Page\u65b9\u6cd5\u8fdb\u884c\u6ce8\u518c\uff0c\u4ece\u8fd9\u91cc\u53ef\u5f97\u77e5createPage\u65b9\u6cd5\u8fd4\u56de\u7684\u6570\u636e\u80af\u5b9a\u662f\u4e00\u4e2aobject\u7c7b\u578b\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u8fd0\u884c\u65f6\u57ab\u7247\uff08app.js\uff09\u5b9e\u73b0\u903b\u8f91\u5982\u4e0b\uff1a<\/p>\n<pre>export&nbsp;class&nbsp;Component&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u91cd\u5199Component\u7684\u5b9e\u73b0\u903b\u8f91\n&nbsp;&nbsp;constructor()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{}\n&nbsp;&nbsp;}\n&nbsp;&nbsp;setState(state)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;setState\u6700\u7ec8\u89e6\u53d1\u5c0f\u7a0b\u5e8f\u7684setData\n&nbsp;&nbsp;&nbsp;&nbsp;update(this.$scope.$component,&nbsp;state)\n&nbsp;&nbsp;}\n&nbsp;&nbsp;_init(scope)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;this.$scope&nbsp;=&nbsp;scope\n&nbsp;&nbsp;}\n}\nfunction&nbsp;update($component,&nbsp;state&nbsp;=&nbsp;{})&nbsp;{\n&nbsp;&nbsp;$component.state&nbsp;=&nbsp;Object.assign($component.state,&nbsp;state)\n&nbsp;&nbsp;let&nbsp;data&nbsp;=&nbsp;$component.createData(state)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u6267\u884ccreateData\u83b7\u53d6\u6700\u65b0\u7684state\n&nbsp;&nbsp;data['$leoCompReady']&nbsp;=&nbsp;true\n&nbsp;&nbsp;$component.state&nbsp;=&nbsp;data\n&nbsp;&nbsp;$component.$scope.setData(data)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5c06state\u4f20\u9012\u7ed9setData\u8fdb\u884c\u66f4\u65b0\n}\nexport&nbsp;function&nbsp;createPage(ComponentClass)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;createPage\u5b9e\u73b0\u903b\u8f91\n&nbsp;&nbsp;const&nbsp;componentInstance&nbsp;=&nbsp;new&nbsp;ComponentClass()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5b9e\u4f8b\u5316\u4f20\u5165\u8fdb\u6765React\u7684Class\u7ec4\u4ef6\n&nbsp;&nbsp;const&nbsp;initData&nbsp;=&nbsp;componentInstance.state&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;const&nbsp;option&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u58f0\u660e\u4e00\u4e2a\u5c0f\u7a0b\u5e8f\u903b\u8f91\u7684\u5bf9\u8c61\u5b57\u9762\u91cf\n&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;initData,\n&nbsp;&nbsp;&nbsp;&nbsp;onLoad()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$component&nbsp;=&nbsp;new&nbsp;ComponentClass()\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$component._init(this)\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;update(this.$component,&nbsp;this.$component.state)\n&nbsp;&nbsp;&nbsp;&nbsp;},\n&nbsp;&nbsp;&nbsp;&nbsp;onReady()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(typeof&nbsp;this.$component.componentDidMount&nbsp;===&nbsp;'function')&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$component.componentDidMount()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u751f\u547d\u903b\u8f91\u6620\u5c04\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;}\n&nbsp;&nbsp;const&nbsp;events&nbsp;=&nbsp;ComponentClass['$$events']&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u83b7\u53d6React\u7ec4\u4ef6\u5185\u6240\u6709\u4e8b\u4ef6\u56de\u8c03\u65b9\u6cd5\u540d\u79f0\n&nbsp;&nbsp;if&nbsp;(events)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;events.forEach(eventHandlerName&nbsp;=&amp;gt;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(option[eventHandlerName])&nbsp;return\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;option[eventHandlerName]&nbsp;=&nbsp;function&nbsp;()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$component[eventHandlerName].call(this.$component)\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;})\n&nbsp;&nbsp;}\n&nbsp;&nbsp;return&nbsp;option\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u4e0a\u6587\u63d0\u5230\u4e86\u91cd\u5199Component\u7c7b\u548ccreatePage\u65b9\u6cd5\u5177\u4f53\u5b9e\u73b0\u903b\u8f91\u5982\u4e0a\u4ee3\u7801\u6240\u793a\u3002<\/p>\n<p>Component\u5185\u58f0\u660e\u7684state\u4f1a\u6267\u884c\u4e00\u4e2aupdate\u65b9\u6cd5\uff0cupdate\u65b9\u6cd5\u91cc\u4e3b\u8981\u662f\u5c06 React \u4ea7\u751f\u7684\u65b0state\u548c\u65e7state\u8fdb\u884c\u5408\u5e76\uff0c\u7136\u540e\u901a\u8fc7\u4e0a\u6587\u8bf4\u7684createData\u65b9\u6cd5\u83b7\u53d6\u5230\u5408\u5e76\u540e\u7684\u6700\u65b0state\uff0c\u6700\u65b0\u7684state\u518d\u4f20\u9012\u7ed9\u5c0f\u7a0b\u5e8f\u8fdb\u884csetData\uff0c\u4ece\u800c\u5b9e\u73b0\u5c0f\u7a0b\u5e8f\u6570\u636e\u6e32\u67d3\u3002<\/p>\n<p>createPage\u65b9\u6cd5\u903b\u8f91\u9996\u5148\u662f\u5c06 React \u7ec4\u4ef6\u5b9e\u4f8b\u5316\uff0c\u7136\u540e\u6784\u5efa\u51fa\u4e00\u4e2a\u5c0f\u7a0b\u5e8f\u903b\u8f91\u7684\u5bf9\u5e94\u5b57\u9762\u91cf\uff0c\u5e76\u5c06 React \u7ec4\u4ef6\u5b9e\u4f8b\u76f8\u5173\u65b9\u6cd5\u548c\u8fd9\u4e2a\u5c0f\u7a0b\u5e8f\u903b\u8f91\u5bf9\u8c61\u5b57\u9762\u91cf\u8fdb\u884c\u7ed1\u5b9a\uff1a\u5176\u6b21\u8fdb\u884c\u751f\u547d\u5468\u671f\u7ed1\u5b9a\uff1a\u5728\u5c0f\u7a0b\u5e8fonReady\u5468\u671f\u91cc\u51fa\u53d1 React \u7ec4\u4ef6\u5bf9\u5e94\u7684componentDidMount\u751f\u547d\u5468\u671f\uff1b\u6700\u597d\u8fdb\u884c\u4e8b\u4ef6\u7ed1\u5b9a\uff1a\u901a\u8fc7\u4e0a\u6587\u63d0\u5230\u7684\u56de\u8c03\u4e8b\u4ef6\u540d\uff0c\u53d6\u51faReact \u7ec4\u4ef6\u5b9e\u4f8b\u5185\u7684\u5bf9\u5e94\u7684\u4e8b\u4ef6\uff0c\u5e76\u5c06\u8fd9\u4e9b\u4e8b\u4ef6\u6ce8\u518c\u5230\u5c0f\u7a0b\u5e8f\u903b\u8f91\u7684\u5bf9\u5e94\u5b57\u9762\u91cf\u5185\uff0c\u8fd9\u6837\u5c31\u5b8c\u6210\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u4e8b\u4ef6\u7ed1\u5b9a\u3002\u6700\u540e\u5c06\u8fd9\u4e2a\u5bf9\u8c61\u5b57\u9762\u91cf\u8fd4\u56de\uff0c\u4f9b\u524d\u6587\u6240\u8bf4\u7684Page\u65b9\u6cd5\u8fdb\u884c\u6ce8\u518c\u3002<\/p>\n<p>\u5230\u6b64\uff0c\u5c31\u53ef\u4ee5\u5b9e\u73b0 React \u4ee3\u7801\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u4e86\uff0c\u53ef\u4ee5\u5728\u91cc\u6267\u884c npm run build:compile \u770b\u770b\u6548\u679c\u3002\u7f16\u8bd1\u65f6\u5b9e\u73b0\u65b9\u6848\u4e3b\u8981\u662f\u901a\u8fc7\u9759\u6001\u7f16\u8bd1JSX\u4ee3\u7801\u548c\u8fd0\u884c\u65f6\u57ab\u7247\u7ed3\u5408\uff0c\u5b8c\u6210 React \u4ee3\u7801\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\uff0c\u8fd9\u79cd\u65b9\u6848\u57fa\u672c\u65e0\u6027\u80fd\u4e0a\u7684\u635f\u8017\uff0c\u4e14\u53ef\u4ee5\u5728\u8fd0\u884c\u65f6\u57ab\u7247\u505a\u4e00\u4e9b\u4f18\u5316\u5904\u7406\uff08\u6bd4\u5982\u53bb\u9664\u4e0d\u5fc5\u8981\u7684\u6e32\u67d3\u6570\u636e\uff0c\u51cf\u5c11setData\u6570\u636e\u91cf\uff09\uff0c\u56e0\u6b64\u5176\u6027\u80fd\u4e0e\u4f7f\u7528\u5c0f\u7a0b\u5e8f\u539f\u751f\u8bed\u6cd5\u5f00\u53d1\u76f8\u8fd1\u751a\u81f3\u67d0\u4e9b\u573a\u666f\u4f1a\u66f4\u4f18\u3002\u7136\u800c\u8fd9\u79cd\u65b9\u6848\u7684\u7f3a\u70b9\u5c31\u662f\u8bed\u6cd5\u9650\u5236\u95ee\u9898\uff08\u4e0a\u6587\u5df2\u7ecf\u63d0\u8fc7\u4e86\uff09\uff0c\u4f7f\u5f97\u5f00\u53d1\u5e76\u4e0d\u53cb\u597d\uff0c\u56e0\u6b64\u4e5f\u5c31\u6709\u4e86\u8fd0\u884c\u65f6\u5b9e\u73b0\u65b9\u6848\u7684\u8bde\u751f\u3002<\/p>\n<h3>\u8fd0\u884c\u65f6\u5b9e\u73b0<\/h3>\n<p>\u4ece\u4e0a\u6587\u53ef\u4ee5\u770b\u51fa\uff0c\u7f16\u8bd1\u65f6\u5b9e\u73b0\u4e4b\u6240\u4ee5\u6709\u8bed\u6cd5\u9650\u5236\uff0c\u4e3b\u8981\u56e0\u4e3a\u5176\u4e0d\u662f\u8ba9 React \u771f\u6b63\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\uff0c\u800c\u8fd0\u884c\u65f6\u5b9e\u73b0\u65b9\u6848\u5219\u53ef\u4ee5\uff0c\u5176\u539f\u7406\u662f\u5728\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u5b9e\u73b0\u4e00\u4e2a React \u81ea\u5b9a\u4e49\u6e32\u67d3\u5668\uff0c\u7528\u6765\u6e32\u67d3 React \u4ee3\u7801\u3002\u8fd9\u91cc\u6211\u4eec\u4ee5  \u6846\u67b6\u5b9e\u73b0\u65b9\u5f0f\u6765\u8fdb\u884c\u8bb2\u89e3\uff0c\u672c\u4e2d\u7684\u8fd0\u884c\u65f6\u5b9e\u73b0\u4e5f\u6b63\u662f\u53c2\u7167  \u6846\u67b6\u5b9e\u73b0\u7684\u3002<\/p>\n<p>\u5982\u679c\u4f7f\u7528\u8fc7 React \u5f00\u53d1\u8fc7 Web\uff0c\u5165\u53e3\u6587\u4ef6\u6709\u4e00\u6bb5\u7c7b\u4f3c\u8fd9\u6837\u7684\u4ee3\u7801\uff1a<\/p>\n<pre>import&nbsp;React&nbsp;from&nbsp;'react'\nimport&nbsp;ReactDom&nbsp;from&nbsp;'react-dom'\nimport&nbsp;App&nbsp;from&nbsp;'.\/App'\n\nReactDom.render(\n&nbsp;&nbsp;App,\n&nbsp;&nbsp;document.getElementById('root')\n)<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u53ef\u4ee5\u770b\u51fa\u6e32\u67d3 Web \u9875\u9762\u9700\u8981\u5f15\u7528\u4e00\u4e2a\u53eb react-dom \u6a21\u5757\uff0c\u90a3\u8fd9\u4e2a\u6a21\u5757\u4f5c\u7528\u662f\u4ec0\u4e48\uff1freact-dom\u662f Web \u5e73\u53f0\u7684\u6e32\u67d3\u5668\uff0c\u4e3b\u8981\u8d1f\u8d23\u5c06 React \u6267\u884c\u540e\u7684Vitrual DOM\u6570\u636e\u6e32\u67d3\u5230 Web \u5e73\u53f0\u3002\u540c\u6837\u7684\uff0cReact \u8981\u6e32\u67d3\u5230 Native\uff0c\u4e5f\u6709\u4e00\u4e2a\u9488\u5bf9 Native \u5e73\u53f0\u7684\u6e32\u67d3\u5668\uff1aReact Native\u3002<br \/>React\u5b9e\u73b0\u591a\u5e73\u53f0\u65b9\u5f0f\uff0c\u662f\u5728\u6bcf\u4e2a\u5e73\u53f0\u5b9e\u73b0\u4e00\u4e2aReact\u6e32\u67d3\u5668\uff0c\u5982\u4e0b\u56fe\u6240\u793a\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/image\/706\/825\/995\/1640225876896223.png\" class=\"aligncenter\" title=\"React\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\u5206\u4eab\u63d2\u56fe2\" alt=\"React\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\u5206\u4eab\u63d2\u56fe2\" \/><\/p>\n<p>\u800c\u5982\u679c\u8981\u5c06 React \u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\uff0c\u53ea\u9700\u8981\u5f00\u53d1\u4e00\u4e2a\u5c0f\u7a0b\u5e8f\u81ea\u5b9a\u4e49\u6e32\u67d3\u5668\u5373\u53ef\u3002React \u5b98\u65b9\u63d0\u4f9b\u4e86\u4e00\u4e2a \u5305\u4e13\u95e8\u6765\u5b9e\u73b0\u81ea\u5b9a\u4e49\u6e32\u67d3\u5668\uff0c\u5b98\u65b9\u63d0\u4f9b\u4e86\u4e00\u4e2a\u7b80\u5355\u91cd\u5199\u4e86react-dom\u3002<\/p>\n<p>\u4f7f\u7528react-reconciler\u5b9e\u73b0\u6e32\u67d3\u5668\u4e3b\u8981\u6709\u4e24\u6b65\uff0c\u7b2c\u4e00\u6b65\uff1a\u5b9e\u73b0\u6e32\u67d3\u51fd\u6570\uff08render\u65b9\u6cd5\uff09\uff0c\u7c7b\u4f3cReactDOM.render\u65b9\u6cd5\uff1a<\/p>\n<pre>import&nbsp;ReactReconciler&nbsp;from&nbsp;'react-reconciler'\nimport&nbsp;hostConfig&nbsp;from&nbsp;'.\/hostConfig'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5bbf\u4e3b\u914d\u7f6e\n\n\/\/&nbsp;\u521b\u5efaReconciler\u5b9e\u4f8b,&nbsp;\u5e76\u5c06HostConfig\u4f20\u9012\u7ed9Reconciler\nconst&nbsp;ReactReconcilerInst&nbsp;=&nbsp;ReactReconciler(hostConfig)\n\n\/**\n&nbsp;*&nbsp;\u63d0\u4f9b\u4e00\u4e2arender\u65b9\u6cd5\uff0c\u7c7b\u4f3cReactDom.render\u65b9\u6cd5\n&nbsp;*&nbsp;\u4e0eReactDOM\u4e00\u6837\uff0c\u63a5\u6536\u4e09\u4e2a\u53c2\u6570\n&nbsp;*&nbsp;render(&lt;mycomponent&gt;&lt;\/mycomponent&gt;,&nbsp;container,&nbsp;()&nbsp;=&amp;gt;&nbsp;console.log('rendered'))\n&nbsp;*\/\nexport&nbsp;function&nbsp;render(element,&nbsp;container,&nbsp;callback)&nbsp;{\n&nbsp;&nbsp;\/\/&nbsp;\u521b\u5efa\u6839\u5bb9\u5668\n&nbsp;&nbsp;if&nbsp;(!container._rootContainer)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;container._rootContainer&nbsp;=&nbsp;ReactReconcilerInst.createContainer(container,&nbsp;false);\n&nbsp;&nbsp;}\n&nbsp;&nbsp;\/\/&nbsp;\u66f4\u65b0\u6839\u5bb9\u5668\n&nbsp;&nbsp;return&nbsp;ReactReconcilerInst.updateContainer(element,&nbsp;container._rootContainer,&nbsp;null,&nbsp;callback);\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u7b2c\u4e8c\u6b65\uff0c\u5982\u4e0a\u56fe\u5f15\u7528\u7684import hostConfig from &#8216;.\/hostConfig&#8217; \uff0c\u9700\u8981\u901a\u8fc7react-reconciler\u5b9e\u73b0\u5bbf\u4e3b\u914d\u7f6e\uff08HostConfig\uff09\uff0cHostConfig\u662f\u5bbf\u4e3b\u73af\u5883\u63d0\u4f9b\u4e00\u7cfb\u5217\u9002\u914d\u5668\u65b9\u6848\u548c\u914d\u7f6e\u9879\uff0c\u5b9a\u4e49\u4e86\u5982\u4f55\u521b\u5efa\u8282\u70b9\u5b9e\u4f8b\u3001\u6784\u5efa\u8282\u70b9\u6811\u3001\u63d0\u4ea4\u548c\u66f4\u65b0\u7b49\u64cd\u4f5c\uff0c\u5b8c\u6574\u53ef\u4ee5\u70b9\u51fb\u67e5\u770b\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f\u5728\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u672a\u63d0\u4f9bDOM API\u64cd\u4f5c\uff0c\u53ea\u80fd\u901a\u8fc7setData\u5c06\u6570\u636e\u4f20\u9012\u7ed9\u89c6\u56fe\u5c42\u3002\u56e0\u6b64Remax\u91cd\u65b0\u5b9a\u4e49\u4e86\u4e00\u4e2aVNode\u7c7b\u578b\u7684\u8282\u70b9\uff0c\u8ba9 React \u5728reconciliation\u8fc7\u7a0b\u4e2d\u4e0d\u662f\u76f4\u63a5\u53bb\u6539\u53d8DOM\uff0c\u800c\u5148\u66f4\u65b0VNode\uff0chostConfig\u6587\u4ef6\u5185\u5bb9\u5927\u81f4\u5982\u4e0b\uff1a<\/p>\n<pre>interface&nbsp;VNode&nbsp;{\n&nbsp;&nbsp;id:&nbsp;number;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u8282\u70b9&nbsp;id\uff0c\u8fd9\u662f\u4e00\u4e2a\u81ea\u589e\u7684\u552f\u4e00&nbsp;id\uff0c\u7528\u4e8e\u6807\u8bc6\u8282\u70b9\u3002\n&nbsp;&nbsp;container:&nbsp;Container;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u7c7b\u4f3c&nbsp;ReactDOM.render(&lt;app&gt;&lt;\/app&gt;,&nbsp;document.getElementById('root')&nbsp;\u4e2d\u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570\n&nbsp;&nbsp;children:&nbsp;VNode[];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5b50\u8282\u70b9\u3002\n&nbsp;&nbsp;type:&nbsp;string&nbsp;|&nbsp;symbol;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u8282\u70b9\u7684\u7c7b\u578b\uff0c\u4e5f\u5c31\u662f\u5c0f\u7a0b\u5e8f\u4e2d\u7684\u57fa\u7840\u7ec4\u4ef6\uff0c\u5982\uff1aview\u3001text\u7b49\u7b49\u3002\n&nbsp;&nbsp;props?:&nbsp;any;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u8282\u70b9\u7684\u5c5e\u6027\u3002\n&nbsp;&nbsp;parent:&nbsp;VNode&nbsp;|&nbsp;null;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u7236\u8282\u70b9\n&nbsp;&nbsp;text?:&nbsp;string;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u6587\u672c\u8282\u70b9\u4e0a\u7684\u6587\u5b57\n&nbsp;&nbsp;appendChild(node:&nbsp;VNode):&nbsp;void;\n&nbsp;&nbsp;removeChild(node:&nbsp;VNode):&nbsp;void;\n&nbsp;&nbsp;insertBefore(newNode:&nbsp;VNode,&nbsp;referenceNode:&nbsp;VNode):&nbsp;void;\n&nbsp;&nbsp;...\n}\n\n\/\/&nbsp;\u5b9e\u73b0\u5bbf\u4e3b\u914d\u7f6e\nconst&nbsp;hostConfig&nbsp;=&nbsp;{\n\n&nbsp;&nbsp;...\n&nbsp;&nbsp;\/\/&nbsp;reconciler\u63d0\u4ea4\u540e\u6267\u884c\uff0c\u89e6\u53d1\u5bb9\u5668\u66f4\u65b0\u6570\u636e\uff08\u5b9e\u9645\u4f1a\u89e6\u53d1\u5c0f\u7a0b\u5e8f\u7684setData\uff09\n&nbsp;&nbsp;resetAfterCommit:&nbsp;(container)&nbsp;=&amp;gt;&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;container.applyUpdate();\n&nbsp;&nbsp;},\n&nbsp;&nbsp;\/\/&nbsp;\u521b\u5efa\u5bbf\u4e3b\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u521d\u59cb\u5316VNode\u8282\u70b9\n&nbsp;&nbsp;createInstance(type,&nbsp;newProps,&nbsp;container)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;id&nbsp;=&nbsp;generate();\n&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;node&nbsp;=&nbsp;new&nbsp;VNode({&nbsp;...&nbsp;});\n&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;node;\n&nbsp;&nbsp;},\n&nbsp;&nbsp;\/\/&nbsp;\u63d2\u5165\u8282\u70b9\n&nbsp;&nbsp;appendChild(parent,&nbsp;child)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;parent.appendChild(child);\n&nbsp;&nbsp;},\n&nbsp;&nbsp;\/\/&nbsp;\n&nbsp;&nbsp;insertBefore(parent,&nbsp;child,&nbsp;beforeChild)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;parent.insertBefore(child,&nbsp;beforeChild);\n&nbsp;&nbsp;},\n&nbsp;&nbsp;\/\/&nbsp;\u79fb\u9664\u8282\u70b9\n&nbsp;&nbsp;removeChild(parent,&nbsp;child)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;parent.removeChild(child);\n&nbsp;&nbsp;}\n&nbsp;&nbsp;\n&nbsp;&nbsp;...\n&nbsp;&nbsp;\n};<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u9664\u4e86\u4e0a\u9762\u7684\u914d\u7f6e\u5185\u5bb9\uff0c\u8fd8\u9700\u8981\u63d0\u4f9b\u4e00\u4e2a\u5bb9\u5668\u7528\u6765\u5c06VNode\u6570\u636e\u683c\u5f0f\u5316\u4e3aJSON\u6570\u636e\uff0c\u4f9b\u5c0f\u7a0b\u5e8fsetData\u4f20\u9012\u7ed9\u89c6\u56fe\u5c42\uff0c\u8fd9\u4e2a\u5bb9\u5668\u7c7b\u5b9e\u73b0\u5982\u4e0b\uff1a<\/p>\n<pre>class&nbsp;Container&nbsp;{\n&nbsp;&nbsp;constructor(context)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;this.root&nbsp;=&nbsp;new&nbsp;VNode({..});&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u6839\u8282\u70b9\n&nbsp;&nbsp;}\n\n&nbsp;&nbsp;toJson(nodes&nbsp;,data)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u5c06VNode\u6570\u636e\u683c\u5f0f\u5316JSON\n&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;json&nbsp;=&nbsp;data&nbsp;||&nbsp;[]\n&nbsp;&nbsp;&nbsp;&nbsp;nodes.forEach(node&nbsp;=&amp;gt;&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;nodeData&nbsp;=&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;node.type,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;props:&nbsp;node.props&nbsp;||&nbsp;{},\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text:&nbsp;node.text,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;node.id,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;children:&nbsp;[]\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.children)&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.toJson(node.children,&nbsp;nodeData.children)\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;json.push(nodeData)\n&nbsp;&nbsp;&nbsp;&nbsp;})\n&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;json\n&nbsp;&nbsp;}\n&nbsp;&nbsp;applyUpdate()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u4f9bHostConfig\u914d\u7f6e\u7684resetAfterCommit\u65b9\u6cd5\u6267\u884c\n&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;root&nbsp;=&nbsp;this.toJson([this.root])[0]\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(root)\n&nbsp;&nbsp;&nbsp;&nbsp;this.context.setData({&nbsp;root});\n&nbsp;&nbsp;}\n&nbsp;&nbsp;...\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u7d27\u63a5\u7740\uff0c\u6211\u4eec\u5c01\u88c5\u4e00\u4e2acreatePageConfig\u65b9\u6cd5\uff0c\u7528\u6765\u6267\u884c\u6e32\u67d3\uff0c\u5176\u4e2dPage\u53c2\u6570\u4e3a React \u7ec4\u4ef6\uff0c\u5373\u4e0a\u6587\u8ba1\u6570\u5668\u7684\u7ec4\u4ef6\u3002<\/p>\n<pre>import&nbsp;*&nbsp;as&nbsp;React&nbsp;from&nbsp;'react';\nimport&nbsp;Container&nbsp;from&nbsp;'.\/container';&nbsp;\/\/&nbsp;\u4e0a\u6587\u5b9a\u4e49\u7684Container\nimport&nbsp;render&nbsp;from&nbsp;'.\/render';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;\u4e0a\u6587\u5b9a\u4e49\u7684render\u65b9\u6cd5\n\nexport&nbsp;default&nbsp;function&nbsp;createPageConfig(component)&nbsp;{&nbsp;&nbsp;\/\/&nbsp;component\u4e3aReact\u7ec4\u4ef6\n&nbsp;&nbsp;const&nbsp;config&nbsp;=&nbsp;{&nbsp;&nbsp;\/\/&nbsp;\u5c0f\u7a0b\u5e8f\u903b\u8f91\u5bf9\u8c61\u5b57\u9762\u91cf\uff0c\u4f9bPage\u65b9\u6cd5\u6ce8\u518c\n&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;root:&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;children:&nbsp;[],\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;},\n&nbsp;&nbsp;&nbsp;&nbsp;onLoad()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.container&nbsp;=&nbsp;new&nbsp;Container(this,&nbsp;'root');\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;pageElement&nbsp;=&nbsp;React.createElement(component,&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page:&nbsp;this,\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.element&nbsp;=&nbsp;render(pageElement,&nbsp;this.container);\n&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;};\n\n&nbsp;&nbsp;return&nbsp;config;\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u5230\u8fd9\u91cc\uff0c\u57fa\u672c\u5df2\u7ecf\u5b9e\u73b0\u5b8c\u5c0f\u7a0b\u5e8f\u6e32\u67d3\u5668\u4e86\uff0c\u4e3a\u4e86\u4f7f\u4ee3\u7801\u8dd1\u8d77\u6765\uff0c\u8fd8\u9700\u8981\u901a\u8fc7\u9759\u6001\u7f16\u8bd1\u6539\u9020\u4e0b React \u8ba1\u6570\u5668\u7ec4\u4ef6\uff0c\u5176\u5b9e\u5c31\u662f\u5728\u672b\u5c3e\u63d2\u5165\u4e00\u53e5\u4ee3\u7801\uff1a<\/p>\n<pre>import&nbsp;React,&nbsp;{&nbsp;Component&nbsp;}&nbsp;from&nbsp;'react';\nexport&nbsp;default&nbsp;class&nbsp;Index&nbsp;extends&nbsp;Component&nbsp;{\n&nbsp;&nbsp;constructor()&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;super();\n&nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count:&nbsp;0\n&nbsp;&nbsp;&nbsp;&nbsp;};\n&nbsp;&nbsp;&nbsp;&nbsp;this.onAddClick&nbsp;=&nbsp;this.onAddClick.bind(this);\n&nbsp;&nbsp;&nbsp;&nbsp;this.onReduceClick&nbsp;=&nbsp;this.onReduceClick.bind(this);\n&nbsp;&nbsp;}\n&nbsp;&nbsp;...\n\n}&nbsp;\n\/\/&nbsp;app.js\u5c01\u88c5\u4e86\u4e0a\u8ff0createPage\u65b9\u6cd5\nPage(require('..\/..\/npm\/app.js').createPage(Index))<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u901a\u8fc7\u8fd9\u6837\uff0c\u5c31\u53ef\u4ee5\u4f7f\u5f97React\u4ee3\u7801\u5728\u5c0f\u7a0b\u5e8f\u771f\u6b63\u8fd0\u884c\u8d77\u6765\u4e86\uff0c\u4f46\u662f\u8fd9\u91cc\u6211\u4eec\u8fd8\u6709\u4e2a\u6d41\u7a0b\u6ca1\u4ecb\u7ecd\uff0c\u4e0a\u8ff0Container\u7c7b\u7684applyUpdate\u65b9\u6cd5\u4e2d\u751f\u6210\u7684\u9875\u9762JSON\u6570\u636e\u8981\u5982\u4f55\u66f4\u65b0\u5230\u89c6\u56fe\uff1f\u9996\u5148\u6211\u4eec\u5148\u6765\u770b\u4e0b\u8fd9\u4e2aJSON\u6570\u636e\u957f\u4ec0\u4e48\u6837\u5b50\uff1a<\/p>\n<pre>\/\/&nbsp;\u7bc7\u5e45\u95ee\u9898\uff0c\u8fd9\u91cc\u53ea\u8d34\u90e8\u5206\u6570\u636e\n{\n\t\"type\":&nbsp;\"root\",\n\t\"props\":&nbsp;{},\n\t\"id\":&nbsp;0,\n\t\"children\":&nbsp;[{\n\t\t\"type\":&nbsp;\"view\",\n\t\t\"props\":&nbsp;{\n\t\t\t\"class\":&nbsp;\"container\"\n\t\t},\n\t\t\"id\":&nbsp;12,\n\t\t\"children\":&nbsp;[{\n\t\t\t\"type\":&nbsp;\"view\",\n\t\t\t\"props\":&nbsp;{\n\t\t\t\t\"class\":&nbsp;\"conut\"\n\t\t\t},\n\t\t\t\"id\":&nbsp;4,\n\t\t\t\"children\":&nbsp;[{\n\t\t\t\t\"type\":&nbsp;\"text\",\n\t\t\t\t\"props\":&nbsp;{},\n\t\t\t\t\"id\":&nbsp;3,\n\t\t\t\t\"children\":&nbsp;[{\n\t\t\t\t\t\"type\":&nbsp;\"plain-text\",\n\t\t\t\t\t\"props\":&nbsp;{},\n\t\t\t\t\t\"text\":&nbsp;\"count:&nbsp;\",\n\t\t\t\t\t\"id\":&nbsp;1,\n\t\t\t\t\t\"children\":&nbsp;[]\n\t\t\t\t},&nbsp;{\n\t\t\t\t\t\"type\":&nbsp;\"plain-text\",\n\t\t\t\t\t\"props\":&nbsp;{},\n\t\t\t\t\t\"text\":&nbsp;\"1\",\n\t\t\t\t\t\"id\":&nbsp;2,\n\t\t\t\t\t\"children\":&nbsp;[]\n\t\t\t\t}]\n\t\t\t}]\n\t\t}\n&nbsp;\t...\n&nbsp;\t...\n&nbsp;\t\t\n\t}]\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u53ef\u4ee5\u770b\u51faJSON\u6570\u636e\uff0c\u5176\u5b9e\u662f\u4e00\u68f5\u7c7b\u4f3cTree UI\u7684\u6570\u636e\uff0c\u8981\u5c06\u8fd9\u4e9b\u6570\u636e\u6e32\u67d3\u51fa\u9875\u9762\uff0c\u53ef\u4ee5\u4f7f\u7528\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u7684Temlate\u8fdb\u884c\u6e32\u67d3\uff0c\u7531\u4e8e\u5c0f\u7a0b\u5e8f\u6a21\u677f\u9012\u5f52\u5d4c\u5957\u4f1a\u6709\u95ee\u9898\uff08\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u9650\u5236\uff09\uff0c\u56e0\u6b64\u9700\u8981\u63d0\u4f9b\u591a\u4e2a\u540c\u6837\u7ec4\u4ef6\u7c7b\u578b\u7684\u6a21\u677f\u8fdb\u884c\u9012\u5f52\u6e32\u67d3\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;template&gt;&lt;\/template&gt;&nbsp;&nbsp;&lt;!-- root\u4e3a\u4e0a\u8ff0\u7684JSON\u6570\u636e --&gt;\n\n\n&lt;template&gt;\n&nbsp;&lt;block&gt;\n&nbsp;&nbsp;&lt;template&gt;&lt;\/template&gt;\n&nbsp;&lt;\/block&gt;&lt;\/template&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;\n&lt;template&gt;\n&nbsp;&nbsp;&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;block&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;template&gt;&lt;\/template&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/block&gt;\n&nbsp;&nbsp;&lt;\/view&gt;&lt;\/template&gt;\n&nbsp;&nbsp;\n&lt;template&gt;\n&nbsp;&nbsp;&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;block&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;template&gt;&lt;\/template&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/block&gt;\n&nbsp;&nbsp;&lt;\/view&gt;&lt;\/template&gt;\n&nbsp;&nbsp;\n&lt;template&gt;\n&nbsp;&nbsp;&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;block&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;template&gt;&lt;\/template&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/block&gt;\n&nbsp;&nbsp;&lt;\/view&gt;&lt;\/template&gt;\n&nbsp;\n...\n...<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u81f3\u6b64\uff0c\u5c31\u53ef\u4ee5\u771f\u6b63\u5b9e\u73b0 React \u4ee3\u7801\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u4e86\uff0c\u53ef\u4ee5\u5728\u91cc\u6267\u884cnpm run build:runtime\u770b\u770b\u6548\u679c\u3002\u8fd0\u884c\u65f6\u65b9\u6848\u4f18\u70b9\u662f\u65e0\u8bed\u6cd5\u9650\u5236\uff0c\uff08\u4e0d\u4fe1\u7684\u8bdd\uff0c\u53ef\u4ee5\u5728\u672c\u9879\u76ee\u91cc\u968f\u4fbf\u5199\u5404\u79cd\u52a8\u6001\u5199\u6cd5\u8bd5\u8bd5\u54e6\uff09\uff0c\u800c\u7f3a\u70b9\u65f6\u6027\u80fd\u6bd4\u8f83\u5dee\uff0c\u4e3b\u8981\u539f\u56e0\u662f\u56e0\u4e3a\u5176setData\u6570\u636e\u91cf\u6bd4\u8f83\u5927\uff08\u4e0a\u6587\u5df2\u7ecf\u8d34\u51fa\u7684JSON\u6570\u636e\uff0c\u59a5\u59a5\u7684\u6bd4\u7f16\u8bd1\u65f6\u65b9\u6848\u5927\uff09\uff0c\u56e0\u6b64\u6027\u80fd\u5c31\u6bd4\u7f16\u8bd1\u65f6\u65b9\u6848\u5dee\u3002\u5f53\u7136\u4e86\uff0c\u4e1a\u754c\u9488\u5bf9\u8fd0\u884c\u65f6\u65b9\u6848\u4e5f\u6709\u505a\u5927\u91cf\u7684\u6027\u80fd\u4f18\u5316\uff0c\u6bd4\u5982\u5c40\u90e8\u66f4\u65b0\u3001\u865a\u62df\u5217\u8868\u7b49\uff0c\u7531\u4e8e\u7bc7\u5e45\u95ee\u9898\uff0c\u8fd9\u91cc\u5c31\u4e0d\u4e00\u4e00\u8bb2\u89e3\uff08\u4ee3\u7801\u4e2d\u4e5f\u6ca1\u6709\u5b9e\u73b0\uff09\u3002<\/p>\n<h2>\u603b\u7ed3<\/h2>\n<p>\u672c\u6587\u4ee5\u6700\u7b80\u5b9e\u73b0\u65b9\u5f0f\u8bb2\u8ff0\u4e86 React \u6784\u5efa\u5c0f\u7a0b\u5e8f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\uff0c\u8fd9\u4e24\u79cd\u65b9\u6848\u4f18\u7f3a\u70b9\u5206\u660e\uff0c\u90fd\u6709\u5404\u81ea\u7684\u4f18\u52bf\uff0c\u5bf9\u4e8e\u8ffd\u6c42\u6027\u80fd\u597d\u573a\u7684\u573a\u666f\uff0c\u7f16\u8bd1\u65f6\u65b9\u6848\u66f4\u4e3a\u5408\u9002\u3002\u5bf9\u4e8e\u7740\u91cd\u5f00\u53d1\u4f53\u9a8c\u4e14\u5bf9\u6027\u80fd\u8981\u6c42\u4e0d\u9ad8\u7684\u573a\u666f\uff0c\u8fd0\u884c\u65f6\u65b9\u6848\u4e3a\u9996\u9009\u3002\u5982\u679c\u60f3\u4e86\u89e3\u66f4\u591a\u6e90\u7801\u5b9e\u73b0\uff0c\u53ef\u4ee5\u53bb\u770b\u4e0b \u3001 \u5b98\u65b9\u6e90\u7801\uff0c\u6b22\u8fce\u4e92\u76f8\u8ba8\u8bba\u3002<\/p>\n<h2>\u9879\u76ee\u5730\u5740<\/h2>\n<blockquote><p>\n  https:\/\/github.com\/canfoo\/react-wxapp\n<\/p><\/blockquote>\n<p>\u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662fReact\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\u5206\u4eab\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>react\u5982\u4f55\u6784\u5efa\u5c0f\u7a0b\u5e8f\uff1f\u4e0b\u9762\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u901a\u8fc71500\u884c\u4ee3\u7801\u63ed\u79d8react\u5982\u4f55\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\uff0c\u4ecb\u7ecd\u4e00\u4e0breact \u6784\u5efa\u5c0f\u7a0b\u5e8f\u4e24\u79cd\u5b9e\u73b0\u65b9\u6848\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01 \u4f60\u662f\u5426\u4f7f\u7528\u8fc7 \u3001 \u7c7b\u4f3c\u7684\u6846\u67b6\uff1f\u4f60\u662f\u5426\u60f3\u4e86\u89e3\u8fd9\u7c7b\u6846\u67b6\u5982\u4f55\u5b9e\u73b0 React \u4ee3\u7801\u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\uff1f\u5982\u679c\u662f\u7684\u8bdd\uff0c\u90a3\u4e48\u4e5f\u8bb8\u4f60\u53ef\u4ee5\u82b1\u559d\u4e00\u676f\u5496\u5561\u7684\u65f6\u95f4\u7ee7\u7eed\u5f80\u4e0b\u9605\u8bfb\uff0c\u672c\u6587\u5c06\u901a\u8fc7\u4e24\u79cd\u65b9\u6848\u5b9e\u73b0 React \u8fd0\u884c\u5230\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u3002\u5982\u679c\u4f60\u73b0\u5728\u5c31\u60f3\u9605\u8bfb\u8fd91500\u884c\u7684\u5b9e\u73b0\u4ee3\u7801\uff0c\u90a3\u4e48\u53ef\u4ee5\u76f4\u63a5\u70b9\u51fb\u8fdb\u884c\u83b7\u53d6\uff08\u4e5f\u8bb8\u8981\u591a\u559d\u51e0\u676f\u5496\u5561\uff09\u3002 \u9879\u76ee\u63cf\u8ff0 \u4e3a\u4e86\u66f4\u6e05\u6670\u63cf\u8ff0\u5b9e\u73b0\u8fc7\u7a0b\uff0c\u6211\u4eec\u628a\u5b9e\u73b0\u65b9\u6848\u5f53\u4f5c\u4e00\u4e2a\u9879\u76ee\u6765\u5bf9\u5f85\u3002\u9879\u76ee\u9700\u6c42\uff1a\u4f7f\u5982\u4e0b\u8ba1\u6570\u5668\u529f\u80fd\u7684 React \u4ee3\u7801\u8fd0\u884c\u5230\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u3002 import&nbsp;React,&nbsp;{&nbsp;Component&nbsp;}&nbsp;from&nbsp;&#8216;react&#8217; import&nbsp;{&nbsp;View,&nbsp;Text,&nbsp;Button&nbsp;}&nbsp;from&nbsp;&#8216;@leo\/components&#8217; import&nbsp;&#8216;.\/index.css&#8217; export&nbsp;default&nbsp;class&nbsp;Index&nbsp;extends&nbsp;Component&nbsp;{ &nbsp;&nbsp;constructor()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;super() &nbsp;&nbsp;&nbsp;&nbsp;this.state&nbsp;=&nbsp;{&nbsp;count:&nbsp;0&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;this.onAddClick&nbsp;=&nbsp;this.onAddClick.bind(this) &nbsp;&nbsp;&nbsp;&nbsp;this.onReduceClick&nbsp;=&nbsp;this.onReduceClick.bind(this) &nbsp;&nbsp;} &nbsp;&nbsp;componentDidMount&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;console.log(&#8216;\u6267\u884ccomponentDidMount&#8217;) &nbsp;&nbsp;&nbsp;&nbsp;this.setState({&nbsp;count:&nbsp;1&nbsp;}) &nbsp;&nbsp;} &nbsp;&nbsp;onAddClick()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.setState({&nbsp;count:&nbsp;this.state.count&nbsp;+&nbsp;1&nbsp;}) &nbsp;&nbsp;} &nbsp;&nbsp;onReduceClick()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;this.setState({&nbsp;count:&nbsp;this.state.count&nbsp;&#8211;&nbsp;1&nbsp;}) &nbsp;&nbsp;} &nbsp;&nbsp;render&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;text&nbsp;=&nbsp;this.state.count&nbsp;%&nbsp;2&nbsp;===&nbsp;0&nbsp;?&nbsp;&#8216;\u5076\u6570&#8217;&nbsp;:&nbsp;&#8216;\u5947\u6570&#8217; &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;count:&nbsp;{this.state.count}&lt;\/text&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;text&gt;{text}&lt;\/text&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;+1&lt;\/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&gt;-1&lt;\/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/view&gt; &nbsp;&nbsp;&nbsp;&nbsp;) &nbsp;&nbsp;} } \u767b\u5f55\u540e\u590d\u5236 \u5982\u679c\u4f7f\u7528\u8fc7 Taro \u6216\u8005 Remax \u7b49\u6846\u67b6\uff0c\u5bf9\u4e0a\u8ff0\u4ee3\u7801\u5e94\u8be5\u6709\u4f3c\u66fe\u76f8\u8bc6\u7684\u611f\u89c9\uff0c\u4e0a\u8ff0\u4ee3\u7801\u6b63\u5f0f\u6a21\u4eff\u8fd9\u7c7b\u6846\u67b6\u7684 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-34168","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=34168"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34168\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=34168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=34168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=34168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}