zhiyongzaixian / 190418_react Goto Github PK

专门用于发送ajax请求的库

基于promise对象封装的

用法

• npm install axios
• import axios from 'axios'

语法

axios.get('/user?ID=12345') .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); }) .finally(function () { // always executed });

• 定报纸(定牛奶) --- 订阅方 --- 获取数据 --- PubSub.subscribe(事件名，事件的回调函数)
• 送报纸(送牛奶) --- 发布方 --- 提供数据(数据源) --- PubSub.publish(事件名，发布的数据)

• 绑定事件
  • 事件名
  • 事件的回调函数(1. 随时知道事件什么时候被触发2. 触发事件提供的参数对象)
• 触发事件
  • 事件名
  • 事件参数对象 === 标准事件的event对象

• 后端路由
  • 注册： 服务器端注册接口地址
  • 请求： 前端请求该地址
  • 传输数据： json
• 前端路由
  • 注册： 前端注册
  • 请求： 前端请求
  • 传输数据： 组件

• 通过浏览器测试路由是否注册成功 3. 路由链接: 4. 路由性能优化：
• React路由中默认是模糊匹配，当有多个路由的时候会一次从上往下匹配，中间即使匹配成功，不会停止匹配，直到匹配所有的路由
• Switch ---> 一旦匹配成功就停止匹配
• 扩展： 数组性能好的方法： find, findIndex,性能不好的方法： forEach 5. 路由重定向： Redirect
• : 不配合Switch有强制性，每次都会重定向
• 通常会和Switch匹配使用
• Redirect路由组件不要放在路由的最前边，通常放在最后

• 管理state, 唯一的数据源： action
• 管理reducer

• 负责修改state状态值
• 数据源需要action提供

• 本质： {type: 修改state的方式， data: 参与修改state的数据}
• 定义： 函数， 目的是动态给action设置data

• 作用： 分发action
• 到底做什么了：
  • 传递action对象
  • 间接导致store去reducer调用

• store.getState();

• store.subscribe(callback)

同步action： 直接定义方法返回对应的action对象

异步action: 核心**： 异步action返回值还是一个函数，redux会自动将dispatch注入，什么时候分发action使用者说了算

export const asyncIncrementAction = function (number) { return dispatch => { // 处理异步行为： 发送ajax请求，开启定时器 setTimeout(() => { dispatch(incrementAction(number)); }, 2000) } }