关于React Ajax(2016-08-06总结)


Ajax是一门快速创建动态网页的技术,学习的过程中我遇到了如下问题:

if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
   }else {
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
   if (xmlhttp.readyState==4 && xmlhttp.status==200){
       document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
       }
   }
   xmlhttp.open("GET","./ajax/test.txt",true);
   xmlhttp.send();

我们知道readyState中保存了xmlhttpRequest的五种状态,状态改变就会触发onreadystatechange事件,分别是:

0:请求未初始化
1:服务器已建立连接
2:请求已接收
3:请求正在处理
4:请求完成并响应就绪

但我对这五种状态分别位于代码中的哪个时刻依然不是很理解,于是我做了下面的实验

首先在第6行代码下添加console.log(xmlhttp.readyState);可以看到请求发出后控制台打印出了1,2,3,4状态。那么0状态在哪里?哪句代码实现了请求的初始化。
这次我在第5行,第11行,和12行下面分别添加console.log(xmlhttp.readyState);,控制台输出0,1,1状态,也就是说xmlhttp.openxmlhttp.send就是初始化请求的过程

组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI

可以看我在github上的例子react-ajax.js,以下为代码片段:

componentDidMount: function() {
        $.get(this.props.source, function(result) {
            var user = result[0];
            if (this.isMounted()) {
                this.setState({
                    username: user.name,
                    url: user.items.html_url
                });
            }
        }.bind(this));
    },

在写这个例子时针对这段代码我存在以下疑惑:

  • componentDidMount是发生在组建挂载之后,渲染之前的为什么还要判断if (this.isMounted())

这个问题我在官网上找到了解答,意思是执行异步请求的响应时,在更新 state 前, 一定要先通过 this.isMounted() 来检测组件的状态是否还是 mounted

  • 为什么要用bind(this),有没有别的方式可以替代它

实验后发现,在$get的callback中,this的值会被更改为传进来的数据,而我们希望this依然是App组件,因此要使用bind(this)。还有一种简单的方法就是使用ES6中的=>来保证this的值不被更改,即:

$.get(this.props.source, (result)=> {
            var user = result[0];
            if (this.isMounted()) {
                this.setState({
                    username: user.name,
                    url: user.items.html_url
                });
            }
        });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容