Der Unterschied zwischen React-Front-End-Routing und Back-End-Routing: 1. Front-End-Routing wird durch das Link-Tag in „react-router“ ausgelöst, und Back-End-Routing wird durch Ajax ausgelöst. 2. Front-End-Routing ist; basierend auf der Browser-Ereignisüberwachung, während das Back-End-Routing auf dem http-Kommunikationsprotokoll 3 basiert. Das Front-End-Routing kann ein teilweises Rendering erreichen, während das Back-End-Routing die gesamte Seite neu rendern kann.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Backend-Routing-Mechanismus
Studierende, die das Backend kennen, wissen, dass Backend-Routing bedeutet, dass das Backend die Backend-Routing-Funktion in app.js registriert und das Frontend die entsprechende Routing-Rückruffunktion über Ajax auslöst (nehmen Sie Express als Beispiel).
Auslöser: Ajax
Antwort: app.get('/router',callback)
Prinzip: Basierend auf dem HTTP-Kommunikationsprotokoll
//app.jsapp.get('/', (Anfrage, Antwort) => { let ret = { "success": true, "code": 200, "message": "", "data": [], }response.send(ret)})Front-End-Routing-Mechanismus
Beim Front-End-Routing (bezogen auf React-Router) registriert das Front-End das Front-End-Routing und die Komponentenzuordnung in router.js, und das Front-End veranlasst das Komponenten-Rendering über die von Link festgelegte Route oder durch Eingabe von entsprechende Route im Browser:
Auslöser: Link-Tag im React-Router
Antwort: Rendern Sie die entsprechende Komponente im Rout-Tag
Prinzip: Basierend auf Hash im Browser (vor React-Router v2), Verlauf (React-Router v4)
//index.jsclass ListContent erweitert Component { constructionor(props){ super(props); this.state = { } } render() { return ( <Row> <Button>+ <Link to="/topic"> Beitragsthema </Link> </Button> </Row> ); }}//router.js<Router> <div> <Header/> <Switch> <Route Exact Path="/" Component={index} /> < Route Exact Path="/topic" Component={topic} /> </Switch> </div></Router>In router.js ist die Header-Komponente immer auf der Seite vorhanden, während die Komponenten im Switch-Tag erst nach dem Auslösen gerendert werden. Es kann einfach verstanden werden, dass nicht ausgelöste Komponenten null sind und nicht angezeigt werden.
Daher wird ein lokales Rendering gebildet
//Wenn das Front-End-Routing „/topic“ ausgelöst wird, rendert die Indexkomponente <Router> <div> <Header/> <Switch> <Route Exact Path="/" Component={null} /> < nicht Route Exact Path=" /topic" Component={topic} /> </Switch> </div></Router>Der Unterschied zwischen Front-End-Routing und Back-End-Routing
Das Front-End-Routing basiert auf der Überwachung von Browserereignissen und übergibt nicht das HTTP-Kommunikationsprotokoll
Das Front-End-Rendern rendert teilweise und das Back-End rendert die gesamte Seite neu. Relativ gesehen ist das Front-End-Routing-Erlebnis besser.