React-router 4 按需加載的實(shí)現(xiàn)方式及原理詳解
React-router 4
介紹了在router4以后,如何去實(shí)現(xiàn)按需加載Component,在router4以前,我們是使用getComponent的的方式來實(shí)現(xiàn)按需加載的,router4中,getComponent方法已經(jīng)被移除,下面就介紹一下react-router4是入圍和來實(shí)現(xiàn)按需加載的。
1.router3的按需加載方式
route3中實(shí)現(xiàn)按需加載只需要按照下面代碼的方式實(shí)現(xiàn)就可以了。 const about = (location, cb) => { require.ensure([], require => { cb(null, require('../Component/about').default) },'about') } //配置route <Route path="helpCenter" getComponent={about} />
2.router4按需加載方式(three steps)
one step:
創(chuàng)建Bundle.js文件,這個文件其實(shí)是個通過bundle-loader包裝后的組件來使用,下面會具體講這個東西。
import React from 'react'; import PropTypes from 'prop-types'; class Bundle extends React.Component { state = { // short for "module" but that's a keyword in js, so "mod" mod: null } componentWillMount() { // 加載初始狀態(tài) this.load(this.props); } componentWillReceiveProps(nextProps) { if (nextProps.load !== this.props.load) { this.load(nextProps); } } load(props) { // 重置狀態(tài) this.setState({ mod: null }); // 傳入組件的組件 props.load((mod) => { this.setState({ // handle both es imports and cjs mod: mod.default ? mod.default : mod }); }); } render() { // if state mode not undefined,The container will render children return this.state.mod ? this.props.children(this.state.mod) : null; } } Bundle.propTypes = { load: PropTypes.func, children: PropTypes.func }; export default Bundle;
second step:
import aContainer from 'bundle-loader?lazy!./containers/A' const A = (props) => ( <Bundle load={aContainer}> //這里只是給this.props.child傳一個方法,最后在Bundle的render里面調(diào)用 {(Container) => <Container {...props}/>} </Bundle> )
third step:
render() { return ( <div> <h1>Welcome!</h1> <Route path="/about" component={About}/> <Route path="/dashboard" component={A}/> </div> ) }
3.router4按需加載方方式解析
(1).首先解釋一下按需加載,通俗的將就是我當(dāng)前的location在Home,那么我只應(yīng)該加載Home的東西,而不應(yīng)該去加載About等等其他的。
(2).Bundle.js這個文件的作用
先看這段代碼:
module.exports = function (cb) { __webpack_require__.e/* require.ensure */(2).then((function (require) { cb(__webpack_require__(305)); }).bind(null, __webpack_require__)).catch(__webpack_require__.oe); };
這里是我們通過import loadDashboard from 'bundle-loader?lazy!./containers/A'這種方式引入的container控件。我們使用了bundle-loader將A的源碼轉(zhuǎn)化成了上面的代碼,具體實(shí)現(xiàn)大家可以看bundle-loader源碼,代碼很少。
上面說到Bundle.js其實(shí)就使用來處理這個文件的,這個文件需要一個callback的參數(shù),在Bundle的load方法中,我們會設(shè)置這個callback,當(dāng)路由要調(diào)到A Container這里的時候,就回去加載A Container,然后調(diào)用這個callback,這個callback會調(diào)用setState方法,將我們之前傳入的load設(shè)置給mod,然后渲染出來。
4.webpack進(jìn)行bundle-loader統(tǒng)一配置
這里匹配的是src/routers/下面的containers文件夾下面所有的js文件,包括二級目錄。
{ // 匹配routers下面所有文件 // ([^/]+)\/?([^/]*) 匹配xxx/xxx 或者 xxx test: /containers\/([^/]+)\/?([^/]*)\.jsx?$/, include: path.resolve(__dirname, 'src/routers/'), // loader: 'bundle-loader?lazy' loaders: ['bundle-loader?lazy', 'babel-loader'] }
5.部分源碼
1.bundle-loader的源碼
var loaderUtils = require("loader-utils"); module.exports = function() {}; module.exports.pitch = function(remainingRequest) { this.cacheable && this.cacheable(); var query = loaderUtils.getOptions(this) || {}; if(query.name) { var options = { context: query.context || this.options.context, regExp: query.regExp }; var chunkName = loaderUtils.interpolateName(this, query.name, options); var chunkNameParam = ", " + JSON.stringify(chunkName); } else { var chunkNameParam = ''; } var result; if(query.lazy) { result = [ "module.exports = function(cb) {\n", " require.ensure([], function(require) {\n", " cb(require(", loaderUtils.stringifyRequest(this, "!!" + remainingRequest), "));\n", " }" + chunkNameParam + ");\n", "}"]; } else { result = [ "var cbs = [], \n", " data;\n", "module.exports = function(cb) {\n", " if(cbs) cbs.push(cb);\n", " else cb(data);\n", "}\n", "require.ensure([], function(require) {\n", " data = require(", loaderUtils.stringifyRequest(this, "!!" + remainingRequest), ");\n", " var callbacks = cbs;\n", " cbs = null;\n", " for(var i = 0, l = callbacks.length; i < l; i++) {\n", " callbacks[i](data);\n", " }\n", "}" + chunkNameParam + ");"]; } return result.join(""); } /* Output format: var cbs = [], data; module.exports = function(cb) { if(cbs) cbs.push(cb); else cb(data); } require.ensure([], function(require) { data = require("xxx"); var callbacks = cbs; cbs = null; for(var i = 0, l = callbacks.length; i < l; i++) { callbacks[i](data); } }); */
2.A的源碼
import React from 'react'; import PropTypes from 'prop-types'; import * as reactRedux from 'react-redux'; import BaseContainer from '../../../containers/ReactBaseContainer'; class A extends BaseContainer { constructor(props) { super(props); this.renderCustom = function renderCustom() { return ( <div > Hello world In A </div> ); }; } render() { // 返回父級view return super.render(); } } A.propTypes = { dispatch: PropTypes.func, }; function mapStateToProps(state) { return { state }; } export default reactRedux.connect(mapStateToProps)(A);
3.route.js的源碼
import React from 'react'; import { BrowserRouter, Switch, Link } from 'react-router-dom'; import { Route } from 'react-router'; import PostContainer from '../containers/PostsContainer'; // 設(shè)置trunk文件的名字 the basename of the resource import aContainer from './containers/A'; import bContainer from './containers/B'; import cContainer from './containers/C'; import Bundle from '../utils/Bundle'; const A = () => ( <Bundle load={aContainer}> {Component => <Component />} </Bundle> ) const app = () => <div> {/* path = "/about" */} {/* "/about/" 可以,但"/about/1"就不可以了 exact 配置之后,需要路徑絕對匹配,多個斜杠沒有關(guān)系,這里直接在瀏覽器里面設(shè)置還有問題*/} {/* path = "/about/" */} {/* "/about/1" 可以,但"/about"就不可以了 用了strict,path要大于等于的關(guān)系,少一個斜杠都不行 */} {/* exact 和 strick 都用了就必須一模一樣,連斜杠都一樣 */} <Link to="/about/"> Link to about</Link> <Route path="/" component={PostContainer} /> <Route path="/about/" component={A} /> {/* <Route path="/home" component={B} /> <Route component={C} /> */} </div> ; export default function () { // 用來判斷本地瀏覽器是否支持刷新 const supportsHistory = 'pushState' in window.history; return ( <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}> <div> {app()} </div> </BrowserRouter> ); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的柱形圖 (V3版本)
這篇文章主要介紹了D3.js(v3)+react 制作 一個帶坐標(biāo)與比例尺的柱形圖 (V3版本) ,本文通過實(shí)例代碼文字相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-05-05React使用TailwindCSS的實(shí)現(xiàn)示例
TailwindCSS是一個實(shí)用優(yōu)先的CSS框架,本文主要介紹了React使用TailwindCSS的實(shí)現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12React實(shí)現(xiàn)預(yù)覽展示docx和Excel文件
這篇文章主要為大家詳細(xì)介紹了如何使用React實(shí)現(xiàn)預(yù)覽展示docx和Excel文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02react組件從搭建腳手架到在npm發(fā)布的步驟實(shí)現(xiàn)
這篇文章主要介紹了react組件從搭建腳手架到在npm發(fā)布的步驟實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01react實(shí)現(xiàn)點(diǎn)擊選中的li高亮的示例代碼
本篇文章主要介紹了react實(shí)現(xiàn)選中的li高亮的示例代碼,頁面上有很多個li,要實(shí)現(xiàn)點(diǎn)擊到哪個就哪個高亮。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05React?錯誤邊界Error?Boundary使用示例解析
這篇文章主要為大家介紹了React?錯誤邊界Error?Boundary使用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09React項(xiàng)目配置prettier和eslint的方法
這篇文章主要介紹了React項(xiàng)目配置prettier和eslint的相關(guān)知識,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06