React路由与项目实践

课程收益：

了解路由的演进历史&原因
了解React-Router的原理
复杂前端应用里结合路由的最佳实践

路由是什么：

路由Router是一种负责寻找路径的网络设备，它在互联网中从多条路径寻找最少的一条网络路径提供用户通信，路由用于连接多个逻辑分开的网络。对用户提供最佳的通信路径
路由时桥梁，帮助需求方找到供给方，并进行交换

React-router

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router, Route} from "React-router-dom";

ReactDOM.render(
    <Router>
        <div>
            <Router exact path="/">
                <Home/>
            </Router>
            <Route path="/news">
                <NewsFeed/>
            </Router>
        </div>
    </Router>
    node    
)

路由的包

react-router react-router-dom react-router-native react-router-config

History接口允许操作浏览器的曾经在标签页或者框架里面访问的历史记录

路由基于两种形式：

BrowserRouter 基于History
- 访问Url的形式 http://www.abc.com/a/b/g
HashRouter 基于Hash
- 访问Url的形式http://www.abc.com/#/a/b/v/g

单页面相关缺点：

打开任意页面，白屏时间超长

js bundle资源超大，静态资源超多

一个旁支页面的变更升级，导致主页直接崩溃

页面加载后，数据内容空白时间超长

海量数据接口请求

一个SPA应用承载200+页面，巨石应用，变更升级风险极大

应用开发，构建交付需要瘦身，

解决数据加载，前端数据处理耗时

路由时如何切分的

交互稿设计了多张页面，页面间做跳转

页面划分 -> 模块功能划分

Import +Lazy+Suspense

import()+bable-plugin+syntax-dynamic-import,识别分割模块
Lazy进行异步加载
suspense包裹动态组件，cover异步加载前的UI

首页从加载完成到数据内容全部透出需要10s

解决数据加载，主页非新闻内容展示，每天夜里内容变更有一次