React学习笔记之页面切换渲染

学习react刚刚起步,打算用nodejs+react+MySQL来搭建一个个人主页,原本的计划是需要左侧实现一个导航栏点击进行切换从后台取得内容进行渲染。

结果写index入口文件的时候出现一个问题,nodejs路由先将http请求分发给不同的逻辑模块去处理然后把相应内容返回给浏览器,所以之前用ejs模板引擎的时候可以这样写


我们可以把ejs理解成一个js函数,后面跟着的就是这个函数的参数,自然ejs是可以随意读取自己的参数的。

这样ejs就可以直接获得从服务器传来的数据,然后拼接成html再交给浏览器渲染。

可是react不能这样当成一个函数,react将多个组件组合后再注入到html里去渲染(不是很理解react组件渲染原理,所以这点不细究)


react数据通过this.state或者this.props绑定在组件中

最终麻烦的是怎么把后端处理过的数据像ejs一样传给react组件?

刚开始想到的是把数据json格式写入到文件里去,但是react何时从文件里去取数据又是个问题

后来查阅资料看到react-router,这才恍然大悟

  • 平常web应用页面切换

1.点击链接通过Ajax发起请求,后端分发请求以后将需要的数据拼接成html发送给浏览器(后端渲染)。

2.浏览器获取到新的html内容以后解析其内容,确定需要还加载的js和css等文件最后渲染成页面内容。

  • 而react在第一次加载的时候就可以把要切换的页面全部加载完成,切换通过react-router的Link组件拦截请求(不发送给服务器)然后通过router组件决定谁来显示。

那么回到原来的问题,重点是react怎么获取后端传来的数据?

其实有了react-router之后这个问题就很好解决了,之前这个问题主要是因为以为还是和ejs一样要同时把html和数据一起发送给浏览器,思维还停留在用ejs模板引擎的时候了,react既然早就已经加载完成了所有dom,那么我们只需要发送数据给浏览器就行了

我们可以把Ajax写在componentDidMount里,当react-router决定好哪个组件来渲染页面,在这个组件第一次渲染的时候加载Ajax取得数据再通过this.state或者this.props渲染数据。

结论:react中Ajax不再需要接收html文本,而是只需要接收数据就能进行渲染,相当于后续的加载是前端渲染,这与用模板引擎有着本质区别(框架就是框架啊,思维都不一样了),所以你在访问react页面的时候就是第一次加载比较慢(因为要加载所有页面),但是页面后续的浏览会很流畅。

对react的理解又深了一步,继续学习^O^.

猜你喜欢

转载自blog.csdn.net/qq_35513792/article/details/80043955
今日推荐