zoukankan      html  css  js  c++  java
  • React AJAX

    React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据时可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。

    当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

    以下实例演示了获取 Github 用户最新 gist 共享描述:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>ajax</title>
        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
        <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
        <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          // 创建 UserGist 组件
          var UserGist = React.createClass({
            // 定义初始状态
            getInitialState: function() {
              return {
                username: '',
                lastGistUrl: ''
              }
            },
            // 生命周期--组件加载完毕
            componentDidMount: function() {
              // 请求数据
              this.serverRequest = $.get(this.props.source, function(result){
                var lastGist = result[0];
                // 设置状态
                this.setState({
                  username: lastGist.owner.login,
                  lastGistUrl: lastGist.html_url
                });
              }.bind(this)); // 防止this指针偏转
            },
            // 生命周期--组件将要销毁
            componentWillUnmount: function() {
              // abort终止正在进行中的的ajax请求
              this.serverRequest.abort();
            },
            // 渲染
            render: function() {
              return (
                <div>
                  {this.state.username}用户最新的Gist共享地址:
                  <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
                </div>
              );
            }
          });
    
          // 创建虚拟DOM
          ReactDOM.render(
            <UserGist source="https://api.github.com/users/octocat/gists" />,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

    效果图:

  • 相关阅读:
    DIV+CSS对SEO的帮助
    几种CSS及网站开发常犯的错误
    DIV CSS让搜索引擎蜘蛛不再累
    DIV CSS布局概述及初步入门
    闭合浮动元素(clearingfloat)的简单方法
    Vue学习(十三)模版引擎算是预处理器吗?
    base64学习(二)base64应用于图片
    base64学习(一)Base64的编码转换方式
    HTTP学习(四)短连接和长连接
    favicon.ico学习(三)实战
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8449929.html
Copyright © 2011-2022 走看看