react路由 ajax,react新手入门06-浅谈前端路由和后端路由

背景:

在了解react的JSX, props, state以及基本语法后,

入手实际react项目,可能会对项目中的路由, 迷惑不解.

当触发某个react-router路由时, 懂后端的新人通常会有这样的疑惑

页面怎么渲染的, 我没启动后端啊?

是不是wepack, ceate-react-app把后端隐藏起来了?

这个原因主要是, 你可能没听说过还有 前端路由 这样一个概念(名词)

浅谈-前端路由与后端路由的机制

后端路由的机制

懂后端的同学都知道,后端路由是后端在app.js中注册后端路由函数,前端通过ajax触发相应的路由回调函数(以express为例)

触发: ajax

响应: app.get('/router',callback)

原理: 基于http通讯协议

//app.js

app.get('/', (request, response) => {

let ret = {

"success": true,

"code": 200,

"message": "",

"data": [],

}

response.send(ret)

})

前端路由的机制

而前端路由(指react-router)是,前端在router.js中注册前端路由与组件映射,前端通过Link设置的路由或在浏览输入相应路由引起组件渲染:

触发: react-router中的Link标签

响应: 渲染Rout标签中对应组件

原理: 基于浏览器中hash(React-Router v2之前),history(React-Router v4)

//index.js

class ListContent extends Component {

constructor(props){

super(props);

this.state = {

}

}

render() {

return (

+ 发布话题

);

}

}

//router.js

在router.js中header组件会一直存在页面中, 而Switch标签中的组件只会在触发后渲染,可简单理解为未触发组件为null,不显示

所以形成了局部渲染

//若触发前端路由'/topic',则index组件不渲染

前端路由和后端路由的区别

前端路由基于浏览器事件监听,不通过http通讯协议

前端路由局部渲染, 后端重新渲染整个页面,相对来说前端路由体验好点

以上浅显的解释了一下,作为抛砖引玉,要想深入了解前端路由的原理

可看以下链接: