How to Cache React App – App Developer Vancouver
In order to pursue the ultimate user experience, many web applications are presented in a single-page format. However, single-page applications often correspond to high complexity, such as multi-level routing configuration, unified data processing, etc. This requires the project to have strong technical architecture and a friendly build environment to support it.
Routers, as the basis of single-page construction, play a vital role in the development, loading, and operation of single-page applications. The larger the project, the stronger the dependence on the router.
The following is the basic routing configuration of a React application. Students who know React must be familiar with:
const App = ()=> {undefined
return (
)
}
ReactDOM.render(, document.getElementById(‘root’))
Yes, isn’t the routing configuration that simple?
Students who have really done single-page applications will refute you, and will immediately ask a lot of questions: How to split routing configuration?
How to do dynamic loading?
How to pass props?
How to do login blocking?
Can the list page be cached?
balabala…
Students who can encounter these problems, I believe they must be weather-beaten. These problems are not present in the Demo, they are only encountered in real projects.
Of course, this article was born to solve these problems. Let’s take React-Keeper (hereinafter referred to as Keeper) as an example to solve these problems.
BTW: React-Keeper is a relatively new open source routing library in the React ecosystem. It is developed by a domestic team and draws on many features of React-Router 4. However, it is much more flexible and practical than React-Router and is compatible with React- For common usage of Router, please refer to the official website of React-Keeper GitHub for its documentation and code.
1. Route split – Web design company Vancouver
Centralized routing configuration is a very bad solution, especially in large-scale Web applications, routing split is necessary.
How Keeper implements route splitting:
const App = ()=> {undefined
return (
)
}
const Products = ()=> {undefined
return (
)
}
ReactDOM.render(, document.getElementById(‘root’))
In actual development, a large amount of routing configuration information can be split in a modular manner, and the routing is only imported into the module entry, the internal page configuration is inside the module, and the second module can be divided into the module to realize the routing split point.
2. Page Cache – Shopify Web-Design Vancouver
Page caching is the most important feature of Keeper. It is very important for single-page applications to retain all the state of the user’s previous page (data, various interaction states, etc.), for example: click on the product list page to enter the product details page, and then return to the list When the page is displayed, the user wants the data to be the previous data, and the page still stays at the scroll position just now. In Router, we can only use the parent-child component relationship to achieve this kind of interaction, and this often leads to multiple URLs on a page, which violates the principle of a single resource address.
Keeper creatively provides the function of page caching. Through the built-in cache manager, when the page is not activated, it retains all the interactive states of the user and restores the state after the page is activated. Implementing caching in Keeper is also very simple, you only need to add a cache tag:
This mark indicates that the page is permanently cached. For different scenarios, Keeper provides three caching methods:
cache=’root’ (or cache): permanently cache the corresponding page of the route until the router is destroyed.
cache=’parent’: Cache the routing page if the parent component matches until the parent component does not match.
LinkCache: The Link component of the integrated cache manager is a temporary cache. Click to return or jump to another page, and the cache will become invalid.
When we use it, we should adopt different caching strategies based on different business module scenarios.
3. Dynamic loading
Packing all the JS files into one file is not a wise choice. This will seriously slow down the loading time of the first screen. The JS code should be divided and loaded on demand.
How Keeper implements on-demand loading:
// Define dynamic loading function const loadProduct = (cb)=> (undefined
import(‘../Products.js’).then((Products)=>{undefined
cb(Products)
})
}
// Introduced through the loadComponent property
4. Props delivery
We know that the delivery of custom props is not supported in React-Router, but this is well supported in Keeper:
let hostUser = {id:’ASDFSDFG’, name:’Ma Huateng’}
// Route (hostUser) const Products = ()=> (undefined
return (
)
}
// All props of the Route component are automatically passed into the subcomponent const ScienceProducts = (props)=> (undefined
return (
)
}
5. Login Interception
Login interception, permission detection, and form closing detection are very common scenarios in business, and these are also well supported in Keeper.
Keeper provides two filters to filter and intercept routing status changes: EnterFilter and LeaveFilter.
EnterFilter: The filter executed before entering the page, suitable for scenarios such as login detection and permission detection.
LeaveFilter: The filter executed before the page is unbound. It is suitable for scenarios such as form closing detection.
// Define the filter, internally control the flow through callback const loginFilter = (callback, props)=> {undefined
if(!props.host) {undefined
new Promise((resolve, reject)=>{undefined
// some code }).then(callback);
}
}
// Add the filter to Route
// Multi-filter configuration
6. Advanced
Keeper provides a very flexible configuration method to allow us to write elegant code simply. Look at several scenarios below to introduce the use of Keeper commonly used configurations.
Q1: Display the default when the page is not found
A1: Use the miss attribute provided by Route to automatically render the component when the page cannot be found.
Q2: Enter a module directly into the module boot page
A2: The index attribute provided by Route is used in the same way as miss, and it can be used with miss.
Q3: Processing of component address redirection
A3: Use the redirect attribute provided by Route to automatically redirect the page when other conditions are matched.
Q4: How to use the state property of history?
A4: Keeper integrates the state agent internally. For browsers that support the state API, use the state API directly; for other browsers, use the internal integrated state manager, that is, use a random ID (a random key is added to the URL) to map the state, and Use sessionStorage for storage.
Write at the end
React-Keeper is an emerging React routing library. Because of its flexible design and powerful practical functions, once it is released, it has attracted the attention and attempts of many React developers.
React-Keeper has just released the V2.0 version, which has been optimized in many places at the bottom. However, the documentation for the emerging framework is not complete. The current way developers use it is to rely on the documentation on its GitHub official website. There is no Chinese documentation yet.