weixin_49684995的博客

原创 react中配置ajax请求（axios）

axios

原创 git 命令删除远程分支和本地分支

git命令删除远程分支和本地分支

原创 图片懒加载

import img1 from "../imgs/1.png";import img2 from "../imgs/2.png";import img3 from "../imgs/3.png";import img4 from "../imgs/4.png";import img5 from "../imgs/5.png";import img6 from "../imgs/6.png";import img7 from "../imgs/7.png";import img8 from "

原创 react项目在windows系统中热更新出现Uncaught ReferenceError: process is not defined

找了半天才发现是react-error-overlay版本的问题，而且只在window系统中有，苹果系统没有这个问题可以直接修改yarn.lock文件，还原到6.0.9修改完成后项目重新yarn一下重启项目。完事

原创 Redux Toolkit使用

1、引入yarn add @reduxjs/toolkit react-redux ornpm install @reduxjs/toolkit react-redux2、入口js文件引入storeimport React from "react";import ReactDOM from "react-dom";import reportWebVitals from "./reportWebVitals";import Router from "./router";import { P

原创 移动端vConsole的使用

html头部引入<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.7.0/vconsole.min.js"></script>body中引入 <script> window.onload = () => { var vConsole = new VConsole(); console.log("Hello world"); };

原创 使用qrcode.react生成二维码

1、安装 yarn add qrcode.react2、使用import QRCode from 'qrcode.react';...<QRCode value={'https://www.baidu.com'} />

原创 react中classnames库的使用

1、引入classnames yarn add classnames2、在js文件中使用，我这里用的lessimport css from './App.module.less';//这里引入classnames import classnames from 'classnames'function App() { return ( //这里直接使用classnames <div className={classnames(css.test1,css.test

原创 react项目配置postcss-px2rem-exclude

1、安装yarn add postcss-px2rem-exclude2、在config-overrides.js文件中配置addPostcssPluginsconst {override,addPostcssPlugins} = require('customize-cra')module.exports = override( addPostcssPlugins([ require('postcss-px2rem-exclude')({ remUnit: 75,

原创 react项目配置less(配置config-overrides.js）

1、安装 yarn add react-app-rewired customize-cra2、在根目录下创建config-overrides.js文件3、安装 yarn add babel-plugin-import less less-loader4、在config-overrides.js里配置const {override,addLessLoader} = require('customize-cra')module.exports = override( addLessLo

原创 react项目配置less(修改webpack.config.js方法）

1、在新建的react项目中安装npm 使用 npm install less less-loaderyarn 使用 yarn add less less-loader2、在命令行输入npm run eject，将config下webpack.config.js显示出来.并且配置3、在webpack.config.js中：①在const sassModuleRegex = /.module.(scss|sass)$/下面添加：const lessRegex = /\.less$/const l

原创 git回退指定版本

1、git reset --hard c48615465d4bb910f210707134ab16da358dd501（c48615465d4bb910f210707134ab16da358dd501为版本的commit SHA 码）2、git push -f origin devlop(devlop 为你回退后需要覆盖的分支）

原创 git打tag标签到远程仓库

1、命名：git tag -a 版本1 -m “版本1”2、查看：git tag3、推送：git push origin 版本1

原创 [MobX] Since strict-mode is enabled, changing (observed) observable values without using an action..

[MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify:报错源代码展示:async test() {const testResult = await test()this.testNumber = testResult}处理方式:1.引入runInActionimport { runIn

原创 文字最多三行超出部分省略号

overflow-y: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;

原创 type=“number“的input输入框不显示后面的那个按钮

css样式 input{ &::-webkit-inner-spin-button { -webkit-appearance: none; }}

原创 回车搜索事件

onKeyDown={e=>{ if(e.keyCode===13 && e.target.value){ onSearch() } }}

原创 css修改下拉框样式

&::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background-color: #d1cccc; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } &::-webkit-scrollbar-thumb { background-co..

原创 css复制功能的方法

function copy() {var tag = document.createElement(‘input’)tag.setAttribute(‘id’, ‘cp_input’)tag.value =’ 复制的内容 ’document.getElementsByTagName(‘body’)[0].appendChild(tag)document.getElementById(‘cp_input’).select()document.execCommand(‘copy’)document

原创 img的3像素问题如何解决

导致原因：img的display默认值inline-block导致解决方法1：设置display：block;方法2：设置font-size:0;方法3：设置vitical-aline的值不等于base-line即可

原创 react-native超出文本显示省略号

首先容器需要有宽度，设置文本的属性numberOfLines，取值：numbernumber代表几行显示，设置1为文本一行显示，超出容器宽度后省略号显示<View style={{width:100}} > <Text numberOfLines={1}>示例示例示例</Text></ View>...

原创 Object.prototype.toString.call()判断变量是不是数组或者Date等等

Object.prototype.toString.call([1,2,3,4]) === “[object Array]” //trueObject.prototype.toString.call(new Date()) === “[object Date]” //true…以此类推，可以确定任意变量的数据类型

原创 简述浏览器工作原理

1、用户界面-地址栏、后退/前进按钮、书签栏等；2、浏览器引擎-查询和操作渲染引擎；3、渲染引擎-渲染界面；4、网络-完成类似于http请求这样的网络调用；5、UI后端-用来绘制类似于组合选择框和对话框这样的组件；6、js解释器-解释执行js代码；7、数据存储-属于持久层，浏览器需要在硬盘中保存类似于cookie的各种数据...

原创 react和vue的diff过程有什么区别

react是生成一个全新的数据，用diff方法去比对state。应用的状态被改变时，全部子组件都会重新渲染。所以react中diff的时Dom.Vue在渲染过程中，会跟踪每一个组件的依赖关系，不会重新渲染整个组件树，所以Vue diff的是数据。...

原创 什么是闭包

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链，将函数内部的变量和方法传递到外部。（简单的来说，闭包就是函数内部的变量在执行完成后本该销毁，却被外部调用，导致无法销毁，此时就形成了闭包。缺点也显而易见：浪费空间，还会导致内存溢出）闭包的特性：函数内再嵌套函数内部函数可以引用外层的参数和变量参数和变量不会被垃圾回收机制回收...

原创 nmp修改淘宝源

直接上代码npm config set registry https://registry.npm.taobao.org/

原创 ajax的readyState和status有什么区别

readyState是指运行AJAX所经历的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤，使用“ajax.readyState”获得；status是指无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，使用“ajax.status”获得；总的来说，state代表一个整体的状态，而status是这个大的state下面具体的小的状态。...

原创 解决终端占用问题Port 3000 is already in use

1、windows+R 打开命令窗口2、输入：netstat -ano|findstr “3000”回车3、打开任务管理器，找到PID栏对应的数字，右键结束

原创 var与let申明时作用域链的误区

用let时：function f69() {let arr = [ ];for (let i = 0; i < 10; i++) {arr[i] = function() { console.log(i); } }return arr;}let f70 = f69();f701; // 输出结果为1f706; //输出结果为6用var时：function f69() {let arr = [ ];for (var i = 0; i < 10; i++) {arr[i]

原创 DOM2级事件监听器

<body> <button id="test">点击我</ button> <script> let test = document.getElementById("test"); test.addEventListener("click",function(){ console.log("this is a test"); },false);

原创 复杂类型传参误区

复杂类型传参时，形参和实参保存的地址相同，操作的也是同一个对象。所以在下例函数中最后一行j.name输出结果是”张三“。代码：function person(name) {this.name = name;}function text(i) {console.log(i.name); //李四i.name =“张三”;console.log(i.name); //张三}let j = new person(“李四”);console.log(j.name); //李四text(j);

原创 Node.js的REPL运行环境中的一些常用命令

原创 flex:1与flex-grow:1最简单的区别与计算

一、flex的宽度计算方式是容器剩余空间+具有flex属性的元素自身尺寸：例如在一个width:400px的容器中，有a、b、c 三个width:100px的元素，给a元素flex:2的属性，给b元素flex:1的属性，不给c元素。计算宽度是：剩余空间（400px-300px）:100px + 参与flex项目尺寸200px=300px 再按3份的比例给a2份，b1份。最后：a:width:200px ; b:width:100px ; c:width:100px二、flex:grow的