实习 day6

今天的任务是解决为什么无法异步请求和上拉数据请求的问题。

解决为什么无法异步请求

异步请求它和同步请求不一样的地方时，异步请求时，其不会等待服务端的响应直接执行下一步。
所以，为什么我异步执行的时候的list为空？
首先，state一旦改变，就会重新渲染页面。前提是需要使用this.setState()方法。
而我使用的是

                  that.state.items_task.push(<ContentListTask title={title} content={content} date={date} source={img} buttonType={buttonType}/>);

这种改变state的方式不会触发重新渲染页面，因此就算items_task改变了也无济于事，并不会渲染到页面上。
因此要多加一句：

that.setState({items_task: that.state.items_task});

这样就可以触发页面重新渲染。
还有一个问题，render函数里面不能调用请求函数
因为这样就会进入一个循环：render->请求->改变状态->render->请求->…
于是我选择在componentWillReceiveProps里调用，这是一个组件声明周期方法， 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

父组件包含子组件，父组件请求数据传给子组件

在React中，必须由父组件请求，而子组件显示。因为这样传递状态将更加方便。

上拉加载

上拉加载的过程也是一个请求数据的过程，但每次请求的页数不一样。
所以维护一个state作为请求的页数，每次上拉页数加一并请求。

时延问题

在这个项目中，父组件维护一个当前状态，并将其传入其子组件中。

<Scroller focus={this.state.focus}>
  {this.props.children}
</Scroller>

但是点击后会发现，传入scroller这个组建的props属性将会存在时延。就是点击显示的props是上一个状态。
所以需要等待一定的时间。

  componentWillReceiveProps: function() {
    var that = this;
    //这里设置一个时延，是为了保证props.focus准确
    setTimeout(function(){
      that.getDataInit();
    }, 200);
  },

就这些了。但是整个过程还是遇到不少问题在这里不好一一描述，实践出真知吧。