- 博客(79)
- 收藏
- 关注
RSS订阅原创 笔记-开箱必备
1、先安装git,链接（https://lvan-zhang.blog.csdn.net/article/details/115665707），就可以下载代码了，一定要记住密码，打开.ssh 找到密钥和公钥，（不用每次输入密码：https://blog.csdn.net/weixin_43972437/article/details/114578337）sudo 命令。6、安装vscode（https://www.runoob.com/w3cnote/vscode-tutorial.html?
2023-02-24 21:20:52
417
3
原创 简历技术点和业务总结
unknown与any的最大区别是： 任何类型的值可以赋值给any，同时any类型的值也可以赋值给任何类型。例如一个state初始值是0，定义一个方法3秒后打印这个state的值，点击一次按钮state+1，还有一个按钮是点击调用这个3秒的方法。useState状态发生改变就会触发重新渲染，每次渲染组件内部的state、props和事件函数都是独立的，因此会出现获取state值不是最新的情况。这道理就像，你翻开十年前的日记本，虽然是现在翻开的，但记录的仍然是十年前的时光。这个讲的很详细，忘了就再看一遍。
2023-02-12 18:55:39
417
2
转载 运行react项目报 Cannot find module ‘webpack/lib/ModuleFilenameHelpers‘
使用命令yarn start 之后，控制台报如下错误解决方法：百度搜索之后，看到有位大佬说是使用的是全局的 webpack，找不到某些目录，将全局的指向自己当前的项目即可。命令如下： npm link webpack命令运行完之后，再yarn start ，项目就跑起来了，非常不错，亲测有效，记录一下，防止自己忘记了，哈哈哈~大佬链接：链接...
2021-04-20 14:54:14
6541
原创 关于webpack的一些配置？
文章目录1、webpack 如何抽离公共代码和第三方代码？webpack 如何实现异步加载js?webpack 如何处理JSX 和vue 文件?module chunk bundle 的区别？webpack 的性能优化1、webpack 如何抽离公共代码和第三方代码？为什么要抽离公共代码和第三方代码？因为当多个组件引入同一个组件的时候，打包的时候都会再次去打包引入的那个组件，这就造成了浪费。同理，当多个组件引入第三方代码，那每次打包有多少个页面引入第三方过就会打包多少次，如果是很大的第三方代码就会造
2021-04-02 16:27:55
621
3
原创 webpack篇
1、基本介绍webpack 已是前端打包构建的不二选择关于webpack5对比webpack4，webpack5没有太多使用上的改动webpack5 主要是内部效率的优化2、基本配置拆分配置和merge
2021-03-29 16:46:08
652
1
原创 两个数组，找出他们相同的项，并把相同项在各自数组中去掉
例如： a =[1, 2, 3, 4] , b =[2, 3, 6],那么我想要得到的结果是a=[1,4],b=[6] const a = [1, 2, 3, 4] const b = [2, 3, 6] const filterArr = (arr1,arr2) => { const newArr = JSON.parse(JSON.stringify(arr2)) arr1.forEach((item) => { if (newArr.indexOf(i
2021-03-25 13:42:56
563
1
原创 React Hooks
文章目录1、class 组件的问题？2、 useEffect 模拟组件的生命周期？1、class 组件的问题？大型组件很难拆分和重构，难测试相同业务逻辑，分散到各个方法中，逻辑比较混乱服用逻辑变得复杂，如Minxins 、HOC、Render Prop所以react 提倡函数式编程，因为函数更灵活、更易拆分、更容易测试，但是函数太简单，但是函数组件加上hooks就能实现class 里的功能。2、 useEffect 模拟组件的生命周期？模拟componentDidMount 和compo
2021-03-24 17:18:03
431
原创 Vue框架
1、生命周期（单个组件）？挂载阶段：beforeCreate（创建前）: 这时数据监测和事件初始化还未开始，data、watcher、methods 还不存在，但$route已存在，可以根据路由信息进行重定向。created（创建后）:在实例创建之后被调用，该阶段可以访问data，使用watcher、events、methods，也就是说 数据观测(data observer) 和event/watcher 事件配置 已完成。但是此时dom还没有被挂载。该阶段允许执行http请求操作。before
2021-03-09 17:24:23
2152
原创 JS算法题
// 算法题 const getArrOrTime = (oldVvalue: any) => { // 首先oldVvalue判断是字符串还是数组 if (oldVvalue instanceof Array) { // true 是数组 } else { // 就是字符串 // 将字符串转成数组 const timeArr = oldVvalue.split('').map(v => +v); // 接下来先截取.
2021-03-02 17:25:37
160
2
原创 在React Hooks 中子组件传值给父组件和跨多级传值给祖宗组件的方法
首先说一下我的应用场景：1：有一个列表页（A组件），两个表单弹窗（B组件和C组件）2：第一个弹窗（B组件）填完之后才能跳转到 第二个弹窗（C组件）3: 所有的值在C组件提交，调接口4：接口成功需关闭第二个弹窗（在B组件中关闭），且把列表（A组件）更新（刷新）这里就涉及到了子组件向父级组件传值的问题：接口成功之后需要关闭第二个弹窗，那么这里就需要C组件向B组件传弹窗需要关闭的信息（子向父传值 ，使用props解决）A组件中的列表刷新，就需要C组件向A组件传递后端返回的数据，来进行逻辑判断 （子
2021-02-25 16:14:08
3598
1
原创 面试之css篇
1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？不同：盒子的宽度和高度不同W3C标准盒模型宽度是内容（content）的宽，高度是内容的高度IE盒子模型宽是内容宽度+padding(左右)+border（左右），高是内容高+padding（上下）+ boder(上下)2、CSS选择器有哪些？哪些可以继承？id选择器、类选择器、元素选择器、通配符选择器、伪类选择器(:hover)、子选择器（ul>li）、相邻选择器(h2+p)、后代选择器（div span）可以继
2021-02-17 20:41:22
1176
2
原创 简单了解VUE3中的Composition API
1：什么是Composition API ？Composition API 中我们的代码是根据逻辑功能的进行组织的，可以把同一功能的不同代码放在一起，或者把他们单独拿出来放在一个函数中，所以Composition API 也可以称为基于函数组合的API。为什么要使用Composition API ？Composition API 是根据逻辑相关性来组织代码的，提高可读性和可维护性。更好的重用逻辑代码，在Options API中通过Mixins 重用逻辑代码，容易发生命名冲突且关系不清。在vue3
2021-01-29 16:10:02
341
原创 antd pro 下的ProTable 组件实现点击展开图标获取后台数据，渲染到表格中
1、需求： 实现点击展开图标获取后台数据，将其渲染到表格中，没有分页；效果图如下：具体实现这里有两个问题我做起来比较费劲，花了大半个下午的时间才找到解决问题的方法，一个就是点击展开图标的方法是哪个（expandable属性下的onExpand()），另一个就是找到点击展开图标调后台数据之后，如何让表格刷新(actionRef.current?.reload();)。先放代码，在仔细讲一下里面的属性：1：结构 <ProTable<DeptListItem> ac
2021-01-06 15:29:42
4481
9
原创 资料链接
这些文章的干货特别多，所以在这里记录，以防找不到了1、写给前端初中级前端的高级进阶指南（万字路线）2、写给女朋友的终极前端面试秘籍3、50道css基础面试题
2020-12-08 16:37:55
120
原创 HTML篇
一、页面结构语义化为什么需要语义化易修改、易维护无障碍阅读支持搜索引擎友好、利于SEO面向未来的HTML,浏览器在未来可能提供更丰富的支持。结构语义化header： 元素有两种用法，一种是标注内容的标题，第二种的标注网页的页眉。nav： 导航栏，通常仅仅在页面的主要导航部分使用aside : 不仅仅是侧栏，他标识与它周围文本灭有密切关系的内容。当aside用于侧栏时，其标识整个网页的附加内容。通常的广告区域、搜索、分享链接则位于侧栏。侧栏职工的section元素规定了一个区域
2020-12-08 15:33:24
230
原创 vue2.0源码相关知识点
1、vue2.0使用Flow来做静态类型的检查（1）：为什么选择Flow?我们都知道Javascript是动态类型语言，灵活性很强，但是缺点就是很容易写出一些隐蔽的代码，在编译的时候不会报错，但在运行阶段就可能出现各种奇怪的bug。类型检查是当前动态类型语言的发展趋势，所谓类型检查，就是在编译期尽早发现由类型错误引起的bug，又不影响代码运行（不需要动态类型检查），使编写jsvascript具有和编写java等强类型语言相近的体验。项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。
2020-11-26 15:47:38
101
原创 Typescript 中Omit帮助类型的用法
Omit<K,T>类型让我们可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型：K：是对象类型名称，T：是剔除K类型中的属性名称例如：type UserProps = { name?:string; age?:number; sex?:string;}// 但是我不希望有sex这个属性我就可以这么写type NewUserProps = Omit<UserProps,'sex'> // 等价于type NewUserProps = {
2020-10-28 14:34:16
10263
4
原创 Storybook 完美组件开发工具
使用create-react-app 开发的组件的痛点：入口文件不适合管理组件库缺少行为追踪和属性调试功能但是Storybook 可以帮我们解决这些痛点。1、介绍Storybook 官网地址：地址优点：分开展示各个组件不同属性下的状态该工具适用于react、vue、angualar等能追踪组件的行为并且具有属性调试功能可以为组件自动生成文档和属性列表2、安装进去官方文档选择你使用的框架，这边列举react的安装方式 npx sb init在安装过程中，Storyboo
2020-10-27 16:26:51
9509
4
原创 react官方推荐的动画库 react-transition-group
react-transition-group是react官方推荐的一个动画过度库npm install react-transition-group --save 或yarn add react-transition-group 如果项目用ts编写，还要打如下命令npm install @types/react-transition-group --save 或yarn add @types/react-transition-group...
2020-10-27 14:32:08
361
原创 scss中的@each 指令
@each的作用：循环一个list 或者一个map示例一：循环一个list: 类名为 icon-20px 、icon-22px、icon-24px写他们的字体大小写法就可以如下：$sizes:20px,22px,24px;@each $size in $sizes { .icon-#{$size} { font-size:$size }}示例二循环一个map：类名为icon-primary、icon-success、icon-secondary等，但是他们的值又都是变量，写法如下：
2020-10-26 14:50:15
5046
原创 react-fontawesome 字图标库
1、react-fontawesome ：一款非常好用的字图标库官网地址：地址github地址：https://github.com/FortAwesome/react-fontawesome安装npm: npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/react-fontawesome
2020-10-26 13:55:05
1181
原创 react + ts 中想要自定义的类型拥有元素的所有属性和方法
例如我有一个组件，组件的类型自定义为BaseProps，但是我想这个组件也拥有a标签的属性和方法，这样子自定义的组件就可以拥有元素原生的属性跟方法了，例如onclick事件。TS中有&这个将两个类型合并为一个，然后react中有React.AnchorHTMLAttributes 这个方法来获取a标签所有的属性和方法。正确写法如下：type AnchorProps = BaseProps & React.AnchorHTMLAttributes<HTMLElement>那
2020-10-24 19:47:59
3980
原创 React Hook 的简单使用
1、什么是React HookReact 16.8带来了全新的特性，即将代替class组件的写法，使用函数式组件代替class组件
2020-09-08 17:42:52
143
原创 Typescript的基础类型
javascript的数据类型我们都知道， TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。1、Typescript的原始数据类型布尔类型（boolean） let isBool: boolean = false //或者 let isBool: boolean = true // 如果你写成其他类型的值，就会提示报错 let isBool: boolean = 'string'数值（number） let age:num
2020-09-02 18:03:26
547
原创 什么是Typescript
1、什么是Typescript静态类型风格的类型系统从es6到es10 甚至是esnext的语法支持坚持各种浏览器，各种系统，各种服务器，完全开源的软件2、Typescript的优点使得代码更容易理解，因为函数或者方法输入输出的参数类型一看就知道是要传什么参数效率更高：在不同的代码块和定义中进行跳转代码自动补全丰富的接口提示...
2020-09-02 17:18:28
169
原创 redux中间件（redux-thunk、redux-saga）的使用
1、什么是redux的中间件顾名思义中间件就是谁和谁之间，那么redux中间件中的中间指的是谁呢，其实指的就是action和store，那么action和store之间的桥梁是不是dispatch，所以redux的中间件就是对dispatch的一个封装，之前dispatch接收action的是一个对象，但是使用中间件之后还可以是一个函数，如果你使用了中间件，dispatch接收的是一个对象，它就会直接派发给store，但是如果接收到一个函数的话，dispatch就会先将函数处理完，处理好之后再派发给sto
2020-08-27 18:07:09
744
原创 react-redux的简单使用
react-redux是redux 的作者封装了一个 react 专用的库，它能够使你的react组件从redux store中读取数据，并且向store分发action更新数据。react-redux和redux在项目中是配合使用的使用步骤：安装 react-redux1: npm install react-redux --save或2：yarn add react-redux在main.js中引入 react-redux 代码如下import React from 'react
2020-08-27 17:15:13
497
原创 Redux中发送异步请求获取数据
1：发送异步请求是在componentDidMount这个生命周期里执行的，用到的是axios请求接口,创建有一个action，将获取到的接口数据存进去，发送dispatch方法通知store修改里面的数据代码： componentDidMount(){ axios.get('/todolist').then((res)=>{ const data = res.data const action = getInitListAction(data) st
2020-08-26 17:49:59
1655
原创 react中的组件类型
1：UI组件和容器组件容器组件：专门写逻辑的组件，里面没有UI结构，俗称聪明组件UI组件：专门写结构的组件，里面没有逻辑，逻辑都是从容器组件传过来的，俗称傻瓜组件2:无状态组件无状态组件：就是一个函数组件，接收props，没有state，只渲染dom结构，当一个普通组件只有一个render函数的时候，就可以写成一个无状态组件。优点：性能比较高，因为他只是一个函数，普通组件是一个类，里面有好多个生命周期函数，执行的东西要比函数执行的东西多，所以他性能比较高例如下面代码就可以写成一
2020-08-26 16:25:51
605
原创 redux的简单使用
redux是一个状态管理工具，一般在多交互，多数据源的时候使用redux编写程序的时候方便很多，代码结构也更加清晰。以下是广为流传的redux工作流程图以上的流程我个人理解是：组件需要做某件事，将这件事告诉action，通过store.dispatch(action)传给store，store知道这件事之后，就将当前的数据和传过来的action一并传给reducers，reducers接收到这两个参数，通过action知道要对state做什么事情，处理好之后，将最新的state转给store,然后组
2020-08-26 15:15:11
263
原创 vue中使用UEditor富文本编辑器
常见的富文本编辑器首先我们来看一下当下比较流行的富文本编辑器有哪些？tinymce ：是一家老牌做富文本的公司(这里也推荐 ckeditor，也是一家一直做富文本的公司，新版本很不错)，它的产品经受了市场的认可，不管是文档还是配置的自由度都很好。...
2020-08-25 17:04:56
1974
1
原创 react的生命周期
生命周期函数指在某一刻组件会自动调用执行的函数。一：初始化阶段1、constructor:数据初始化，可以说是生命周期函数，也可以不是，因为constructor函数在组件一创建的时候会被自动调用，但是这个方法又是ES6语法中带有的函数，所以一般不归在生命周期函数里面。二：挂载阶段1、componentWillMount:在组件即将被挂载到页面的时刻调用2、render：根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render） ，return 一个
2020-08-20 09:43:28
73
原创 react-零碎知识点
1、state、props、render函数之间的关系当组件的state或props的值发生改变的时候，render函数就会重新执行；当父组件的render函数被重新运行时，它的子组件的render函数都将被重新运行2、虚拟DOM虚拟DOM本质上就是一个js对象，用它来描述一个真实dom，当state数据发生变化的时候，会生成一个新的虚拟DOM,然后旧的虚拟DOM跟新的虚拟DOM进行对比，找到变化的部分，最后直接替换变化的部分即可：流程：3、diff算法（1）同层对比，如果第一层就不一样，下
2020-08-17 17:31:37
96
原创 父子组件之间的传值-react
1：父组件的值传给子组件例如：下面是一个todolist的功能，能很好的说明父组件传给子组件，子组件如何调用，效果图如下：代码如下：父组件：import React,{Component,Fragment} from 'react'import ToDoItem from './ToDoItem'// Fragment是占位符class ToDoList extends Component{ constructor(props){ super(props) this.st
2020-08-14 17:00:08
78
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人