阅读数:

react项目中实现返回不刷新

0

说明

打开京东手机web版,细心的你会发现,当你从首页list页跳到详情页在返回(不论你点的是app的返回还是安卓返回健)的时候列表页位置还是静静的在哪里,
在我们的react项目里如何实现呢?首先我们的了解清楚react里两个重要的上下文传递对象,props和state,props我们可以理解为全局的,这个很重要,也是我们实现
不刷新的基础,state可以理解为局部的,只对当前组件有效;

另外补充下react生命周期以及涉及的API

  • 实例化
    ** 首次实例化
    getDefaultProps
    getInitialState
    componentWillMount
    render
    componentDidMount

  • 实例化完成后的更新

getInitialState
componentWillMount
render
componentDidMount

  • 存在期
    ** 组件已存在时的状态改变

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

  • 销毁&清理期
    componentWillUnmount

可以看出来render是在componentDidUpdate之后,即页面渲染完才会执行,这里也是我下手的地方之一。

实现

老规矩,啥也不说了上代码

取数据

1
2
3
componentDidMount() {
this.props.list.data && this.props.list.data.length <= 0 && this.props.getList.call(this);
}

this.props.list.data && this.props.list.data.length <= 0 这句的目的就是防止第二次重新加载已有数据,换句话说就是只有第一次访问进来的时候
才会执行getlist方法;

数据请求了,该怎么接收呢?

接收数据

1
2
3
4
5
6
7
8
9
10
11
12
13
componentWillReceiveProps(newProps) {
if (newProps.list.data && newProps.list.data.length > 0) {
//第一次加载将数据换存在全局变量Glist中;
if (this.props.list.data && this.props.list.data.length <= 0) {
let newData = newProps.list.data;
Glist = newData;
}
// 之后数据使用本地缓存即可
else {
Glist = Glist;
}
}
}

Glist是个全局变量,类似本地缓存,有人问了为什么不用localStorage,因为会有浏览器兼容性问题

定位

正常情况下应该是可以实现,detail—》list不刷线的功能,但还有问题就是定位,比如list开始是在20条的位置,回来的时候应该还是在20条的位置,
没做任何处理前,pc和android是可以自动定位的,但是烂苹果就不行,还是在top0的位置,所以呢我们还得再设置个全局变量 scrollTop,默认为0,
当点击列表的时候,设置scrollTop,回来的时候再设定就可以了,完美的定位了pc、ios和android

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let scrollTop=0;
componentDidUpdate() {
/// 判断的目的是为了不让页面其他组件渲染完毕的时候执行定位,如果不设置判断,比如你的页面有好多子组件,每个子组件componentDidUpdate
/// 都会执行它,那么问题来了,没有判读所以都会执行以下document.body.scrollTop = scrollTop[默认为0];会看到会有往页面顶部窜动的效果
if (scrollTop > 100) {
document.body.scrollTop = scrollTop;
}
}
showDetail() {
scrollTop = document.body.scrollTop;
}

最后

如有疑问或者更好的方案留言下方……^_^


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^