First, manually save the state. According to the React component componentWillUnmount life cycle, data is saved by state management such as REdux and sessionStorage, and data is recovered by componentDidMount cycle. [Large amount of data & manual save logic is troublesome when the situation is changeable]

  • What to store: Because the data needs to be retrieved each time the list page is returned from the detail page, the only information that needs to be cached is the query criteria and page number
  • When to Save: There are various action navigation operations such as POP, PUSH, REPLACE, etc. Returning from the detail page to the list page requires caching, but jumping from the detail page to the new list page logically does not require the previously cached data to be retrieved. So you can store data for PUSH and cache data for POP.
  • Where it exists: persistent localStorage, IndexDB, temporary localStorage sessionStorage, in-memory redux or rematch state management tools that encapsulate some common access methods.

The article addresses: segmentfault.com/a/119000003…

Second, through the route to achieve automatic state saving, change the route to the component rendering behavior.

  1. Rewrite a cached Route component for the React-Router.

    • Main implementation idea: through the style to control the component’s reality/hide, and according to the route corresponding display.

      A normal route matching rule uses the path props to control rendering/offloading. A cache route matching rule also needs props to control its hiding/recovery. So you can give the Route component LiveRoute an extra props to control hiding/restoring the livePath path. Its rules can be applied directly to PATH.

      LiveRoute has three internal component rendering states:

      1) hide_render, livePath matching needs to hide LiveRoute rendering components, backup the scrolling position, obtain the dom of routing rendering components through reactdom.finddomNode, display: None, and back up the previous display attribute.

      2) normal_render_match: Router is used as the router required to keep rendering after hiding the rendering. In the life cycle of componentDidUpdate, there is a backup scrolling position.

      3) Normal_render_unmatch: normally renders but does not match, that is, unloads the current route. Clears references to the DOM saved in LiveRoute

    • Problem: Transitions cannot be used when switching components, and the original

      function needs to be saved.

    • Install react-live-route

    • Article address: juejin.cn/post/684490…

    • Git address: github.com/fi3ework/re…

  1. Rewrite routing library

    • The react-Keeper plugin is available

    • Address: zhuanlan.zhihu.com/p/25081540

      Segmentfault.com/a/119000001…

    • Git address: github.com/lanistor/re…

  2. Extend the existing behavior of the

    component

    • Main implementation idea: through the style to control the component’s reality/hide, and according to the route corresponding display. 在RouteIn the usecomponentorrenderAttributes are unloaded in case of a mismatch, but using the children attribute as a method makes it possible to manually control the rendering behavior. right<Route>The mismatch behavior of unmount is adjusted to hide.
    • The react-router-cache-route plugin is available
    • Article address: juejin.cn/post/684490…
    • Git address: github.com/CJY0208/rea…

  3. Build on the existing behavior of

    and

    components

    • Main idea: Components are destroyed when switching pages, but as scheduled for renderingreact fibersavekeepaliveState. As long asfiberIf you live, you get itdomElement, data layerstateAnd other information.

      Initialization: When the whole design idea is first introduced to the cache page, a container component will be generated automatically. The cache Route will give the component to the container component to mount, and the container component will generate Fiber,render will generate the corresponding DOM tree, and give the DOM tree to the Route component (our normal page).

      Switching pages: When switching pages, the routing component is definitely unloaded, so we need to return our DOM to the container component, and then the container component goes into the frozen state.

      Switch to the cached page again: when entering the routing page again, first from the container, found the page cache, then unseal the container state, and then return the DOM tree to the current routing page. The Keepalive state is complete.

      Cache destruction: The project supports the function of cache destruction. Calling the destruction method will unload the current cache container and further destroy Fiber and DOM to complete the entire destruction function.

    • React-keepalive-router is an existing router

    • Article address: juejin.cn/post/692234…

    • Git address: github.com/GoodLuckAli…