树上骑个猴的博客

原创 el-table实现合并多个相同值的列

效果图<template>: <el-table ref="testTable" :data="ContentTableData" height="300px" border :span-method="objectSpanMethod" > <el-table-column label="选择" width="50px"

原创 React 初学 - 生命周期组件挂载流程 - 个人笔记33

新增2个钩子，删除了3个旧的生命周期：需求，实现一个点击按钮+1的功能：实现的代码：看看会不会走这几个生命周期：

原创 React 初学 - 引出react生命周期 - 个人笔记32

实现一个组件，需求如下：第一步，实现点击按钮卸载组件因为render调用次数是n+1，每次更新都会重新渲染，所以定时器不适合写在render里面render有个兄弟事件，在组件挂载到实例完成时调用，且只调用一次一个新的错误，组件卸载之后还有数据在更新状态第三步，点击按钮进行定时器清除，防止还在更新组件状态第四步，在react组件将要卸载的时候自动帮忙卸载定时器。生命周期就是在一些关键时间点去做有些事，react生命周期就是在一些关键时间去调用一些特殊函数。react生命周期

原创 React 初学 - 不用柯里化的写法 - 个人笔记31

非柯里化写法：精简写法（一个参数不用写括号，一行代码不用写花括号）：

原创 React 初学 - 高阶组件 - 个人笔记30

onchange调用的等号右边的回调。也就是return xxx 。所以会自动传event参数进去有个记忆法：只要能给onChange绑定函数继续函数柯里化：所以这种也是函数柯里化：

原创 React 初学 - 受控组件 - 个人笔记29

总结：受控组件类似vue里的双向数据绑定。随着输入，直接控制状态。叫受控组件。推荐平时多写受控组件，因为官方也是说尽量少用ref：

原创 React 初学 - 非受控组件 - 个人笔记28

理由ref获得表单里面的值记得加上preventDefault不然表单会跳转现用现取的就是非受控组件

原创 React 初学 - 总结ref - 个人笔记27

事件委托的原理：事件冒泡。 利用冒泡的原理，把事件加到父级上，触发执行效果。通过event.target来获取具体被点击的元素。好处：1、提高性能在平时开发时，尽量少用ref比如这个输入框就不必要用到ref。因为触发对象和调用对象都是本身：总结：...

原创 React 初学 - 回调ref中调用次数的问题 - 个人笔记26

复习一下回调形式ref的用法查看被调用了几次官方文档说，以内联方式定义的回调形式的ref在更新的会被调用两次这样子是内联函数的写法render的调用次数：（n代表调用的次数，1是第一次加载的时候）实验一下：通过点击按钮，来切换页面变量值，实现更新ref标签。发现：内联形式定义的回调函数ref确实被执行了两次调用两次的原因：第一次是清空解决方案：解决方案的实践：JSX的注释方法：这么写，就不会调用2次了，只会调用一次了：总结：平时开发就用内联的写法，无

原创 React 初学 - createRef的使用 - 个人笔记27

官方回调形式的ref的写法：createRef的使用方法：获取控件的值：注意：createRef是专人专用的，如果给多个标签写，容器里只会保留最后一个标签。多个标签如果想用createRef，可以这么写：...

原创 React 初学 - 回调形式的refs - 个人笔记25

react官方不推荐 ：字符串形式的ref写法。因为：效率不高推荐的写法：回调函数的定义：1.你定义的2.你没直接调用3.他被别的函数调用执行了写法解释：回调的dom对象赋值给当前实例对象的.input1属性回调形式的refs使用方法：...

原创 React 初学 - 字符串形式的refs - 个人笔记24

组件内的标签可以定义ref来标识自己箭头函数中的this，指向实例对象会发现类中有个refs属性给类中某个dom添加ref，就可以在类中refs属性中看到如果给多个标签添加ref属性注意：this.refs拿到的是真实Dom同样，使用onBlur来触发函数：...

原创 React 初学 - props的总结 - 个人笔记23

this.props可以拿到全部的标签属性对标签属性进行限制，限制的写法就是给自身类设置“propTypes”和“defaultProps”属性注意点：大小写要区分好，如果写错了，限制就不起作用了。类的限制属性，可以简写函数式组件无法使用refs和state（最新版的hook可以使用）。但可以使用props。但如果给属性标签做限制，就无法用简写的方法了，并且限制属性只能定义在类的外面了总结：react15以后，对属性类型做限制的库被抽离出来了：于是对标签属性进行限制的写法，改变了

原创 React 初学 - props的简写方式 - 个人笔记20

props是只读的，如果想在类里直接改props的方式是不行的如何改类自身的属性？ 抛砖引玉，普通的类通过statc可以给类自身加属性给react类自身加属性，最初的写法优化后的简写：

原创 React 初学 - 函数式组件使用props - 个人笔记22

类式组件的this指向实例对象，所以可以使用this获取state和props函数式组件的this没有指向实例对象，所以无法使用state和refs。但是函数能够使用props属性，因为函数能接收参数函数式组件传统写法：如果打印this会发现是undefined可以直接接收到props打印函数式组件的参数校验写法：总结：函数式组件可以使用props...

原创 React 初学 - 类式组件中的构造器和props - 个人笔记21

render是类式中必要的构造器的作用：注意：为什么写构造器，必调super()？打印实例自身props如果构造器不写props就获取不到实例的props总结：类中构造器可以省略如果希望获得实例的props就要写构造器，如果写构造器，就要传props，不然获取不到this.props如果接了props但又没传给pros，会导致接了没啥用，主要是要给super传过去：总结：...

原创 React 初学 - 对props进行限制(校验和设置默认值) - 个人笔记19

props如何传递一个number类型的值呢？而要这么写：但是这么写，如果别人用你的组件，容易犯错最好的方法是对标签属性类型进行校验：react中专门对标签属性进行限制的库：使用：总结：...

原创 React 初学 - 批量传递props - 个人笔记18

如果很多个props属性，就会很繁琐：1.可以使用展开运算符，但是需要key值一模一样。且对象要用花括号包裹展开运算符介绍：展开运算符不能直接运用到对象上用花括号包裹， 就是ES6的语法，可以实现深拷贝一份对象了react中可以不用花括号，是因为react+babel（否则要写成<Person {{…p}},document.getElementById(‘test3’)>）：在react中，虽然有babel.js和react.development.js，但是只能用

原创 React 初学 - props的基本使用 - 个人笔记17

没有props属性的时候：此时应该要使用props:传多个Props属性：案例2写了三次组件标签，就会创建三次实例，就会调用三次render，都输出一次thisprops使用的简写：

原创 React 初学 - state的总结 - 个人笔记16

原创 React 初学 - state的简写 - 个人笔记15

抛砖引玉：类中直接写赋值语句state也可以写出来但是方法不能这样直接赋值而应该用箭头函数箭头函数没有自己的this，他会往上找，在本例中是去找类实例的this验证：总结：属性直接写，方法用箭头函数...

原创 React 初学 - setState的使用 - 个人笔记14

不能直接修改state的值，要通过react原型：举一反三：setState是一种合并react类的构造函数只执行一次eact类的render函数执行 1+n次因为setState是固定的函数名称，所以react类的属性state名称是固定的。所以setState才叫react组件三大核心属性之一state的简写方式...

原创 React 初学 - 类中方法中的this指向 - 个人笔记13

方法一，this可以通过缓存保存一份，从而拿到类的实例对象抛砖引玉：下面拿不到：原因：因为不是通过实例调用，所以此时的this已经不是指向实例了。所以this是undefined。所以变成undefined.study指向全局的this，在严格模式下是undefined，而不是指向windows通过实例调用的时候，this才是指向实例原因：解决方案：...

转载 js数组去重、获取重复数据以及获取非重复数据

数组去重let arr = [11, 23, 26, 23, 11, 9]const deduplication = arr => [...new Set(arr)]console.log(deduplication(arr)); // [ 11, 23, 26, 9 ]保留数组中非重复数据let arr = [11, 23, 26, 23, 11, 9]const filterNonUnique = arr => arr.filter(i => arr.indexOf(

原创 React 初学 - react事件绑定 - 个人笔记12

一些命名，react与原生不同：

原创 React 初学 - props属性 - 个人笔记11

在 React 中，你可以将属性传递给子组件。假设你有一个App组件，该组件渲染了一个名为Welcome的子组件，它是一个无状态函数组件。你可以通过以下方式给Welcome传递一个user属性：<App> <Welcome user='Mark' /></App>使用自定义 HTML 属性，React 支持将属性user传递给组件Welcome。由于Welcome是一个无状态函数组件，它可以像这样访问该值：const Welcome = (props) =&

转载 反向代理和正向代理 - nginx系列1

反向代理，与之对应的就是正向代理，这两者的区别也是面试中经常被问到的。我们先来看一下什么是正向代理，一个正向代理最典型的例子就是我们常用的“工具”。我们直接访问Twitter，是访问不到的，但是如果我们使用了代理服务器，那么通过访问代理服务器就可以浏览Twitter，这里的代理服务器就属于正向代理；通过正向代理我们可以访问原来无法访问的资源。那么什么是反向代理呢？反向代理最典型的例子就是我们的Nginx服务器了；比如我们在访问某个网站时，由代理服务器去目标服务器获取数据后返回给客户端，这样就能够隐藏真实

原创 React 初学 - 初始化state - 个人笔记10

创建一个有状态的组件class StatefulComponent extends React.Component { constructor(props) { super(props); // initialize state here this.state = { name:'xxx' } } render() { return ( <div> <h1>{this.state.n...

原创 React 初学 - 对state的理解 - 个人笔记9

原创 React 初学 - 类式组件 - 个人笔记8

函数式组件：注意：因为babel会开始严格模式，所以函数中的this不再指向window了类式组件：将MyComponent类式组件渲染到真实Dom上

转载 Apache Bench的安装与使用（前端使用apache-bench进行并发测试）

Apache Bench安装与使用一、Apache Bench简介ApacheBench 是 Apache 服务器自带的一个web压力测试工具，简称ab。ab又是一个命令行工具，对发起负载的本机要求很低，根据ab命令可以创建很多的并发访问线程，模拟多个访问者同时对某一URL地址进行访问，因此可以用来测试目标服务器的负载压力。总的来说ab工具小巧简单，上手学习较快，可以提供需要的基本性能指标，但是没有图形化结果，不能监控。二、Apache Bench安装首先需要安装Apache服务器，下载地址：htt

原创 React 初学 - 类相关知识 - 个人笔记7

完整代码：<script>class Person { constructor(name,age){ this.name = name this.age = age } speak(){ console.log(`我叫${this.name},我的年龄是:${this.age}`) }}class Student extends Person { constructor(name,age,grade){ super(name,age) thi...

转载 Vue修饰符 - 备忘录

sync当父组件传值进子组件，子组件想要改变这个值时，可以这么做父组件里<children :foo="bar" @update:foo="val => bar = val"></children>子组件里this.$emit('update:foo', newValue)sync修饰符的作用就是，可以简写：父组件里<children :foo.sync="bar"></children>子组件里this.$emit('upd

原创 React 初学 - 函数式组件 - 个人笔记6

组件首字母要大写，标签要闭合。

原创 React 初学 - 组件与模块 - 个人笔记5

原创 React 初学 - jsx语法规则2 - 个人笔记4

给{ } 一个数组 ，react可以帮忙遍历。比如 let arr = [1,2,3] 然后 <div>{arr}</div>

原创 el-pagination 后端接口分页页数从0开始

<el-pagination background layout="total, prev, pager, next" :current-page="searchForm.page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="searchForm.size" :total="total" @size-change="handleSizeC.

转载 Object.assign + el-form 出现编辑时无法回显的问题，且validate无法触发的问题

场景编辑的时候发现个别字段回显失败，使用@change="$forceUpdate()"来强制回显，但是又出现了新问题，编辑时给el-select选定了值，但是validate提示未选择。validate新增时却是正常的。于是发现是Object.assign的问题。后台返回数据为row，通过Object.assign进行拷贝this.ruleForm = Object.assign({},row) //this.ruleForm为表单数据，row为后台返回的数据信息原因通过Object.a

原创 React 初学 - jsx语法规则 - 个人笔记3

JSX 的一个关键区别是你不能再使用 class 这个单词来做为 HTML 的 class 名。 这是因为 class 是 JavaScript 中的关键字。 而 JSX 使用 className 来代替。例如你可以这样写：const JSX = ( <div className="myDiv"> <h1>Add a class to this div</h1> </div>)...

原创 React 初学 - 虚拟Dom和真实Dom - 个人笔记3

真实Dom:虚拟Dom: