React切换路由后保留原页面状态

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React切换路由后保留原页面状态相关的知识,希望对你有一定的参考价值。

参考技术A 一、需求

2个页面,第一个A页面包含一个翻页的表格,点击表格行跳转该条数据的详情页面B,切换回A页面依然保留A页面的状态

二、思路

DOM中分别用2个容器 存放A、B页面,配置路由分别对应Acomponent 和 Bcomponent ,设置B的样式遮罩住A,路由切换回A页面后,B已经销毁,A依然保留。

<div id="app">A</div>

<div id="detail-page">B</div>

未完待续

点击查看demo

Flutter切换tab后保留tab状态

Flutter切换tab后保留tab状态

概述

Flutter中为了节约内存不会保存widget的状态,widget都是临时变量。当我们使用TabBar,TabBarView是我们就会发现,切换tab后再重新切换回上一页面,这时候tab会重新加载重新创建,体验很不友好。Flutter出于自己的设计考虑并没有延续android的ViewPager这样的缓存页面设计,毕竟控件两端都要开发,目前还在beta版本有很多设计还不够完善,但是设计的拓展性没得说,flutter还是为我们提供了解决办法。我们可以强制widget不显示情况下保留状态,下回再加载时就不用重新创建了。

AutomaticKeepAliveClientMixin

AutomaticKeepAliveClientMixin 是一个抽象状态,使用也很简单,我们只需要用我们自己的状态继承这个抽象状态,并实现 wantKeepAlive 方法即可。

继承这个状态后,widget在不显示之后也不会被销毁仍然保存在内存中,所以慎重使用这个方法。

详细官方文档请看这里
这里还有一个说的比较详细的 demo

class PageContentState extends<PageContent> 
    with AutomaticKeepAliveClientMixin 

    @override
    bool get wantKeepAlive => true;

DEMO

// main.dart
// 核心代码如下:

class PageContent extends StatefulWidget 
  @override
  State<StatefulWidget> createState() => new PageContentState();


class PageContentState extends State<PageContent>
    with AutomaticKeepAliveClientMixin


  @override
  bool get wantKeepAlive => true;

  ···


class V2EX extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
            primaryColor: Colors.white),
        home: new DefaultTabController(
          length: choices.length,
          child: new Scaffold(
            appBar: new AppBar(
              title: new Center(
                child: new Container(
                  width: 300.0,
                  child: new TabBar(
                    indicatorColor: Colors.black54,
                    isScrollable: true,
                    tabs: choices.map((Choice choice) 
                      return new Container(
                        width: 125.0,
                        child: new Tab(
                          text: choice.title,
                        ),
                      );
                    ).toList(),
                  ),
                ),
              ),
            ),
            body: new TabBarView(
              key: new Key('Home Page'),
              children: choices.map((Choice choice) 
                return new Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: new ChoiceCard(choice: choice),
                );
              ).toList(),
            ),
          ),
        ));
  


const List<Choice> choices = const <Choice>[
  const Choice(title: '热门'),
  const Choice(title: '最新'),
];

class ChoiceCard extends StatelessWidget 
  const ChoiceCard(Key key, this.choice) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) 
    return new Card(
      color: Colors.white,
      child: PageContent(),
    );
  

以上是关于React切换路由后保留原页面状态的主要内容,如果未能解决你的问题,请参考以下文章

vue切换路由不会刷新页面就是巨大的优点吗?

React 页面返回保留上次状态

补充与预告 切换页面时保留状态 后 增加 Tabs 模式 , 允许看到多个页面与关闭.

react-router 4 切换路由跳转到页面顶部

WebView仿原生app页面切换效果

react-router简介