Date 对象Date 对象用于处理日期与时间。创建 Date 对象: new Date()
react中使用mock.js模拟接口数据
原本从接口获取到数据的流程(完整例子在笔记“redux进阶(1)”中)
在组件中创建一个生命周期函数componentDidMount()。引用 axios 模块,在componentDidMount函数中借助 axios 模块发送ajax请求,使用axios.get("接口路径")来获取某个接口路径下的数据,请求成功后执行then()的回调函数(接收一个参数res表示接收到的数据),请求失败后执行catch()的回调函数
桌面创建list.json文件,并在其中放入一个数组
使用接口地址在**Charles中模拟接口数据,使得发送请求到接口路径时调用我们桌面的list.json文件【使用Charles抓取localhost包需要注意更换url:需要使用http://localhost.charlesproxy.com:3000/访问**】
then()的回调函数中打印出的res中的内容,可得到 res中的data是我们需要的数组,那么我们可以在ajax请求成功时通过then()获取data数据
Mock.js的使用方法
Mock.js
作用:生成随机数据,拦截 Ajax 请求 (并返回数据)
当后端还没开发好某个接口时,前端可以借助 Mock.js 拦截 Ajax 请求 并返回设置好的随机数据。当后端接口开发完成后,只需要改变 Ajax 请求 的接口路径即可。
我们写AJAX请求的时候,正常写,Mock.js会自动拦截的。
官方网站
开发博客项目之接口(2)
4-5 搭建开发环境
从0开始搭建,不使用任何框架
使用nodemon监测文件变化,自动重启node(不需要像之前那样使用node xxx.js来手动重启node)
使用cross-env设置环境变量,兼容mac linux和windows
Redux进阶(1)UI组件、容器组件、无状态组件
UI组件和容器组件
我们让 UI组件 负责页面的渲染,让 容器组件 负责页面的逻辑
当然有时候让 UI组件 负责一点点逻辑也是可以的。
当 UI组件 只负责页面渲染时,它实际只有一个render函数,那么此时我们可以使用无状态组件代替它以提高性能。
Redux的reducer为什么不能有异步操作
回顾Redux设计和使用的三大基本原则可参考笔记Redux入门(2):
单一数据源,也就是store中的state是唯一的
state 是只读,Redux并没有暴露出直接修改state的接口,必须通过action来触发修改(即:只有store能改变自己的state)
reducer必须是纯函数
Redux入门(2)
使用redux完成TodoList列表功能实现效果:继续上一篇笔记的例子,我们希望在点击 “提交”按钮 后,input框中的 数据value 存到store中的list 中,并清空input框。