@linux1s1s
2017-01-19T17:29:57.000000Z
字数 1369
阅读 1541
Forward Time-React Native
Forward 2017-01
我们在了解RN之前，先来了解一下前端的架构React。
对于React有个简单的入门教程，可以参考React 入门实例教程。
这里Demo-Ajax做进一步简单分析：
源码
<!DOCTYPE html><html><head><script src="../build/react.js"></script><script src="../build/react-dom.js"></script><script src="../build/browser.min.js"></script><script src="../build/jquery.min.js"></script></head><body><div id="example"></div><script type="text/babel">var UserGist = React.createClass({getInitialState: function() {return {username: '',lastGistUrl: ''};},componentDidMount: function() {$.get(this.props.source, function(result) {var lastGist = result[0];if (this.isMounted()) {this.setState({username: lastGist.owner.login,lastGistUrl: lastGist.html_url});}}.bind(this));},render: function() {return (<div>{this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.</div>);}});ReactDOM.render(<UserGist source="https://api.github.com/users/octocat/gists" />,document.getElementById('example'));</script></body></html>
对上面的源码简要分析一下：
L7 引入jQuery -- <script src="../build/jquery.min.js"></script>
然后Ajax部分：
$.get(this.props.source, function(result) {var lastGist = result[0];if (this.isMounted()) {this.setState({username: lastGist.owner.login,lastGistUrl: lastGist.html_url});}}.bind(this));
this.props.source变量在下面指定
<UserGist source="https://api.github.com/users/octocat/gists" />
我们运行起来，抓包如下：
数组的首个item，
owner节点下的login字段对应octocat;
验证
