- 博客(86)
- 收藏
- 关注
RSS订阅原创 React源码解读02，页面更新与批处理
页面更新与批处理何为更新那类组件来说，我们可以取出当前组件的虚拟dom，让该虚拟dom跟旧的虚拟dom进行比对，替换掉不同的地方。然后渲染到界面上去。从而完成更新。我们在类组件中，操作state是通过setState()来操作的，该方法是Component类的方法，该方法修改实例中state的属性，又调用更新的方法。那我们可以简单地编写出如下代码class Component { static isReactComponent = true constructor(props)
2020-12-28 21:26:02
293
原创 React源码解读01，页面初次渲染
1. 页面初次渲染JSX语法的转换先看看我们使用React打印HelloWorldReactDOM.render(( <h1 style="color:red">Hello World</h1>),document.getElementById('root'));使用React.createElement包裹ReactDOM.render(( React.createElement("h1",{style:"color:red"},"Hello Wo
2020-12-28 16:18:49
374
原创 Vue3+TS+Ant Design按需加载
Vue3+TS+Ant Design按需加载安装 cnpm i --save ant-design-vue@next cnpm install babel-plugin-import --save-dev编写Ant配置文件import { Button, Input, Steps, Form, Select, Row, Radio, DatePicker, Col, Icon, Checkbox, Switch } from 'ant-design-vue'const ant
2020-12-17 20:20:31
2023
6
原创 浏览器渲染原理以及性能优化
进程与线程当我们打开一个网页的时候，就创建了一个进程一个进程可以同时干多件事，这就是多线程Request请求阶段DNS解析TCP协议的三次握手和四次挥手拓展：HTTPS与HTTO的区别（HTTP2）Response响应阶段获得 HTTP状态码，304缓存(性能优化)，HTTP报文开辟栈内存当浏览器拿到代码后，浏览器在内存条中开辟出一块栈内存，用来给代码的执行提供环境，同时分配一个主线程去一行行的解析和执行代码这就解释了为什么JS是单线程的，因为浏览器只会分配一个线程去解析与
2020-07-03 21:42:10
289
原创 安卓开发学习笔记03_Button
安卓开发学习笔记03_Button特别声明文字大小，颜色自定义背景形状自定义按压效果点击事件第一种方式第二种方法特别声明该笔记是笔者通过学习 天哥在奔跑安卓教学视频 时所编写的文字大小，颜色通过对 Button 控件设置其 android:textSize 与 android:textColor 便可以实现<Button android:id="@+id/btn_1" android:layout_width="match_parent" android:lay
2020-05-30 17:23:06
203
原创 安卓开发学习笔记02_TextView
安卓开发学习笔记02_TextView特别声明文字大小，颜色显示不下使用文字+icon中划线，下划线跑马灯文本框控件, 以下为常用的几个场景特别声明该笔记是笔者通过学习 天哥在奔跑安卓教学视频 时所编写的文字大小，颜色<TextView android:id="@+id/tv_1" android:layout_width="wrap_content" android:layout_height="wrap_content" a
2020-05-30 16:55:19
235
原创 安卓开发学习笔记01_布局
安卓开发学习笔记目录结构布局管理器线性布局(LinearLayout)例子相对布局(RelativeLayout)例子TextView特别声明目录结构我还没学完，所以先挖个坑，以后填布局管理器学习布局，建议先查阅 (盒子模型) 这样能更好地理解与掌控该知识点,以下例子均可直接复制到 activity_main.xml 下，可以直观看到效果线性布局(LinearLayout)常用属性android:id给该控件设置一个唯一标识android:layout_widthandroid:l
2020-05-30 11:40:52
835
原创 React学习08_组件间的传值与this的绑定
React学习08_组件间的传值与this的绑定父子传值子向父传值bind(this,...args)兄弟间传值父子传值父组件在使用子组件时，给它的属性传入想给它的数据子组件通过 this.props.属性名 可以获取该数据子向父传值父组件向子组件传入一个带参数的方法子组件通过向这个方法传入自己的数据，在父组件触发该方法，父组件通过 this.setState 来修改父组件的值并渲染从而实现子向父传值bind(this,…args)该方法主要是把当前实例绑定到方法目标方法中如下面的
2020-05-24 17:12:42
161
原创 React学习06_事件处理_条件渲染_状态提升
React学习06_事件处理修改this指向条件渲染状态提升修改this指向bind 方式绑定函数通过箭头函数进行创建constructor提前绑定把事件的调用写成箭头函数的调用方式<div id="reactDom"></div><script type="text/babel"> class Com extends React.Component { constructor(props){ super(
2020-05-20 22:50:18
141
原创 React学习05_ref
React学习day05_ref转发refs react当中提供了一个ref的数据，表示当前组件的真正实例的引用(不能在无状态组件当中来进行使用 因为无状态组件没有实例)有三种方式 进行 ref的使用字符串的方式回调函数,就是在dom节点上挂载函数，入参形参React.createRef()官方建议我们 不要过度使用 refs 需要优先考虑state当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。当给组件添加 ref 属性时，ref 回调接
2020-05-20 22:28:13
137
原创 React学习04_props与state
React学习day05_props与statestatesetStatepropsprops验证props 是组件对外的接口组件内可以引用其他组件 组件之间的引用就形成了一个树状的接口，如果下层组件需要使用上层组件的数据上层组件就可以通过下层组件中 props 来进行数据的传递，因此props就是组件对外的接口state是组件对内的接口除了使用上层组件传递的数据之外，他自身也可能有需要管理的数据 这个就是 state当数据改变时，状态就会改变声明渲染 – 数据改变 操作都不用我
2020-05-20 22:14:46
106
原创 React学习03_组件与props
无状态组件基本使用function MyCom() { return ( <div>我是一个无状态组件</div> )}// 调用组件let com = ( <div> <MyCom /> </div>)ReactDOM.render(com, document.getElementById("reactDom"))父子嵌套function MyComA() {
2020-05-19 21:26:15
127
原创 React学习02_jsx基本用法
React学习day02_jsx基本用法模板使用表达式函数调用属性绑定类名绑定数组遍历事件绑定遍历对象模板<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
2020-05-19 20:56:36
141
原创 React学习01_开发环境搭建
环境搭建react.js核心文件react-dom.js渲染页面中的DOM，当前文件依赖于react核心文件babel.jsES6 转换成 ES5 将 JSX语法转换为JavaScript，方便浏览器进行代码的兼容下载react核心包 npm i react --savereact-dom npm i react-dom --savebabel npm i babel-standalone --save...
2020-05-19 20:18:56
130
原创 vue源码系列08_computed属性
vue源码系列07_computed属性state.jswatcherstate.js给state添加 initComputed 方法工作流程:计算属性是有缓存的，我们要创建两个变量存数据遍历computed的值，创建带{dirty:true}的watcher，并保存到watchers对象中当用户取值的时候，获取当前watcher运行evalValue()进行运算编写watcher用dirty保存值是否改变，判断其是否需要重新计算取出watcher中的dep，触发depend()添加渲染的
2020-05-17 11:39:32
170
原创 vue源码系列07_watch属性
watch方法state.js$watch修改watcherinitWatch()state.js在该方法中，保存了vue实例初始的5种属性，我们找到watch属性的位置，编写其方法即可import { observe } from './observer/index.js'import Watcher from './watcher.js';import Dep from './observer/dep.js';export function initState(vm) { const
2020-05-17 11:10:14
154
原创 vue源码系列06_实现数组的依赖收集
vue源码系列06_实现数组的依赖收集observer.js总结observer.js在初始化数据的时候，创建一个数组专用的dep给每个对象添加一个 ob 属性，主要是用于保存当前实例对象(this)在 array.js 中在数据改变时，触发数组专用dep的notify()派发更新修改 defineReactive 方法export function defineReactive(data, key, value) { let childOb = observe(value) //
2020-05-17 10:55:29
460
原创 vue源码系列05_发布订阅模式
vue源码系列05_依赖收集dep.jswatcher.jsdefineReactive()所谓依赖收集，就是在每个数据渲染更新的时候，给每个数据添加一个watcher监听类，当该数据发生变化时，用一个dep队列来实现收集这些watcher，最后统一渲染，以下为依赖收集的流程dep.js主要的操作:给不同的dep赋一个id创建sub数组(实际上是队列)创建stack栈，创建保存watcher与取出watcher的方法，并且让 Dep.target 得到当前 watcher (后面有用到)主
2020-05-16 22:19:45
238
原创 vue源码系列03_数组劫持
vue源码系列03_数组劫持重写方法array.js重写方法由于是数组的话并不会对索引进行观测，因为会导致性能问题，因为前段开发中很少去操作索引 咱用的更多是 push shift unshitf我们在Observer类开头使用 observerArray() 来对数组中的每一个数据进行监控所以我们可以采用给数组方法上添加一个代理(也就是我们在执行原本数组的方法之前，我们预先进行一些操作)if (Array.isArray(value)){ value.__proto__ = arra
2020-05-16 10:35:27
264
1
原创 vue源码系列02_数据监控与劫持
Vue实例在src目录下创建一个index.js该模块主要放的就是vue实例(核心代码放置的位置)// vue 核心代码 只是Vue的一个声明function Vue(options){ }export default Vue当我们需要进行初始化，渲染，监控等流程的时候，再向其中导入对应的方法。由此可见，该模块是用于整合其他方法初始化操作因为我们在页面刚加载的时候，需要对页面等操作进行渲染，如 data,computed,watch等进行初始化，所以我们需要vue实例创建的时候，运行
2020-05-16 10:00:19
288
原创 vue源码系列01_环境搭建
导包依次使用 npm install 下载如下包rollup 打包工具@babel/core 用babel核心模块@babel/preset-env (babel将高级语法转成低级语法)rollup-plugin-babel (桥梁)rollup-plugin-serve (实现静态服务)cross-env (设置环境变量)相关配置在根目录下创建rollup.config.jsimport babel from 'rollup-plugin-babel';import serve
2020-05-15 16:50:35
203
原创 Vue前后端分离完成文件上传
Vue前后端分离完成文件上传input: <input type="file" id="imgfile" ref="myfile" style="display: none" onchange="imgfileChange()">上传文件 let myfile = this.%refs.myfile; let files = myfile.files; let file = files[0]; var formData = new FormData(); formData.
2020-05-10 16:08:47
491
原创 五邑大学数据结构第三章作业答案及解析
五邑大学数据结构第三章作业答案及解析前言选择题大题部分第一与第二题第四题后记前言对于这一章作业的难点，我个人觉得老师有点太为难我们了。既然这么多同学想要我出博客，那我就给大家解析一下吧。选择题第十二题如果是直接百度的话，不难得出答案 D，该题其实就是逆波兰表达式的雏形。(有一些大厂的面试题中有出现过)但是如果有同学想要深入学习的话，可以看看我java版本的数据结构与算法，里面有详细说明起飞大题部分第一与第二题由于此次作业可重用部分很多，所以我把第一跟第二题放在同一段代码里面展示希望
2020-05-09 18:24:50
618
原创 五邑大学数据结构第二章作业大题部分答案及解析
五邑大学数据结构第二章作业答案及解析前言模板类顺序表单链表双链表后记前言由于很多同学都反应这一个作业很难做，在我看来应该跟不会使用C++语言创建模板并且测试方法。下面我将提供一些类方便同学们参考且使用模板类格式:class mytest2 //类名{private: /* data */ // 放各种私有数据public: //放各种私有方法 mytest2(/* args */); // 有参构造 ~mytest2(); // 无参构造};mytest2::mytest2
2020-05-08 21:08:22
666
1
原创 redis 在 springboot 乱码的解决方法
redis 在 springboot 乱码的解决方法package com.atguigu.cache.config;import com.fasterxml.jackson.annotation.JsonAutoDetect;import com.fasterxml.jackson.annotation.JsonTypeInfo;import com.fasterxml.jackso...
2020-05-03 22:52:53
164
原创 数据结构课堂笔记day01-绪论
数据结构课堂笔记day01-绪论抽象数据类型(ADT)算法基本步骤求最大公约数伪代码（多用于描述算法）时间复杂度与空间复杂度数据元素: 数据的基本单位，在程序中作为一个整体进行考虑和处理。一般来说，能独立，完整地描述问题世界的一切实体都是数据元素。数据项：构成数据元素的最小单位可以认为是把问题 图形化，就比如我们在搞学习管理的时候，可以将 一个链表保存一个学生信息，将学号作为索引，再...
2020-04-20 21:26:19
183
原创 vue项目搭建
vue项目搭建及与其他框架结合初始化项目导入element-ui框架gitee 部署axios配置解决跨域的问题初始化项目1.安装 vue-cli3 (脚手架)在 cmd 窗口(注意了 这里得先下载node跟npm哦)npm install -g @vue/cli# ORyarn global add @vue/cli2.创建项目vue create my-project# O...
2020-04-18 19:30:16
164
原创 数据结构与算法之树
二叉树的概念树有很多种，每个节点最多只能有两个子节点的一种形式称为二叉树。二叉树的子节点分为左节点和右节点。如果该二叉树的所有叶子节点都在最后一层，并且结点总数= 2^n -1 , n 为层数，则我们称为满二叉树。如果该二叉树的所有叶子节点都在最后一层或者倒数第二层，而且最后一层的叶子节点在左边连续，倒数第二层的叶子节点在右边连续，我们称为完全二叉树。遍历方式前序遍历: 先...
2020-04-18 18:30:45
187
原创 数据结构与算法之图论
图论图基本介绍图的深度优先遍历广度优先遍历图基本介绍为什么要有图前面我们学了线性表和树线性表局限于一个直接前驱和一个直接后继的关系树也只能有一个直接前驱也就是父节点当我们需要表示多对多的关系时， 这里我们就用到了图图是一种数据结构，其中结点可以具有零个或多个相邻元素。两个结点之间的连接称为边。 结点也可以称为顶点。图的深度优先遍历深度优先遍历基本思想图的深度优先搜索(...
2020-04-18 18:30:15
322
原创 Oracle学习笔记
Oracle学习笔记创建空间授权增删改查自增序列创建空间--创建表空间create tablespace itheimadatafile 'c:\itheima.dbf'size 100mautoextend onnext 10m;--删除表空间drop tablespace itheima;--创建用户create user itheimaidentified by it...
2020-04-18 18:26:59
160
原创 Linux的常用命令
切换目录命令：cd补全地址：Tab返回上一级 cd …列出文件列表：ls ll查看当前目录：pwd创建目录跟移除目录：mkdir rmdir查看文件cat 查看所有more 显示一部分less 显示一部分，还能按上下建滚动显示文件后几行的内容tail -10 查看后10行的数据tail -f 动态查看日志信息文件操作rm 删除文件删除需要用户确...
2020-02-27 12:02:51
116
原创 MongoDB - mongod.conf重要配置
MongoDB - mongod.conf重要配置这个配置文件放在bin目录的同级记住: 里面的信息格式非常严格,一个空格都不能少不能多systemLog: destination: file path: c:\data\log\mongod.logstorage: dbPath: c:\data\db...
2020-01-28 20:01:07
475
原创 数据结构和算法之查找算法
查找算法顺序(线性)查找二分查找/折半查找插值查找斐波那契查找顺序(线性)查找直接遍历就是了public static int seqSearch(int[] arr, int value) { for (int i = 0; i < arr.length; i++) { if (arr[i] == value) { return i;...
2020-01-23 10:52:23
113
原创 数据结构与算法之排序算法
排序排序算法的介绍排序算法的介绍内部排序插入排序直接插入排序希尔排序选择排序简单选择排序堆排序交换排序冒泡排序快速排序归并排序基数排序外部排序...
2020-01-21 13:01:12
196
原创 Sass学习笔记
Sass学习笔记声明默认变量混合宏继承占位符插值#{}@if...@else@for循环@while循环@each循环 (遍历)字符串函数unquote()函数quote()函数To-upper-case()To-lower-case()数字函数声明默认变量$swap: 3;$swap: 2 !default;在变量后加一个 !default混合宏我们可以通过在参数中传默认值@mi...
2020-01-15 11:21:22
231
原创 Vue3.0新特性
Vue3.0新特性初始化项目去除console控制台等的报错setup() (重点)reactiveref(重点)初始化项目安装 vue-cli3 (脚手架)在 cmd 窗口(注意了 这里得先下载node跟npm哦)npm install -g @vue/cli# ORyarn global add @vue/cli创建项目vue create my-project# ...
2020-01-13 13:38:24
572
原创 vue-cli3 取消关闭eslint 校验代码
vue-cli3 取消关闭eslint 校验代码在package.json中，去掉这两个"extends": [ "plugin:vue/essential", "eslint:recommended" ],然后在根目录下创建 .eslintrc.js 在该文件下写入module.exports = { root: true, env: { ...
2020-01-12 14:58:45
1370
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人