React的keepAlive路由缓存的一种实现思路

最近遇到了就是离开当前页面后，返回该页面时，需要保留离开前的状态，对于这种情况，首先是有几种思路

• 将该页面的状态全部存入到sessionSotrage中，等到回来时，再从页面中去取。
• 将页面的数据全部存入到redux中，再通过mapStateToProps，通过connect的方式引入该页面。
• 想办法实现一种类似vue的keep-alive的功能。
• 重写Route组件，在其内部实现该逻辑

这里由于前面两种方法实现起来都比较容易，就不多讲，主要看看第三种思路可以如何去实现

• 首先，我这种实现思路是基于react-router带路由的项目。
• 由于switch会导致没有匹配的路由不会被渲染，所以需要将keep-alive的路由放到switch外面。
• 然后我们可以看到Route的组件内部是可以只传一个children的方法的。

    ......Route的render方法中的部分代码，我们可以看到不管`match`有没有匹配到，当`children`为一个方法的时候，都会去执行`children`方法。
    if (component) return match ? React.createElement(component, props) : null;
    if (render) return match ? render(props) : null;
    if (typeof children === "function") return children(props);
    if (children && !isEmptyChildren(children)) return React.Children.only(children);
    return null;
  

• 所以我们在使用Route时，可以分两种情况来使用

    // 当不需要进行缓存的时候
    <Route path={path} component={component} />
    // 当需要进行缓存的时候
    <Route path={path} children={props => this.renderChildren(props)} />
    renderChildren = (props) => {
      const { match } = props;
      return (
        <div style={ match ? { } : { position: 'absolute', zIndex: -10 } }> // 如果匹配到了就直接渲染出来，如果没有匹配到，就直接隐藏掉该组件，但是此时组件是不会销毁的，这样就能保证在返回后页面状态的保留
          <Component /> // 这个就是该路由下对应的组件
        </div>
      )
    }
  

针对于这种实现思路，我目前想到的还是比较简单，如果遇到比较复杂的情况可能就不是很好处理，针对于各自的特殊业务，应该加上自己相关的处理。我这个仅仅是抛砖引玉，希望大家自己都能有自己的实现思路。

关于react的路由，之前遇到过一个比较基础的问题，就是react-router升级到4.0版本之后，就不支持Route下面套Route了，所以只能在公共的父级页面再去遍历渲染它的子路由，在这里也稍微记一下。还有就是关于全局页面的search参数问题，可以直接把渲染子路由的方法抽离出来，然后在里面把search参数处理成对象之后直接传给路由对应的组件来使用，可以节省大多数页面的search参数的处理，简化代码。