react中的keep-alive功能

在vue中可以很方便的实现keep-alive功能，但是在react中却不是很方便，遇事不要慌，度娘来帮忙。

react-keep-alive

首先找到的是react-keep-alive，一波操作之后，发现原来显示的页面不显示了，唉，抬下去，下一个！

react-activation

这个真香，具体怎么使用不再介绍，请查看中文文档，使用的时候要认真查看文档，同一个父节点下，相同位置的 <KeepAlive> 默认会使用同一份缓存，要想实现多份需要增加动态id属性来区分。手动控制缓存（tabBar的关闭），给需要控制缓存的 <KeepAlive /> 标签增加 name 属性，使用 withAliveScope 或 useAliveController 获取控制函数。

小瑕疵（这并不是react-activation的问题）

被缓存的组件第二次打开不会执行生命周期的钩子函数，这样导致一些依赖执行生命周期的钩子函数才能正常显示的组件出现问题。大多数情况都可以通过react-activation提供的withActivation 装饰器或者使用 useActivate 与 useUnactivate hooks 钩子解决，但是我遇到的是跨项目的（组件库项目中的某个组件依赖执行生命周期的钩子函数才能正常显示）。

详细说一下问题，被缓存的页面a中包含一个组件库中的组件B，组件B中在componentDidMount中重置大小并且监听resize事件来重新计算大小，componentWillUnmount中移除监听。使用了react-activation之后就不会执行componentWillUnmount也就没有移除监听事件，当打开a页面，之后点开b页面（包含组件B，触发resize之后），返回到a页面，a页面中B组件显示异常。

• 使用withActivation装饰器处理

  尝试在组件库的组件B中引入react-activationd的withActivation，结果发现并不会触发对应的钩子函数，查看源码可以了解到其依赖Context，不同的Context当然不会生效。于是开始尝试把withActivation通过window进行传递，这个方法可以解决，但是这样导致两个项目的耦合度很高，这样处理并不是很好。

• 监听路由变化，触发resize事件

  首先尝试的是使用history的监听事件listen，在路由变化的时候很好的监听到，但是浏览器的前进后退事件触发的路由变化没监听到。因此使用监听window的popstate事件，此事件包含了history的监听事件，所以只使用这一个事件监听就好了。主动触发事件使用的是dispatchEvent，使用Event构造函数创建事件不兼容IE。

  const routeChangeCB = useCallback((e) => {
      let ev = document.createEvent('Event')
      ev.initEvent('resize', true, true)
      window.dispatchEvent(ev)
    }, []);
    useEffect(() => {
      window.addEventListener('popstate', routeChangeCB, false);
      return () => {
        window.removeEventListener('popstate', routeChangeCB)
      };
    }, [location])