- 博客(106)
- 收藏
- 关注
RSS订阅原创 Mock.js
其中：1.rurl：可选表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、‘/domian/list.json’。2.rtype：可选表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。3.template：可选表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。4.function(options)：可选表示用于生成响应数据的函数。5.options：指
2022-07-11 23:35:44
812
1
原创 TS泛型初学
定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定）此时泛型便能够发挥作用；举个例子：由于类型不确定所以参数和返回值均使用了any，但是很明显这样做是不合适的首先使用any会关闭TS的类型检查，其次这样设置也不能体现出参数和返回值是相同的类型；这里的就是泛型；T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型；所以泛型其实很好理解，就表示某个类型；使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断
2022-07-07 17:24:47
884
原创 useEffect
在react中，可以在生命周期中执行副作用操作，在react hooks中，可以在中执行副作用操作。（注：副作用的来源：配置文件、用户的输入、数据库等等，所有的外部交互都有可能产生副作用，副作用会给程序带来安全隐患和不确定性，要尽可能的控制副作用在可控制的范围内发生。）在 react 中， 和 这三个生命周期时候会执行。有两个参数，第一个参数是要执行的函数，第二个参数是一个依赖项数组(根据需求第二个参数可选是否填写)（1）.若不写第二个参数，函数操作每次都会执行 （2）.若有第二个参数且数组里的变量不为
2022-07-07 16:42:02
735
原创 扩展运算符
（1）复制数组数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。上面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a2，会直接导致a1的变化。ES5 只能用变通方法来复制数组。上面代码中，a1会返回原数组的克隆，再修改a2就不会对a1产生影响。扩展运算符提供了复制数组的简便写法。上面的两种写法，a2都是a1的克隆。（2）合并数组扩展运算符提供了数组合并的新写法。上面代码中，a3和a4是用两种不同方法合并而成的新数组，但是它们的成员都是
2022-07-06 13:23:04
583
原创 解析赋值的用途
（1）交换变量的值上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。（2）从函数返回多个值函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。（3）函数参数的定义解构赋值可以方便地将一组参数与变量名对应起来。（4）提取 JSON 数据解构赋值对提取 JSON 对象中的数据，尤其有用。上面代码可以快速提取 JSON 数据的值。（5）函数参数的默认值指定参数的默认值，就避免了在函数体内部再写;这样的语句。（6）遍历 Map 结
2022-07-04 18:08:01
240
原创 es6运算符扩展
1. 指数运算符**ES2016 新增了一个指数运算符（）。**这个运算符的一个特点是右结合，而不是常见的左结合。多个指数运算符连用时，是从最右边开始计算的。上面代码中，首先计算的是第二个指数运算符，而不是第一个。指数运算符可以与等号结合，形成一个新的赋值运算符（=）。**2.链判断运算符 3.Null 判断运算符??读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。但是属性的值如果为空字符串或false或0，默
2022-07-04 16:54:08
126
原创 git相关操作
1.克隆远程仓库2.在master主支上新建一个分支3.写完相关代码，添加新的全部代码至本地暂存区4.添加至本地仓库5.push到远程git仓库注意：切换分支前要先提交当前分支代码，以免把当前代码提交到另一个分支上去............
2022-07-03 22:18:46
91
原创 右键打开文件夹新加vscode打开
参考大佬文章：右键菜单，用VSCode打开文件和文件夹主要看右击文件用vscode打开和右击文件夹用vscode打开他们注册表的配置使不大一样的，位置不一样右击文件是在：分支里面设置右击文件夹是在：分支里面设置...
2022-06-29 00:32:47
375
原创 react使用antd3.x和4.x按需导入样式
react使用antd在实际开发中还有一些优化的空间，比如无法进行主题配置、加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb）。此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired (4.x:craco)（一个对 create-react-app 进行自定义配置的社区解决方案）。引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.
2022-06-28 19:51:08
694
原创 webpack引入模块import 后面加入{}和不加大括号有什么区别
导入默认值引入模块可能有一个 default export（无论它是对象，函数，类等）可用。然后可以使用 import 语句来导入这样的默认接口。导入单个接口给定一个名为 myExport 的对象或值，它已经从模块 my-module 导出（因为整个模块被导出）或显式地导出（使用 export 语句），将 myExport 插入当前作用域。导入带有别名的接口你可以在导入时重命名接口。例如，将 shortName 插入当前作用域。仅为副作用而导入一个模块整个模块仅为副作用（中性词，无贬义含义）而
2022-06-28 14:23:17
196
原创 react的antd解析源映射失败
问题：Failed to parse source map: ‘webpack://antd/./components/config-provider/style/index.less’ URL is not supported，也就是react的antd解析源映射失败查看react-script版本：当react-script版本在5.0.0以上使，导入antd方式替换成如下:备注：react,react-dom,react-scripts是react项目的主要依赖...
2022-06-27 22:48:38
496
原创 BrowserRouter和HashRouter的区别
1. 底层原理不一样2. url表现形式不一样3. 刷新后对路由state参数的影响4. 备注
2022-06-27 17:22:43
263
原创 React v5向路由组件传参
路由链接（携带参数）：注册路由（声明接收）：接收参数：2.search参数路由链接（携带参数）：注册路由（无需声明，正常注册即可）：接收参数：获取到search参数是urlencode编码字符串，需要借助querystring解析，vscode提示我用，我就安装dev开发依赖，再import引入，解析后的对象，首个key多了？，用slice函数进行截取3.state参数路由链接（携带参数）：to值为对象，当中需要的key有pathname和state注册路由（无需声明，正常注册即可）：接
2022-06-24 11:09:30
464
原创 React路由v5和v6版本嵌套路由和重定向
react-router-dom需要自行安装，目前的v5和v6版本用法上的主要区别：匹配一个路由包裹组件v5:v6:注册路由指向的组件属性：v5: 值为组件名称，如v6: 值为组件 嵌套路由：v5:需要写父级路由，如v6:不写父级路由，如重定向：v5:用，如：v6:用,值为，如：精准匹配与模糊匹配：v5:默认是模糊匹配，通过在Route配置加exact开启精准匹配v6:默认开启精准匹配，加/*开启模糊匹配v6相关代码：一般路由：（嵌套路由：...
2022-06-13 01:03:08
761
原创 跨域访问问题
问题背景：客户端3000端口访问服务端5000端口，形成跨域，无法访问，报错如下：Access to XMLHttpRequest at ‘http://localhost:5000/students’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.解决方法1
2022-06-01 15:11:31
321
原创 react基础-todolist案例相关知识点
1. 拆分组件、实现静态组件，注意：className和style的写法(还有onClick等驼峰式命名)先用总体的js和css文件进行盛放html文件的部分内容（结构）和css样式结构，分别放于App.jsx和新建App.css(记得App.jsx引入App.css)，测试是否正常运行与显示（好的编码测试习惯，不要都拆了，甚至改变了内容再进行测试）（注意拆分的时候要看样式是否用到一些id）根据实际情况拆分组件，新建空的组件文件夹进行建立各个组件，各个组件中包含index.jsx文件和ind
2022-05-30 19:09:03
80
原创 js中的static
一、查阅MDN文档：定义：类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这些通常是实用程序方法，例如创建或克隆对象的功能。静态方法调用同一个类中的其他静态方法，可使用 this 关键字。class StaticMethodCall { static staticMethod() { return 'Static method has been called'; } static anotherSt
2022-05-30 15:52:29
3128
原创 回调函数的返回值需设为函数的情况
问题背景：回调函数是调用函数了的返回了结果的，所以该回调函数的返回值应该是函数，在返回函数中进行处理事务，否则没触发动作就会发起处理！如：export class Item extends Component { //鼠标是否移入的状态 state = {mouse:false} //改变鼠标状态 handleMouse = (flag) => { return () => { this.setState({mouse:
2022-05-29 23:06:23
189
原创 第三方、自己写的、样式的引入顺序
顺序为：第三方自己写的样式如：import React, { Component } from 'react'import Item from '../Item'import './index.css'
2022-05-27 17:12:59
87
原创 js解构对象的基本赋值
var o = {p: 42, q: true};var {p, q} = o;console.log(p); // 42console.log(q); // true
2022-05-27 16:00:43
55
原创 环境变量中bin目录是什么，windows 环境变量中%%的作用和path的作用
问题背景： 今天装Git，配置Git环境变量时，好奇bin目录到底是是什么，其他的环境变量也经常用到它。一、bin是什么文件bin是用户可执行文件，以下是常见文件目录：•主目录：/root、/home/username•用户可执行文件：/bin、/usr/bin、/usr/local/bin•系统可执行文件：/sbin、/usr/sbin、/usr/local/sbin•其他挂载点：/media、/mnt•配置：/etc•临时文件：/tmp•内核和Bootloader：/boo
2022-05-24 00:33:32
4128
原创 node.js、npm与yarn的安装和环境变量配置
问题背景：用react脚手架搭建react项目时，想用yarn工具yarn start运行项目，发生执行时乱码错误，npm start却可运行，初步判断应该是环境变量路径含有中文，于是想要重新安装node.js并重新配置环境一、安装node.js和npm从官网中下载msi文件，然后逐步next安装，安装路径选择在D盘新建了Node文件夹，在Node文件夹里创建nodejs文件夹，在nodejs文件夹中存放node_global和node_cache文件二、配置node环境变量根据第一步创建的n
2022-05-23 17:42:40
879
原创 react/vue中key的作用、遍历列表key如何设置
一、虚拟DOM中key的作用key是虚拟DOM对象的标识，更新显示时起着重要中用当状态中的数据发生变化，react会根据新数据生成新的虚拟DOM，随后将新虚拟DOM和旧虚拟DOM进行diffing算法比较：1）旧虚拟DOM与新虚拟DOM有相同的key:若虚拟DOM中内容一样，直接使用之前的真是DOM若虚拟DOM中内容不一样，生成新的真实DOM，随后替换页面中的真实DOM2)遍历列表用index作为key可能会引发的问题：若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生
2022-05-16 22:36:50
264
原创 react生命周期（新）
getSnapshotBeforeUpdate()案例：每一秒list多加一条，列表的scrollTop的值动态变化达成手动拉动滚动条时，列表可视区域不再滚动复习: scrollTop、scrollHeight1.scrollHeight含有scroll当然这个高度与滚动相关。读写：只读描述：包括overflow样式属性导致的视图中不可见内容，没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的.
2022-05-16 10:36:18
59
原创 react的生命周期（旧）
react的生命周期（旧）主要分为三个部分：初始化阶段、更新阶段、卸载组件初始化阶段：由ReactDOM.render()触发-----初次渲染1. constructor()2. componentWillMount()3. render() //必须的4. componentDidMount() //常用，一般在这个钩子做一些初始化，如：开启定时器、发送网络请求、订阅消息更新阶段：由组件内部this.setState()或父组件render触发1. shouldCompon
2022-05-11 22:50:52
456
原创 react项目React Developer Tools不可访问此网站问题
在学react时，网页打开react项目时，React Developer Tools不可访问此网站，才发现vscode右键的Open with Live Server和Open in Broswer是有区别的，区别如下：Open in Broswerurl是本地存储的默认路径，访问的是项目保存的本地地址,React Developer Tools不可访问此网站，访问的页面是静态页面，写代码时，在工作区保存了代码之后，还需要另外到浏览器页面进行刷新才能看到最新的效果。Open with Live S
2022-04-27 12:27:45
1338
原创 react受控组件
受控组件可以根据输入变化状态跟着改变class Demo extends React.Component{ state = {username:'',password:''} //禁止表单自动提交 handleSubmit = (e)=>{ e.preventDefault(); const {username,password} = this.state
2022-04-27 00:14:27
794
原创 react的refs属性
class Demo extends React.Component{ myRef = React.createRef() myRef1 = React.createRef() showData = ()=>{ alert(this.myRef.current.value) } showData1 = ()=>{
2022-04-26 18:30:42
1728
原创 react的props属性
props可以从外部像类传递参数，引入prop-types.js文档，利用propTypes进行类型和必要性的限制，利用defaultProps设置默认值，这两个属性应写在类本身上，所以用static定义（不推荐用Person.propTypes，实际开发不简洁），props不可修改 class Magic extends React.Component{ //对标签属性（props）进行类型、必要性的限制 写在类本身上 static prop
2022-04-26 00:33:02
1578
原创 js展开运算符...的用途和react中的展开运算符...
一、展开一个数组let arr = [1,2,3]console/log(...arr) //1 2 3二、连接数组let arr1 = [1,2,3]let arr2 = [4,5,6]ler arr = [...arr1,...arr2]console/log(arr) //[1,2,3,4,5,6]三、函数不定参数function sum(...nums){ return nums.reduce((pre,cur)=> { return pre + sur })
2022-04-25 18:26:50
627
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人