{"id":1719,"date":"2017-03-26T15:34:30","date_gmt":"2017-03-26T07:34:30","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=1719"},"modified":"2017-03-26T16:44:54","modified_gmt":"2017-03-26T08:44:54","slug":"react%e5%88%9d%e6%ad%a5%e5%85%a5%e9%97%a8%e7%9a%84%e7%9f%a5%e8%af%86%e6%95%b4%e7%90%86","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=1719","title":{"rendered":"React\u521d\u6b65\u5165\u95e8\u7684\u77e5\u8bc6\u6574\u7406"},"content":{"rendered":"

\u5bf9\u4e8eangularJS\u6211\u73b0\u5728\u4e0d\u505a\u8bc4\u4ef7\uff0c\u73b0\u5728\u5927\u70ed\u7684react\u548cvue\uff0c\u90fd\u662f\u524d\u7aef\u7ec4\u4ef6\u5316\u7684\u65b9\u5411\uff0c\u5efa\u8bae\u5165\u95e8\u5176\u4e2d\u4efb\u610f\u4e00\u4e2a\u3002\u4eca\u5929\u6211\u5c31\u6765\u8c08\u8c08react\u7684\u521d\u6b65\u5165\u95e8\u54af\u3002<\/p>\n

\u7b80\u8981\u4ecb\u7ecdreact\uff0c\u6e32\u67d3\u89c6\u56fe\u7684\u7684\u4e00\u4e2ajavascript\u4f9d\u8d56\u5e93\uff0c\u4e0d\u662f\u4e00\u4e2aMVC\u6846\u67b6\uff0c\u4fdd\u8bc1\u7ec4\u4ef6\u4ee3\u7801\u7684\u7b80\u5355\u5316\uff0c\u8c03\u8bd5\u7b80\u5355\u3001\u5f00\u53d1\u7b80\u5355
\n\u8be6\u7ec6\u4fe1\u606f\uff1a\u4e2d\u6587\u7f51\uff08http:\/\/www.css88.com\/react\/docs\/component-specs.html\uff09\u793e\u533a\uff08http:\/\/react-china.org\/\uff09\u5b98\u7f51\uff08https:\/\/facebook.github.io\/react\/\uff09<\/p>\n

\u4f7f\u7528react\u5c31\u6700\u597d\u57fa\u4e8enode.js\uff08\u6700\u597d\u7248\u672c\u57284.7\u4e4b\u4e0a\uff0c\u53c8\u4e0d\u8981\u592a\u65b0\u7248\u672c\uff09\uff0cnpm\u53bb\u7ba1\u7406\u5305\uff0c\u4e0ewebpack\u3001gulp\u4e00\u8d77\u4f7f\u7528\uff0c\u4fdd\u8bc1\u6846\u67b6\u4e0d\u8981\u592a\u91cd\u3002<\/p>\n

\u63a8\u8350\u5b66\u4e60\u591a\u770b\u770b\u5b98\u65b9\u6587\u6863\uff01\uff01<\/p>\n

\u7ed9\u6211\u611f\u89c9\u7528react\u6700\u6df1\u7684\u4fbf\u662f\uff1a
\n1\u3001\u5b66\u4e60react\uff0c\u4e5f\u9700\u8981\u5b66\u4e60es6\u8bed\u6cd5\uff0c\u5b66\u4e60\u6700\u65b0\u7684\u8bed\u6cd5\u77e5\u8bc6\uff1b
\n2\u3001react\u3001\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u3001vue\u8bed\u6cd5\u90fd\u5f88\u63a5\u8fd1\uff0c\u91cd\u5fc3\u90fd\u5728\u7ec4\u4ef6\u4e0a
\n3\u3001react\u7528\u7684\u662f\u865a\u62dfDOM\uff0c\u8fd9\u5c31\u8ba9jquery\u7684\u5730\u4f4d\u4e0b\u964d\u4e86\u5f88\u591a\uff0c\u4e0a\u624b\u65f6\u5019\u5f88\u4e0d\u4e60\u60ef
\n4\u3001\u6211\u603b\u662f\u628areact\u7ec4\u4ef6\u770b\u6210\u4e00\u4e2a\u72b6\u6001\u673a–React \u628a\u7528\u6237\u754c\u9762\u5f53\u4f5c\u7b80\u5355\u72b6\u6001\u673a\u3002\u628a\u7528\u6237\u754c\u9762\u60f3\u50cf\u6210\u62e5\u6709\u4e0d\u540c\u72b6\u6001\u7136\u540e\u6e32\u67d3\u8fd9\u4e9b\u72b6\u6001\uff0c\u53ef\u4ee5\u8f7b\u677e\u8ba9\u7528\u6237\u754c\u9762\u548c\u6570\u636e\u4fdd\u6301\u4e00\u81f4\u3002
\nReact \u91cc\uff0c\u53ea\u9700\u66f4\u65b0\u7ec4\u4ef6\u7684 state\uff0c\u7136\u540e\u6839\u636e\u65b0\u7684 state \u91cd\u65b0\u6e32\u67d3\u7528\u6237\u754c\u9762\uff08\u4e0d\u8981\u64cd\u4f5c DOM\uff09\u3002React \u6765\u51b3\u5b9a\u5982\u4f55\u6700\u9ad8\u6548\u5730\u66f4\u65b0 DOM\u3002<\/p>\n

\u590d\u7528\u7ec4\u4ef6\u9700\u8981\u5145\u5206\u8ba8\u8bba\uff0c\u7136\u540e\u518d\u53bb\u5f00\u53d1\uff0c\u5c31\u80fd\u51cf\u8f7b\u5de5\u4f5c,\u6765\u770b\u770b\u6211\u5199\u7684\u79fb\u52a8\u7aef\u7684\u9875\u9762\u5e95\u90e8<\/p>\n

\"\u9875\u9762\u5e95\u90e8\"<\/p>\n

\uff08\u76ee\u524d\u53ea\u80fd\u5c55\u793a\u90e8\u5206\uff09\u914d\u7f6e\u6587\u4ef6\uff1a<\/p>\n

var webpack = require('webpack');\r\nvar path = require('path');\r\nmodule.exports = {\r\n  \/\/\u5165\u53e3\u6587\u4ef6\r\n  entry: {\r\n    \/\/ index: ['.\/pc\/resources\/entry\/index'],\r\n    mobile: ['.\/wap\/resources\/entry\/mobile.index'],\r\n    footer: ['.\/wap\/resources\/entry\/mobile.footer']\r\n  },\r\n  \/\/\u8f93\u51fa\u6587\u4ef6\r\n  output: {\r\n    path: path.join(__dirname, '.\/wap\/resources\/build'),\r\n    \/\/ path: path.join(__dirname, '.\/pc\/resources\/build'),\r\n    filename: '[name].build.js'\r\n  },\r\n  resolve: {\r\n    extensions: ['.css', '.js', '.jsx']\r\n  },<\/pre>\n
footer.js\uff1aFooter\u7ec4\u4ef6
\n\u9875\u9762\u5e95\u90e8\u56db\u4e2a\u5bfc\u822a\u6709\u4e24\u4e2a\u72b6\u6001\uff1a\u6fc0\u6d3b\u548c\u672a\u6fc0\u6d3b\uff0c
\n\u9ed8\u8ba4\u8bbe\u7f6e\u4e3a\u672a\u6fc0\u6d3b\uff1b
\n\u6fc0\u6d3b\u72b6\u6001\u5219\u662f\u5f15\u7528\u7ec4\u4ef6\u7684\u5224\u65ad\uff0c\u6211\u76ee\u524d\u662f\u901a\u8fc7type\uff1a1 \u9996\u9875\uff0c2 vr\u662f\u600e\u4e48\u73a9\u7684\uff0c3 \u73a9\u4ec0\u4e48vr\u6e38\u620f\uff0c4 \u6211\u00a0 \u56db\u4e2a\u6a21\u5757\u6765\u4f5c\u533a\u5206
\n\u6574\u4e2a\u5f15\u7528\u65b9\u5f0f\u7279\u522b\u7b80\u5355<\/p>\n
import React, {\r\n\tComponent\r\n} from 'react';\r\nimport {\r\n\trender\r\n} from 'react-dom';\r\n\r\nvar url = location.search;\r\nvar urlObj = url2json(url);\r\nvar type = urlObj.type ? urlObj.type : 1;\r\nclass Footer extends Component {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.state = {\r\n\t\t\tindex: props.index,\r\n\t\t\titems: [{\r\n\t\t\t\timg: \"\/src\/img\/mobile\/home.svg\",\r\n\t\t\t\t_href: '\/?type=1',\r\n\t\t\t\ttitle: '\u9996\u9875',\r\n\t\t\t\t_class:''\r\n\t\t\t}, {\r\n\t\t\t\timg: \"\/src\/img\/mobile\/video.svg\",\r\n\t\t\t\t_href: \"\/vr_video?type=2\",\r\n\t\t\t\ttitle: '\u6e38\u620f\u89c6\u9891',\/\/\u6e38\u620f\u89c6\u9891\r\n\t\t\t\t_class:''\r\n\t\t\t}, {\r\n\t\t\t\timg: \"\/src\/img\/mobile\/game_gray.svg\",\r\n\t\t\t\t_href: \"\/vr_app?type=3\",\r\n\t\t\t\ttitle: '\u6e38\u620f',\/\/\u6e38\u620f\r\n\t\t\t\t_class:''\r\n\t\t\t}, {\r\n\t\t\t\timg: \"\/src\/img\/mobile\/account.svg\",\r\n\t\t\t\t_href: \"\/account?account=1&type=4\",\r\n\t\t\t\ttitle: '\u6211',\r\n\t\t\t\t_class:''\r\n\t\t\t}]\r\n\t\t};\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst items = this.state.items.map(function(item, i) {\r\n\t\t\tif (i+1==this.state.index) {\r\n\t\t\t\titem._class=\"color-yellow\";\r\n\t\t\t\tswitch (+this.state.index) {\r\n\t\t\t\t\tcase 1:\r\n\t\t\t\t\t\titem.img = '\/src\/img\/mobile\/home_yellow.svg';\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase 2:\r\n\t\t\t\t\t\titem.img = '\/src\/img\/mobile\/video_yellow.svg';\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase 3:\r\n\t\t\t\t\t\titem.img = '\/src\/img\/mobile\/game_yellow.svg';\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase 4:\r\n\t\t\t\t\t\titem.img = '\/src\/img\/mobile\/account_yellow.svg';\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\treturn (\r\n\t\t\t\t<a href={item._href} key={item.title}>\r\n\t\t\t<img src={item.img} alt=\"vr\u699c\u5355\"\/><br\/>\r\n\t\t\t<span className={item._class}>{item.title}<\/span>\r\n\t\t\t<\/a>)\r\n\t\t}, this);\r\n\r\n\t\treturn (\r\n\t\t\t<div className=\"footer-container\">\r\n\t\t{items}\r\n\t\t<\/div>\r\n\t\t);\r\n\t}\r\n}\r\n\r\nrender(<Footer index={type}\/>, document.getElementById('footer'));<\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » React\u521d\u6b65\u5165\u95e8\u7684\u77e5\u8bc6\u6574\u7406<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u5bf9\u4e8eangularJS\u6211\u73b0\u5728\u4e0d\u505a\u8bc4\u4ef7\uff0c\u73b0\u5728\u5927\u70ed\u7684react\u548cvue\uff0c\u90fd\u662f\u524d\u7aef\u7ec4\u4ef6\u5316\u7684\u65b9\u5411\uff0c\u5efa\u8bae\u5165\u95e8\u5176\u4e2d\u4efb\u610f\u4e00\u4e2a\u3002\u4eca\u5929\u6211\u5c31\u6765\u8c08\u8c08react\u7684\u521d\u6b65\u5165\u95e8\u54af\u3002 \u7b80\u8981\u4ecb\u7ecdreact\uff0c\u6e32\u67d3\u89c6\u56fe\u7684\u7684\u4e00\u4e2ajavasc […]<\/p>\n","protected":false},"author":1,"featured_media":317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[186],"tags":[39],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1719"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1719"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1719\/revisions"}],"predecessor-version":[{"id":1720,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/1719\/revisions\/1720"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/317"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1719"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}