19.返回顶部功能19-07-01

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第20次提交。
一.首先到到home目录下的reducer中添加，控制返回顶部按钮的字段
showScroll: false,
二.到home目录下接收已有数据

const mapStateToProps = (state) =>({
  showScroll: state.getIn(['home','showScroll'])
});

三.到生命周期函数中监听滚动事件，并做出什么时候显示 返回顶部按钮 的判断

componentDidMount() {
     this.props.changeHomeData();
     this.bindEvents();
  }
  bindEvents() {
    //去监听window的scroll事件,去改变store里的值的true和false
    window.addEventListener('scroll',this.props.changeScrollTopShow)
    //在组建创建的时候给组件绑定的事件监听，在组件移除的时候一定要去解绑
  }

const mapDispatchToProps = (dispatch)=>({
  changeScrollTopShow(){
    if(document.documentElement.scrollTop > 200){
      dispatch(actionCreators.toggleTopShow(true));
    }else {
      dispatch(actionCreators.toggleTopShow(false));
    }
  }
});

四.移除监听事件

componentWillUnmount() {
    //移除组件监听事件
  window.removeEventListener('scroll',this.props.changeScrollTopShow);
  }