react页面保存状态

采用:react-activation

import KeepAlive from 'react-activation';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    

      
count: {count}
       setCount((count) => count + 1)}>Add
    
  );
}

const Welcome: React.FC = () => {
  const intl = useIntl();
  const [show, setShow] = useState(true);

  return (
        

           setShow((show) => !show)}>Toggle
          
有KeepAlive
          {show && (
            
              
            
          )}
          
无KeepAlive
          {show && }
        
  );
};

export default Welcome;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

入口app.tsx: childrenRender中使用

childrenRender: (children, props) => {
      // if (initialState?.loading) return ;
      return (
        
          {children}
          {!props.location?.pathname?.includes('/login') && (
             {
                setInitialState((preInitialState) => ({
                  ...preInitialState,
                  settings,
                }));
              }}
            />
          )}
        
      );
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

我的调研:
React 页面间保存恢复状态的几种方法总结
umi使用umi-plugin-keep-alive实现页面缓存功能