react项目开发笔记

最新推荐文章于 2024-03-23 09:49:47 发布

小傲傲_ao

最新推荐文章于 2024-03-23 09:49:47 发布

阅读量341

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/qq_38293228/article/details/114118375

版权

1、parse

const { search, pathname } = useLocation(); //location.search
const {a,b,c}=parse(search, {
    ignoreQueryPrefix: true,
  });

-- search=?a=1&b=2&c=3
-- ignoreQueryPrefix 这个参数可以自动帮我们过滤掉location.search前面的❓，然后再解析;
------ addQueryPrefix 设为true可以在序列化的时候给我们加上❓

// 解析时
qs.parse('?x=1') // {?x: "1"}
qs.parse('?x=1', {ignoreQueryPrefix: true}) //  {x: "1"}
 
// 序列化时
qs.stringify({x: "1"}) //    x=1
qs.stringify({x: "1"}, {addQueryPrefix: true}) //  ?x=1

项目中测试

参考：qs库使用指南

2、setupProxy

配置 package.json
	"proxy":"https://xxxx.com"
问题： 只能代理一个服务器

react配置多个代理、跨域：

1）安装 http-proxy-middleware 管理包：
	$ npm install http-proxy-middleware --save
	or
	$ yarn add http-proxy-middleware	
	
2）在项目目录src/下新建setupProxy.js文件

3）重新启动

setupProxy.js配置如下

//里面的'api'代表target的域名url代理后的url
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    '/api', //表示请求的接口以/api/开头
        	//例如请求后端接口http://dev-insurance.com/dw-insurance-api/api/login
        	//fetch('/api/login').then()
    createProxyMiddleware({
      target: 'http://11.11.11.11:1111',// 目标服务器 host
      changeOrigin: true,// 默认false，是否需要改变原始主机头为目标URL
    })
  );
};

项目中展示

在这里插入图片描述

参考
react配置多个代理,跨域
 http-proxy-middleware手动配置代理解决跨域问题**

3、lodash/uniqueId

_.uniqueId([prefix=’’])：生成唯一ID，如果提供了 prefix ，会被添加到ID前缀上。

_.uniqueId('contact_');
// => 'contact_104'

_.uniqueId();
// => '105'

参考：Lodash中文文档

4、数组方法

（1）sort()

1、
var arr=[George,John,Thomas,James,Adrew,Martin];
var arrSort=arr.sort();
Adrew,George,James,John,Martin,Thomas

2、
var arr=[10,5,40,25,1000,1];
var arrSort=arr.sort();
1,10,1000,25,40,5

3、排序函数的使用
var t=sort((a,b)=>{return a-b}) 1,5,10,25,40,1000

(2) lodash/groupBy

_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }
 
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

_.groupBy(data(对象数组), (item)=>item.name);

(3) lodash/keys(用于对象) 和keysIn有区别

var obj={a:'1',b:'2'}
keys(obj)   结果：[a,b]

5）setStatte的同步和异步
在这里插入图片描述
6）key的意义

如果数据索引没有发生变化，则UI不会重绘，只有发生变化的部分，会重绘；这样达到节省资源

001、qiankun

参考：
微前端连载 6/7：微前端框架 - qiankun 大法好
 qiankun api

002 React—useRef 以及其在定时器中的应用

参考：
React—useRef (五颗星*****)

什么是 useRef , useRef 与 createRef 区别, 以及在什么情况下使用 useRef

其他

1）TypeError: Cannot read property ‘parentNode’ of undefined

各个页面定义组件ID的时候，必须是全局唯一性；（整个项目中，所有组件的id不能重复）
否则当加载有同一个ID的两个页面的组件后，关闭其中一个页面会因为不能确定关闭是那个组件就报找不到父亲节点的错误
这个错误是指：没有父节点，都是野孩子，并不是指‘parentNode’这个属性没有定义，但可以理解为某个属性定义错误

参考：参考链接

2）craco插件

在使用react项目中，不可避免的要使用蚂蚁金服出品的ant-desgin前端UI组件，
ant-desgin推荐使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案），对 create-react-app 的默认配置进行自定义。

参考：
create-react-app 创建的工程中使用 antd 组件（使用 craco 配置）**
REACT 项目中使用LESS，以及支持装饰器语法模式配置CRACO.CONFIG.JS配置 **
使用 craco 配置基于 create-react-app 的开发环境
 在react项目中，使用craco插件进行mobx配置解决方案
 在creact-react-app当中使用craco插件，配置生产环境取消console解决办法
 craco插件github
https://www.jianshu.com/p/7de3d3b15ff3

3）import 和 @import

script中的import是js的语法, 是在js中去引用css文件
style中的@import是stylus的语法，也就是在css中引用css文件,
就像saas那样理论上效果都是一样的, 都是将依赖的文件在打包的时候一块打包进去

参考：
import与@import的区别
 @import 后面的波浪号~ 代表什么意思

5）GitHub提交问题：
A、centos 低版本出现fatal: unable to access ‘https://github.com/XXXX’: SSL connect error （*未尝试）

yum update nss 把openssl更新到最新版本 搞定

B、git报错：OpenSSL SSL_read: Connection was reset, errno 10054 错误解决 *（有作用）

修改设置，解除ssl验证>
git config --global http.sslVerify "false">
此时，再执行git操作即可。

C、git push github失败，提示：SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

主要部分：
git config --global --unset http.proxy

在这里插入图片描述
6）react-beautiful-dnd的使用

A、解决antd+react的Input组件每次输入都失去焦点（有作用）
在这里插入图片描述
B、react+antd开发中input框每输入一个字符就失去焦点（看看就行）

C、基于react的拖拽组件库react-beautiful-dnd API参数简易说明
D、react-beautiful-dnd
E、使用 react-beautiful-dnd 快速实现可拖拽看板

7）react插件之复制
原生js实现：（存在问题）
参考：React—点击按钮实现内容复制功能

react插件实现：react-copy-to-clipboard
参考：React项目中复制(react-copy-to-clipboard)

8）网站技术分析插件
wappalyzer

9）完美解决github访问速度慢

完美解决github访问速度慢

ipconfig /flushdns 刷新DNS解析缓存
在这里插入图片描述

10）formik

使用Formik轻松开发更高质量的React表单

11）改变大小：
React-resizable/react-resizable-box 使用注意事项（小白踩坑）
re-resizable仓库 ***
重要代码
 react-resizable-box - 可调整大小的React组件
 React：Table 那些事（3-3）—— 列宽自适应、列宽拖动
 鼠标拖拽调整div大小(js实现)
yarn 常用命令
在这里插入图片描述

lock文件插件版本版本不同时项目启动：package.json qiankun push和replace React.Fragment

持续更新中……

小傲傲_ao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
react项目开发笔记

1、parseconst { search, pathname } = useLocation(); //location.searchconst {a,b,c}=parse(search, { ignoreQueryPrefix: true, });-- search=?a=1&b=2&c=3-- ignoreQueryPrefix 这个参数可以自动帮我们过滤掉location.search前面的❓，然后再解析;------ addQueryPrefix 设为tru
复制链接

扫一扫