- 博客(57)
- 收藏
- 关注
RSS订阅
原创 React v16.x 之深入理解组件生命周期
react v16.x更新了组件生命周期，将componentWillReceiveProps、componentWillMount、componentWillUpdate这三个钩子函数丢弃了，然后增加了getDerivedStateFromProps、getSnapshotBeforeUpdate。废弃原因
2021-02-01 17:09:41
227
原创 React v16.x 之深入理解Fiber
众所周知，react16版本更新后，将原来的Stack Reconciler架构重写成了Fiber Reconciler架构，从而解决了React15遗留下来的整体渲染掉帧、响应延迟缓慢的问题。这里有个优化前后的例子：[react-fiber-vs-stack-demo]...
2021-01-27 16:26:18
410
2
原创 react常见错误解决
最近在做react项目的时候遇到了几个报错，这几个报错在react项目还算常见，因此记录下来解决方法。’type’ is missing in props validation报错：type缺少props验证解决：1.查看下propTypes是否写成大写了，因为我们引入的时候是大写的，所以很多小伙伴可能直接复制过来就成大写了，也会报错哦2.新增type: PropTypes.numbe...
2019-06-18 19:28:49
23451
1
原创 从对象数组中筛选符合条件的值
const arr = [1,2,3,4,5,6,7]const list = [ {openId: 1, timelineId: 1, showNo: 1, uid: 1}, {openId: 2, timelineId: 1, showNo: 1, uid: 1}, {openId: 9, timelineId: 1, showNo: 1, uid: 1}, {openId: 4, ...
2019-05-28 10:46:22
22959
原创 vue常见错误解决
Error in render: “TypeError: Cannot read property ‘list’ of undefined”[Vue warn]: Property or method “message” is not defined on the instance but referenced during render. Make sure that this proper...
2018-06-10 10:28:40
83712
16
原创 保姆级VuePress + Github Pages搭建博客
一直都是使用CSDN写一些博文，最近突发奇想想试用下免费的Github Pages搭建一下博客，跟上大家的脚步👣，VuePress官网文档写得还算是挺全面的，但是我在进行部署的时候踩了不少坑，记录下来方便大家上手，减少踩坑。...
2022-06-11 21:48:04
1461
原创 React之事件机制源码解析
定义事件委托机制：并不是将Click事件绑定在DOM上，而是采用事件冒泡的形式冒泡到document上，然后将React事件内容封装并交真正的函数处理合成事件SyntheticEvent：冒泡到document上的事件也不是原生的浏览器事件，而是由react实现的合成事件SyntheticEvent。⚠️如果不想要事件冒泡的话应该调用event.preventDefault()方法，而不是event.stopProppagation(),event.stopProppagation()只
2021-12-26 17:27:53
845
原创 通过链表学习原型链，深入理解各种判断数据类型方法
概念由多个元素组成的列表元素存储不连续，用next指针将其连在一起。JavaScript中没有链表这个数据结构，但可以用object去模拟链表在前端常用于原型和原型链中数组vs链表数组：一块连续的内存，增删非首尾元素时往往需要移动元素，时间复杂度O(n)链表：不是连续内存，增删非首尾元素，不需要移动元素，只需要更改 next 的指向即可。时间复杂度O(1)Object实现链表代码创建链表const a = {val: 'a'}const
2021-12-22 17:29:44
776
原创 保姆级构建React+TypeScript+Webpack5项目
构建项目初始化项目mkdir react-templeatecd react-templeate npm init安装Webpacknpm i webpack webpack-cli [email protected]@5.64.1配置Webpack新建webpack相关文件 |-- react-templeate | |-- package-lock.json | |-- package.json |
2021-12-22 17:28:24
1162
原创 git操作之一台mac电脑绑定两个git账号，用于工作和学习区分
1、查看已有密钥$ cd ~/.ssh$ ls可以看到有id_rsa.pub和id_rsa这1对密钥了2、生成新的密钥ssh-keygen -t rsa -f ~/.ssh/id_rsa_2 -C "[email protected]"
2021-11-10 17:26:09
1273
原创 react实现聊天室历史消息及滚动条随着消息滑动功能
MessageBox.jsimport React, { useRef, useEffect, memo } from 'react'import PropTypes from 'prop-types'import { Spin } from 'antd'import { isEmpty } from 'lodash'import * as api from '../../api'import MessageItemBox from './MessageItemBox'import '../
2021-01-25 11:46:24
2025
3
原创 Ant Design Table组件行合并及表格头下拉筛选
最近在项目中实现了一个Table 相同数据行合并及表格头下拉筛选的需求，这类需求平时在项目中比较少遇到，操作的方法也比较麻烦，因此记录下来方便以后遇到有迹可循。实现效果合并相同行数据对dataSource数据进行处理，判断列scene字段是否有行数据相同，进行提取并添加新字段rowSpan，记录合并的行数// 合并数组单元格 createNewArr=data => {...
2020-03-29 19:01:56
3866
1
原创 ECharts在React+Antd用法及常见错误
最近项目中开始使用Echart做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。最终效果1、实现点击折线图上的点联动两个饼图数据2、处理Echart饼图数据为0或者是空时饼图消失问题如何在react中使用echart1、在render中添加div<div id='echartLine' style={{ width: '10...
2020-03-29 17:34:55
2307
1
原创 csdn代码不高亮问题解决
写博客的时候发现csdn的代码无法高亮了，看得贼累，很难受，去查了下这个问题，也去论坛问了客服，最后发现只需要添加下编码的语言就可以了。大部分人添加代码是这样：添加了编码语言后，注意：需要用小写博客文章：...
2019-06-10 14:39:23
498
原创 React之Ant Design基本框架搭建
import React from 'react'import { HashRouter as Router, Route } from 'react-router-dom'import { Layout } from 'antd'import PropTypes from 'prop-types'import Sider from '../components/Sider'import...
2019-06-10 14:08:45
1648
原创 Vue之keep-alive
使用场景：动态组件切换，当你选择了一篇文章，切换到 b 标签，然后再切换回 a，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例；当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会...
2019-05-12 16:05:44
896
原创 css 内联元素、块级元素、内联块级元素
对于display我想很多人都不陌生，然而在谈到内联元素，行内元素等词，还是会有人脑袋瓜子充满了疑问？？？我曾经自以为已经了解并懂得如何使用display，在学习vertical-align及替换元素等的时候，才深刻明白自己也就一知半解，接下来不说display各种参数的使用方法，而是谈谈display形成的各种盒模型display指定了元素的显示类型，包含两种用于指定元素怎样生成盒模型 ...
2019-04-04 22:47:35
935
原创 css line-box行框及替换元素
行框1.line-height:设置行间的距离（行高）=> 该属性会影响行框的布局。在应用到一个块级元素时，她定义了该元素中基线的最小距离而不是最大距离2.line-height与font-size的计算值之差（行间距）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框行间距：css没有直接设置行间距的方式，通过设置行高来间接设置行间距替换元素1....
2019-04-02 19:07:50
1212
原创 Vue之响应式原理
Vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Obeject.defineProperty()来劫持各个属性的setter、getter。在数据变动时给订阅者发送消息，触发响应的监听回调Object.defineProperty通过此函数实现双向绑定，直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。语法：Object.defineProp...
2018-11-20 23:07:00
260
原创 css实现居中
最近总是懒懒散散，每天工作忙成狗，没有时间进行总结和学习然后焦虑不安，趁着没有加班的时间将直接学习的css实现居中总结下。一直以来都懂得如何运用，但更多的是不清楚在什么情况下运用哪种，都是能够实现便完成任务了，有时候代码就变得累赘而且bug众多。...
2018-09-17 21:49:55
319
原创 使用Vue开发留言列表
Error in render: “TypeError: Cannot read property ‘list’ of undefined”Property or method “message” is not defined
2018-06-10 11:31:42
4118
5
原创 解决浏览器缓存
一直以来都习惯在URL地址跳转末尾加上时间戳，没有去思考过原因是什么，为解决后台小伙伴的疑问，去查了下才意识到这就是解决浏览器缓存的方法 作用：URL的末尾追加了时间。这就确保了请求不会在它第一次被发送后即缓存，而是会在此方法每次被调用后重新创建和重发；此URL会由于时间戳的不同而稍微有些不同。这种技巧常被用于确保到脚本的 POST每次都会实际生成新请求且 Web服务器不会尝试缓存来自服务...
2018-05-14 19:45:00
463
原创 获取明天的时间戳
最近刚做了一个H5的项目，项目需求是希望预约时间最晚为明天18点前，通过写了个简单的验证方法来执行。 var time = $("#time").val();//选择框内的值 var tomorrowd=new Date();//当前时间 var hourTime = new Date(time.replace(/\-/g, "\/"));//替换"-"为"/"的当前...
2018-05-14 19:26:58
4745
原创 ajax封装
最近做了个H5小项目，再次用到了ajax，因此将封装函数进行分享$(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据，数组存储，如：{"date": new Date().getTime(), "state": 1} * dataType 预期服务器返回的数据类型，常用的如：xml、h...
2018-05-14 10:55:45
844
原创 使用Vue开发数字输入框组件
最近在通过《Vue.js实战》系统学习Vue，虽然在项目中已多次使用Vue进行开发，但是对于一些非常基础性的知识点还不是很了解，因此这次通过结合数字输入框组件实战来谈谈简单的组件开发。 源代码:https://github.com/zndada/learnVue项目整体结构├── src 项目代码│ ├── common 公共js库│ │ ├── number.js 判断是...
2018-04-16 20:37:30
2043
原创 git操作
对于git的使用，我想廖雪峰老师的git教程已经写得很详细了，我这边主要是记录下几个初学者经常碰到的问题。1.创建版本库需要在空目录下执行，所以建议是新建一个文件夹进行存储使用windows系统的话，最好是整个目录不出现中文（所谓的整个目录指的是C:\Users\XXX>D:\project 这一长串都不要有）使用git init命令就创建好了版本库2.添加远程库...
2018-04-16 01:13:18
111
原创 Generator函数
1.是一个状态机，封装多个内部状态；2.执行Generator函数会返回一个遍历器对象，返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态3.Generator函数特征：①function关键字与函数名之间有一个星号；②函数体内部使用yield表达式，定义不同的内部状态4.调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。每次调用遍历器对
2018-01-10 22:06:00
190
原创 Promise
1. pending-进行中、resolved-已完成、rejected-已失败2. 注意：实例化的Promise对象会立即执行Promise.resolve() / Promise.reject()用来包装一个现有对象，将其转变为Promise对象，但Promise.resolve()会根据参数情况返回不同的Promise：参数是Promise：原样返回参数带有then方法：转换为Prom
2018-01-10 22:04:21
242
原创 ECMAScript6
最近公司用VUE做项目，使用的ECMAScript是ES6版本，相对于ES5来说，ES6还是有很多不一样的特性，通过对官网ES6的学习来进行一些对比归纳。let命令1、声明变量，类似于var。所声明的变量，只在let命令所在的代码块内有效 2、所声明的变量一定要在声明后使用，否则报错 4、如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明
2017-09-26 18:03:00
373
原创 CSS之动画
最近在学习饿了么vue的demo，接触到了挺多css3动画，之前有学习过，但更多是需要了就拿出来看看，直接上手用，今天来对三种动画属性进行系统学习。 css3动画主要包括Transform、Transition、Animation。区别transition：允许css的属性值在一定的时间区间内平滑地过渡。需要触发一个事件（hover事件或者click事件）才会随时间改变其css属性。anim
2017-09-15 10:19:40
1222
原创 Vue之render函数
render方法的实质就是生成template模板； 通过调用一个方法来生成，而这个方法是通过render方法的参数传递给他的； 通过这三个参数，可以生成一个完整的模板官网实例//未使用render函数Vue.component('anchored-heading', { template: '#anchored-heading-template', props: {
2017-08-09 15:56:59
2466
原创 Vue之实例详解
Vue的实例是Vue框架的入口，包含了页面中的业务逻辑处理、数据模型等new Vue({ el: '#app', data () { return { swiperOption: { autoplay: 3000, initialSlide: 1, loop: true, paginationClickab
2017-07-27 11:50:47
812
原创 Vue之生命周期
Vue实例从创建到销毁的过程。 开始创建→初始化数据（配置数据观测data observer）→编译模板→挂载DOM、渲染→更新→渲染、卸载Vue可注册钩子hook hook：事件劫持机制，会比事件更早进行执行处理。可理解为vue的内置事件，但可自己配置let app=new Vue({ el:"#app", data:{ name:'我是名称',
2017-07-26 16:29:48
330
原创 Vue之插件使用
插件通常会为vue添加全局功能MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, bin
2017-07-26 11:17:05
926
原创 Vue之slot内容分发
Slot内容分发，使用特殊的<slot>元素作为原始内容的插槽，假设父组件需要在子组件内让一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。单个slot：可以将父组件放在子组件的内容，放到想让他显示的地方；父组件放在子组件的内容插到了子组件的<slot></slot> 位置具名slot：将放在子组件里的不同html标签放在不同的位置，父组件在要分发的
2017-07-26 11:13:06
485
原创 vue之v-model
v-model在表单控件或者组件上创建双向绑定，使vue实例中data与其渲染的DOM元素的内容保持一致，无论哪一方被改变，另一方相应更新限制： <input>/<select>/<textarea>/components相当于： <input v-bind:value="something" v-on:input="something = $event.target.value">组
2017-07-25 16:04:36
333
原创 Vue之todoList
目前公司做H5项目主要使用vue框架，便在这一周开始学习vue，之前用node做毕设，因此在接触vue的时候挺有熟悉感，基本上是路由-视图-模板框架模式。本文主要是讲解一下todolist这个例子，相对来说比较简单。 TodoList.vue：视图组件，进行增删操作 index.js：路由，在这个demo中较为简单，只有一个主页默认路由 App.vue：主组件，有点像是iframe，所有页面
2017-07-24 09:55:54
313
转载 javascript之原型
原型 每个函数都有一个prototype属性，它是一个对象，也称作原型对象，可以将方法和属性写在它上面，而通过这个函数创建出来的实例对象，都能共享这个原型对象下的方法和属性。只需要将想要共享的东西放在该函数的prototype下，不想共享的东西通过构造函数创建 function CretePerson(name){ this.name=name; }
2017-05-11 17:42:18
400
原创 javascript之面向对象、构造函数
javascript的面向对象、构造函数、原型与原型链 在微信公众号“前端大全”中看到了波同学的讲解面向对象、构造函数、原型与原型链等内容，之前对于这几个知识点有去理解与使用过，但大多是处于似懂非懂的阶段，会用而已。今天凑巧看到了波同学的讲解，就此记录。对象的定义 无序属性的集合，其属性可以包含基本值，对象或者函数。在javascript中由一些列无序的key-value对组成 /
2017-05-09 16:09:16
225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人