react学习笔记其三 | 青训营

三、React应用(基于React脚手架)

react脚手架

（xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目）

1.包含了所有需要的配置（语法检查、jsx编译、devServer…）

2.下载好了所有相关的依赖

3.可以直接运行一个简单效果

react提供了一个用于创建react项目的脚手架库: create-react-app

项目的整体技术架构为: react + webpack + es6 + eslint

使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

四、React ajax

React本身只关注于界面, 并不包含发送ajax请求的代码

前端应用需要通过ajax请求与后台进行交互(json数据)

react应用中需要集成第三方ajax库(或自己封装)

常用的ajax请求库

jQuery: 比较重, 如果需要另外引入不建议使用

axios: 轻量级, 建议使用

1)封装XmlHttpRequest对象的ajax

2)promise风格

3)可以用在浏览器端和node服务器端

实践案例：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
  ID: 12345
}
  })
  .then(function (response) {
console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
  

消息订阅-发布机制

工具库: PubSubJS

下载: npm install pubsub-js --save

使用:

1）先订阅，再发布，

2）适用于组件间通信

3）要在组件的componentWillUnmount中取消订阅

五、React路由

SPA

单页Web应用（single page web application，SPA）。

整个应用只有一个完整的页面。

点击页面中的链接不会刷新页面，只会做页面的局部更新。

数据都需要通过ajax请求获取, 并在前端异步展现。

路由

什么是路由?

1.一个路由就是一个映射关系(key:value)

2.key为路径, value可能是function或component

路由分类

1.后端路由：

1)理解： value是function, 用来处理客户端提交的请求。

2)注册路由： router.get(path,function(req, res))

3)工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由 ： 1)浏览器端路由，value是component，用于展示页面内容。

2)注册路由: <Route path="/test"component={Test}>

3)工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

react-router-dom

react的一个插件库。

专门用来实现一个SPA应用。

基于react的项目基本都会用到此库。