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參數的處理，簡化代碼。