React学习
henuGM
心要静,才能成为高手
展开
-
给JSON-Server添加中间件
需要添加的中间件:middleware.js:module.exports=(req,res,next)=>{ if(req.method==='POST'&&req.path==='/login'){ if(req.body.username==='jack'&&req.body.password==='123123'){ return res.status(200).json({原创 2022-02-12 15:17:42 · 1277 阅读 · 0 评论 -
使用泛型控制Typesript项目中的类型保持与any替代的问题
Typescript与Javascript的区别在于:ts是强类型,而js是弱类型。在ts中每一个函数或者组件获得的参数都需要确定类型,这样我们就可以在静态页面中通过ts党的报错直接解决大部分bug,避免了js弱类型,只能在代码运行中报错的问题。而在ts中,我们也应该避免使用any,any就意味着这个参数可以是任意类型,在运行代码时容易发生错误。export const useDebounce = (value: any, d...原创 2022-02-12 14:00:08 · 802 阅读 · 0 评论 -
使用Debounce对频繁数据的请求操作进行处理
在有查询功能的项目中,只要输入框值的改变,请求出来的数据都会不同。而对于即时查询功能,也就是一旦在输入框中值,数据即时请求且即时展示的项目,我们往往在输入几个关键字的时候触发多次请求. 这种即时查询系统,在react项目中一般都是使用useEffect对输入框的值的改变进行处理。例子:在输入物料管理系统这六个字的时候,我们就发送了三次请求,这对整个系统的稳定是不利的。在这里我们使用debou...原创 2022-02-11 15:15:03 · 1229 阅读 · 0 评论 -
使用.env与qs.stringify()对接口进行处理
例子:已知现在是通过两个值来对本地server请求数据。http://localhost:3001/projects?name=%E9%AA%91%E6%89%8B&personId=1name是转译过的,在这里我们是要使用name和personId从服务端请求值,所以这里的处理比较重要。 1、如果我们是在本机设置的mock-server进行接口测试,我们应该把测试的接口与最后正式使用的接口区...原创 2022-02-11 14:11:49 · 566 阅读 · 0 评论 -
使用.env从项目中提取需更换的值
日常开发中,前端与后端开发进度不一,如果后端开发较慢,前端所需接口需要我们自己去mock,这里我们使用的接口就是自己本机上的接口,在后端开发完毕后,我们需要将这个接口换回来。如果这个接口在项目中多次出现,且项目极其复杂,那么我们就需要将这种数据提出来。在项目根目录下,新建文件“.env”与“.env.development”在.env.development中这样写:REACT_APP_API_URL=http://local...原创 2022-02-10 15:26:14 · 723 阅读 · 0 评论 -
使用JSON Server在项目中配置Mock数据以及json server的基本数据操作
1、项目根目录下键入:yarn add json-server -D等待安装成功。2、在项目根目录下新建文件夹“__json_server_mock__”.这个文件夹名字前后代两个杠,代表这个文件夹实际与本项目代码关系不大。3、在此新建文件夹中创建文件“db.json”,写入:{ "user":[]}4、再在package.json中找到以下代码,并添加代码:"scripts": { "start": "react-scripts start",原创 2022-02-10 14:00:22 · 8572 阅读 · 0 评论 -
Typescript-React项目开发前配置
npx create-react-app jira --template typescriptnpx可以让你直接去使用npm里面的包,而不需要先安装这个包。创建完之后,打开创建的项目可以看到,已经有一次git的commit记录,而且显示的是create-react-app这个包进行的git,已经自动把所有文件加入到git中。npm start//打开这个项目一般来说,如果整个项目的目录结构不复杂,文件夹的嵌套结构不深的情况下,要import...原创 2022-02-09 17:07:01 · 525 阅读 · 2 评论 -
react-native设置路由以及Attempt to invoke interface method boolean com.swmansion.reanimated.layoutReanim报错
在目前最新rn版本v0.67.2下,在设置react-navigation时,可以直接安装以下依赖:yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/material-top-tabs react-nat...原创 2022-02-05 14:19:30 · 794 阅读 · 0 评论 -
React+express全栈商城项目
一、前端部分:技术栈:react,react-bootstrap思路:在使用npm init建立起来的node项目中创建文件夹建立前端,这是前后端不分离,前后端分离也差不多就这样 将react初始项目src文件夹中文件大部分删除,留下app.js,index.js,index.css,reportWebVitals 下载react-bootstrap,并引入文件bootstrap.min.css 下载react-router-dom,在入口文件App.js中引入路由,使得<Rou..原创 2021-10-29 09:31:16 · 1044 阅读 · 0 评论 -
React的网络请求发送-----React学习(二)
学前知识:1、React本身只关注于页面,并不包含发送ajax请求的代码2、前端应用需要通过ajax请求来与后台进行交互3、react应用中需要集成第三方ajax库4、常用的ajax库有jQuery和axios在这里,我们使用axios:安装依赖:npm install axios --save引入axios依赖:import axios from 'axios'axios的get操作:axios.get('/user?ID=12345').the..原创 2022-03-01 22:28:02 · 3044 阅读 · 0 评论