{"id":5574,"date":"2016-11-30T16:08:08","date_gmt":"2016-11-30T08:08:08","guid":{"rendered":"https:\/\/sdeno.com\/?p=5574"},"modified":"2016-11-30T17:49:09","modified_gmt":"2016-11-30T09:49:09","slug":"react%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=5574","title":{"rendered":"react\u7b14\u8bb0"},"content":{"rendered":"

\u5728pc\u7aef\u4e2d\u4f7f\u7528react\uff0c\u5728\u79fb\u52a8\u7aef\u4f7f\u7528react native\u3002<\/p>\n

1\uff0c\u73af\u5883\u90e8\u7f72<\/span><\/p>\n

 <script src=\"..\/build\/react.js\"><\/script>\r\n <script src=\"..\/build\/react-dom.js\"><\/script> \/\/react\u60f3\u8981\u8ddfdom\u4ea4\u4e92\u5c31\u9760\u5b83\r\n <script src=\"..\/build\/browser.min.js\"><\/script>\/\/\u5c06JSX\u8bed\u6cd5(\u5c31\u662fjs\u548chtml\u6df7\u642d\u8bed\u8a00)\u8f6c\u4e3a JavaScript \u8bed\u6cd5<\/pre>\n
 <\/p>\n
2\uff0cReactDOM.render()<\/span><\/p>\n
\u5c06\u865a\u62dfdom\u63d2\u5165\u9875\u9762\u4e2d\uff0c\u6210\u4e3a\u771f\u5b9edom\u663e\u793a\u51fa\u6765<\/p>\n
<body>\r\n <div id=\"example\"><\/div>\r\n <script type=\"text\/babel<\/span>\"> \/\/\u8fd9\u91cc\u8981\u6ce8\u610f\u7c7b\u578b\uff0c\u8bf4\u660e\u662f\u7528\u4e86jsx\u8bed\u6cd5\r\n  ReactDOM.render(\r\n   <h1>Hello, world!<\/h1>,\r\n   document.getElementById('example')\r\n  );\r\n <\/script>\r\n<\/body><\/pre>\n
 <\/p>\n
3\uff0cJSX \u8bed\u6cd5\u00a0<\/span><\/p>\n
HTML \u8bed\u8a00\u76f4\u63a5\u5199\u5728 JavaScript \u8bed\u8a00\u4e4b\u4e2d\uff0c\u6df7\u5408\u5c31\u662fjsx<\/p>\n
\u4e3a\u4e86\u6d4f\u89c8\u5668\u80fd\u8bc6\u522b\u6240\u4ee5\u8981\u52a0\u8f7dbrowser.min.js\uff0c\u90fd\u8f6c\u5316\u4e3ajs<\/p>\n
var names = ['Alice', 'Emily', 'Kate'];\r\n\r\nReactDOM.render(\r\n  <div>\r\n  {\r\n    names.map(function (name) {\r\n       return <div>Hello, {name}!<\/div>\r\n    })\r\n  }\r\n <\/div>,\r\n document.getElementById('example')\r\n);<\/pre>\n
 <\/p>\n
\u6570\u7ec4\u91cc\u9762\u76f4\u63a5\u52a0\u5165html\u4e0d\u9700\u8981\u5355\u5f15\u53f7\u548c\u52a0\u53f7\u4e32\u8054\uff1a<\/p>\n
var arr = [\r\n <h1>Hello world!<\/h1>,\r\n <h2>React is awesome<\/h2>,\r\n];\r\nReactDOM.render(\r\n <div>{arr}<\/div>,\r\n document.getElementById('example')\r\n);<\/pre>\n
 <\/p>\n
4\u3001\u7ec4\u4ef6React.createClass({})\u00a0<\/span><\/p>\n
var H<\/span>elloMessage = React.createClass({   \/\/\u8fd9\u4e2a\u79f0\u4e3a\u7ec4\u4ef6\uff0c\u7ec4\u4ef6\u540d\u79f0\u9996\u5b57\u6bcd\u5fc5\u987b\u5927\u5199\r\n render: function() {\r\n   return <h1>Hello {this.props.name}<\/h1>; \/\/\u9876\u7ea7\u5c42\u53ea\u80fd\u6709\u4e00\u4e2a\u7236\u5bb9\u5668\uff0cthis.props\u7528\u6765\u83b7\u53d6\u7528\u6237\u4f20\u6765\u7684\u53c2\u6570\r\n }\r\n});\r\n\r\nReactDOM.render(\r\n <HelloMessage name=\"John\" \/>,  \/\/\u53ef\u4ee5\u770b\u6210\u662f\u8c03\u7528\u4e00\u4e2afn\u51fd\u6570,HelloMessage(\"John\")\uff0c\u6ce8\u610fclass\u548cfor\u662fjs\u5173\u952e\u8bcd\uff0c\u5982\u679c\u60f3\u8981\u81ea\u5b9a\u4e49\u8fd9\u6837\u7684\u540d\u79f0\u53ea\u80fd\u5199\u6210className\u548chtmlFor\r\n document.getElementById('example')\r\n);<\/pre>\n
 <\/p>\n
\u00a05\uff0cthis.props\u00a0<\/span><\/p>\n
\u7528\u6765\u83b7\u53d6\u7528\u6237\u4f20\u6765\u7684\u53c2\u6570\u6216\u8005\u9876\u7ea7\u5bb9\u5668\u7684\u6240\u6709\u5b50\u8282\u70b9\uff0c\uff08\u4e00\u822c\u58f0\u660e\u4e86\u5c31\u4e0d\u4f1a\u6539\u53d8\uff09<\/p>\n
this.props.\u81ea\u5b9a\u4e49\u5c5e\u6027 \u00a0 \u00a0\/\/\u83b7\u53d6\u7528\u6237\u4f20\u6765\u7684\u53c2\u6570<\/p>\n
var HelloMessage = React.createClass({ \r\n render: function() {\r\n  return <h1>Hello {this.props.name<\/span>}<\/h1>; \/\/\u83b7\u53d6name\u7684\u503c\u5373\u662fJohn\"\r\n }\r\n});\r\n\r\n\r\nReactDOM.render(\r\n <HelloMessage name=\"John\"<\/span> \/>  \/\/name=\"John\"\u662f\u7528\u6237\u81ea\u5b9a\u4e49\u7684\u53c2\u6570\r\n document.getElementById('example')\r\n);<\/pre>\n
 <\/p>\n
this.props.children \u00a0 \u00a0\/\/\u83b7\u53d6\u9876\u7ea7\u5bb9\u5668\u7684\u6240\u4ee5\u5b50\u8282\u70b9<\/p>\n
\u4e0b\u9762\u4f8b\u5b50\u4f7f\u7528this.props.children\u5c31\u662f\u83b7\u53d6\u5230\u6240\u6709\u7684span\uff0c\u56e0\u4e3a\u5b83\u4eec\u662f\u9876\u7ea7\u5bb9\u5668\u7684\u5b50\u8282\u70b9<\/p>\n
ReactDOM.render(\r\n <NotesList>\r\n  <span>hello<\/span>\r\n  <span>world<\/span>\r\n <\/NotesList>,\r\n document.body\r\n);<\/pre>\n
\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\uff0c this.props.children \u7684\u503c\u6709\u4e09\u79cd\u53ef\u80fd\uff1a
\n\u5982\u679c\u5f53\u524d\u7ec4\u4ef6\u6ca1\u6709\u5b50\u8282\u70b9\uff0c\u5b83\u5c31\u662f undefined ;
\n\u5982\u679c\u6709\u4e00\u4e2a\u5b50\u8282\u70b9\uff0c\u6570\u636e\u7c7b\u578b\u662f object \uff1b
\n\u5982\u679c\u6709\u591a\u4e2a\u5b50\u8282\u70b9\uff0c\u6570\u636e\u7c7b\u578b\u5c31\u662f array \u3002
\n\u6240\u4ee5\uff0c\u5904\u7406 this.props.children \u7684\u65f6\u5019\u8981\u5c0f\u5fc3\u3002<\/p>\n
React \u63d0\u4f9b\u4e00\u4e2a\u5de5\u5177\u65b9\u6cd5 React.Children \u6765\u5904\u7406 this.props.children\uff0c\u4f7f\u7528\u6848\u4f8b\uff1a<\/p>\n
var NotesList = React.createClass({\r\n render: function() {\r\n   return (\r\n    <ol>\r\n     {\r\n       React.Children<\/span>.map(this.props.children, function (child) {\r\n         return <li>{child}<\/li>;\r\n       })\r\n     }\r\n    <\/ol>\r\n   );\r\n }\r\n});\r\n\r\nReactDOM.render(\r\n <NotesList>\r\n   <span>hello<\/span>\r\n   <span>world<\/span>\r\n <\/NotesList>,\r\n document.body\r\n);<\/pre>\n
\u6211\u4eec\u53ef\u4ee5\u7528 React.Children.map \u6765\u904d\u5386\u5b50\u8282\u70b9\uff0c\u800c\u4e0d\u7528\u62c5\u5fc3 this.props.children \u7684\u6570\u636e\u7c7b\u578b\u662f undefined \u8fd8\u662f object<\/p>\n
 <\/p>\n
\u00a06\uff0cPropTypes \u00a0<\/span><\/p>\n
\u7528\u6765\u5224\u65ad\u7528\u6237\u4f20\u6765\u7684\u53c2\u6570\u662f\u5426\u7b26\u5408\u8981\u6c42<\/p>\n
var MyTitle = React.createClass({\r\n propTypes: {\r\n   title: React.PropTypes.string.isRequired, \/\/title\u503c\u5fc5\u987b\u662f\u5b57\u7b26\u4e32\r\n },\r\n\r\n render: function() {\r\n   return <h1> {this.props.title} <\/h1>;\r\n }\r\n});\r\n\r\n\r\nvar data = 123;\r\nReactDOM.render(\r\n  <MyTitle title={data} \/>,  \/\/title\u7684\u503c\u5fc5\u987b\u662f\u5b57\u7b26\u4e32\uff0c\u5982\u679c\u522b\u7684\u7c7b\u578b\u503c\u5c31\u4f1a\u62a5\u9519\r\n  document.body\r\n);<\/pre>\n
 <\/p>\n
 <\/p>\n
\u00a07\uff0cthis.refs \u00a0 react\u83b7\u53d6DOM\u8282\u70b9\u00a0<\/span><\/p>\n
var MyComponent = React.createClass({\r\n handleClick: function() {\r\n    this.refs<\/span>.myTextInput.focus();\r\n },\r\n render: function() {\r\n   return (\r\n     <div>\r\n       <input type=\"text\" ref=<\/span>\"myTextInput\" \/> \/\/\u8fd9\u91cc\u7684ref\u5c31\u76f8\u5f53\u4e8eid,\u8fd9\u6837react\u80fd\u65b9\u4fbf\u83b7\u53d6\r\n       <input type=\"button\" value=\"Focus the text input\" onClick={this.handleClick} \/>\r\n     <\/div>\r\n   );\r\n }\r\n});\r\n\r\nReactDOM.render(\r\n <MyComponent \/>,\r\n document.getElementById('example')\r\n);<\/pre>\n
 <\/p>\n
8\uff0cthis.state\u00a0<\/span><\/p>\n
\u52a8\u6001\u503c\u3001\u72b6\u6001\u503c\uff0c\u4f1a\u968f\u7740\u7528\u6237\u8ddf\u754c\u9762\u4ea4\u4e92\u968f\u65f6\u6539\u53d8<\/p>\n
var LikeButton = React.createClass({\r\n getInitialState: function() { \/\/\u521d\u59cb\u5316\u52a8\u6001\u503c\u5728\u6b64\u51fd\u6570\u4e2d\u8fdb\u884c\r\n   return {liked: false}; \/\/\u52a8\u6001\u503c\u90fd\u58f0\u660e\u5728\u8fd9\u91cc\u9762\uff0c\u83b7\u53d6\u91cc\u9762\u7684\u503c\u4f7f\u7528\uff1athis.state.xxx\r\n },\r\n handleClick: function(event) {\r\n   this.setState({liked: !this.state.liked}); \/\/\u4fee\u6539\u52a8\u6001\u503c\u4f7f\u7528this.setState({})\r\n },\r\n render: function() {\r\n   var text = this.state.liked ? 'like' : 'haven\\'t liked';\r\n   return (\r\n     <p onClick={this.handleClick}>\r\n        You {text} this. Click to toggle.\r\n     <\/p>\r\n   );\r\n }\r\n});\r\n\r\nReactDOM.render(\r\n <LikeButton \/>,\r\n document.getElementById('example')\r\n);<\/pre>\n
 <\/p>\n
9\uff0c\u4e8b\u4ef6<\/span><\/p>\n
react\u4e5f\u6709\u81ea\u5df1\u7684\u4e8b\u4ef6\u65b9\u6cd5\uff0c\u4f8b\u5982 click\u3001hover\u7b49\u7b49\uff0c\u4e0b\u9762\u770b\u4e00\u4e2a\u4f8b\u5b50\uff1a<\/p>\n
var Input = React.createClass({\r\n getInitialState: function() {\r\n   return {value: 'Hello!'};\r\n },\r\n handleChange: function(event) {\r\n   this.setState({value: event.target.value<\/span>});\r\n },\r\n render: function () {\r\n   var value = this.state.value;\r\n   return (\r\n    <div>\r\n      <input type=\"text\" value={<\/span>value}<\/span> onChange<\/span>={<\/span>this.handleChange}<\/span> \/>\r\n      <p>{value}<\/p>\r\n    <\/div>\r\n   );\r\n }\r\n});\r\n\r\nReactDOM.render(<Input\/>, document.body);<\/pre>\n
1,{}:\u5728jsx\u8bed\u6cd5\u4e2d\u4f20\u53d8\u91cf\u5230\u865a\u62dfhtml\u8981\u7528\u5230
\n2,event.target:\u5c31\u76f8\u5f53\u4e8e$(this)
\n3,on+\u4e8b\u4ef6\u540d:\u60f3\u7ed9\u54ea\u4e2a\u865a\u62dfdom\u7ed1\u5b9a\u4e8b\u4ef6\u5c31\u52a0\u4e0aon+\u4e8b\u4ef6\u540d<\/p>\n
 <\/p>\n
10\uff0ccss\u6837\u5f0f<\/span><\/p>\n
render: function () {\r\n return (\r\n   <div style={{opacity: 0.5,marginLeft:10px}}<\/span>>\r\n     Hello {this.props.name}\r\n   <\/div>\r\n );\r\n}<\/pre>\n
 <\/p>\n
\u00a011\uff0cajax (\u4f7f\u7528\u4e86jquery)<\/span><\/p>\n
var UserGist = React.createClass({\r\n getInitialState: function() {\r\n   return {\r\n     username: '',\r\n     lastGistUrl: ''\r\n   };\r\n },\r\n\r\n componentDidMount: function() {\r\n    $.get(this.props.source<\/span>, function(result) { \/\/\u8fd9\u91cc\u4f7f\u7528\u7684\u662fjquery\u7684$.get\r\n      var lastGist = result[0];\r\n      if (this.isMounted()<\/span>) {\r\n        this.setState({\r\n          username: lastGist.owner.login,\r\n          lastGistUrl: lastGist.html_url\r\n        });\r\n      }\r\n    }.bind(this)<\/span>);\r\n },\r\n\r\n render: function() {\r\n   return (\r\n     <div>\r\n       {this.state.username}'s last gist is\r\n       <a href={this.state.lastGistUrl}>here<\/a>.\r\n     <\/div>\r\n   );\r\n }\r\n});\r\n\r\nReactDOM.render(\r\n <UserGist source<\/span>=\"https:\/\/api.github.com\/users\/octocat\/gists\" \/>,\r\n document.body\r\n);<\/pre>\n
http:\/\/www.ruanyifeng.com\/blog\/2015\/03\/react.html\u00a0<\/a><\/p>\n
\u5b66\u4e60react\u5fc5\u987b\u8981\u4e86\u89e3 \u751f\u547d\u5468\u671f\uff0c\u4e0d\u7136\u5f88\u96be\u5b66\u4e60\u4e0b\u53bb\uff1a\u300areact native\u751f\u547d\u5468\u671f<\/a>\u300b<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5728pc\u7aef\u4e2d\u4f7f\u7528react\uff0c\u5728\u79fb\u52a8\u7aef\u4f7f\u7528react native\u3002 1\uff0c\u73af\u5883\u90e8\u7f72 <script src= […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-5574","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5574"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5574\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}