[关闭]
@linux1s1s 2017-01-19T09:29:57.000000Z 字数 1369 阅读 908

Forward Time-React Native

Forward 2017-01


我们在了解RN之前,先来了解一下前端的架构React

对于React有个简单的入门教程,可以参考React 入门实例教程
这里Demo-Ajax做进一步简单分析:

源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="../build/react.js"></script>
  5. <script src="../build/react-dom.js"></script>
  6. <script src="../build/browser.min.js"></script>
  7. <script src="../build/jquery.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="example"></div>
  11. <script type="text/babel">
  12. var UserGist = React.createClass({
  13. getInitialState: function() {
  14. return {
  15. username: '',
  16. lastGistUrl: ''
  17. };
  18. },
  19. componentDidMount: function() {
  20. $.get(this.props.source, function(result) {
  21. var lastGist = result[0];
  22. if (this.isMounted()) {
  23. this.setState({
  24. username: lastGist.owner.login,
  25. lastGistUrl: lastGist.html_url
  26. });
  27. }
  28. }.bind(this));
  29. },
  30. render: function() {
  31. return (
  32. <div>
  33. {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
  34. </div>
  35. );
  36. }
  37. });
  38. ReactDOM.render(
  39. <UserGist source="https://api.github.com/users/octocat/gists" />,
  40. document.getElementById('example')
  41. );
  42. </script>
  43. </body>
  44. </html>

对上面的源码简要分析一下:
L7 引入jQuery -- <script src="../build/jquery.min.js"></script>

然后Ajax部分:

  1. $.get(this.props.source, function(result) {
  2. var lastGist = result[0];
  3. if (this.isMounted()) {
  4. this.setState({
  5. username: lastGist.owner.login,
  6. lastGistUrl: lastGist.html_url
  7. });
  8. }
  9. }.bind(this));

this.props.source变量在下面指定

  1. <UserGist source="https://api.github.com/users/octocat/gists" />

我们运行起来,抓包如下:

此处输入图片的描述

数组的首个item,owner节点下的login字段对应octocat;

验证

此处输入图片的描述

参考:
React Native
React Native 中文网
React Native专题

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注