react 返回一个页面_react项目中实现返回不刷新

说明

打开京东手机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

3componentDidMount() {

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

13componentWillReceiveProps(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

14let scrollTop=0;

componentDidUpdate() {

/// 判断的目的是为了不让页面其他组件渲染完毕的时候执行定位,如果不设置判断,比如你的页面有好多子组件,每个子组件componentDidUpdate

/// 都会执行它,那么问题来了,没有判读所以都会执行以下document.body.scrollTop = scrollTop[默认为0];会看到会有往页面顶部窜动的效果

if (scrollTop > 100) {

document.body.scrollTop = scrollTop;

}

}

showDetail() {

scrollTop = document.body.scrollTop;

}

最后

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

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