前端探险家-CSDN博客

原创 React学习笔记七——React-router-web的使用详解

1.拆分组件拆分界面，抽取组件1.设计一个组件需要专一性，即一个组件只负责一个功能，跟封封逻辑功能的思路一致，遵循的原则是就是：一个组件只专注的做一件事，并且要把这件事做好；2.一个组件的功能如果可以拆封成多个功能点，应将每个功能点设计成一个个小组件，但并不是颗粒度越小越好，只要将一个组件内的功能和逻辑控制在一个可控的范围内即可；2.实现静态组件使用组件先实现静态页面效果3.实现动态组件3.1动态显示初始化数据数据类型数据名称保存在那个组件3.2交互（从绑定事件监听开始

2021-06-29 18:44:47 377 1

原创 React学习笔记六——用creact-react-app脚手架创建项目

全局安装create-react-appnpm install -g create-react-app切换到想要创建的目录下，输入命令create-react-app my-react-project进入项目，启动项目进入项目：cd my-react-project启动项目：npm/yarn start创建成功，如下图：React脚手架项目结构...

2021-06-24 18:00:11 492

原创 React学习笔记五——组件的生命周期

生命周期的理解组件从创建到死亡会经历一些特定的阶段React组件中包含了一系列的钩子函数（生命周期回调函数），会在特定的时刻调用我们在定义组件时，会在特定的生命周期函数中，做特定的工作组件的生命周期（旧）初始化挂载时按顺序触发的钩子函数constructor–构造器componenetWillMount–组件将挂载render–页面渲染componenetDidMount–组件已挂载更改状态( setState() )时按顺序触发的钩子函数shouldComponentUp

2021-06-24 15:35:03 334

原创 React学习笔记四——受控组件和非受控组件

受控组件页面中所有输入类的DOM，随着输入的值同步的维护到状态中，如需要使用时，直接从状态中获取推荐使用受控组件，可以避免对ref的使用受控组件案例代码<head> <div id="test"></div></head>//引入一些react核心库和babel<script type="text/javascript" src="..."></script><script type="text/ba

2021-06-24 11:16:36 848 1

原创 React学习笔记三——组件三大属性state、props和refs详解

state1.类中方法this的指向constructor和render里的this指向类组件的实例对象在类组件内部定义的普通函数，作为onClick的回调，不是通过实例调用的，是直接调用，并且类组件内部默认开启了局部严格模式，所以this指向undefind2.将类组件内部定义的函数内部this指向类组件的实例对象利用箭头函数在构造器中通过bind改变函数this指向，赋值于实例对象的新函数3.初始化状态写法初始化状态写在构造器中 this.state = {}如果类组件省略构

2021-06-23 17:44:44 601 2

原创 React学习笔记二——组件的理解和使用

函数式组件（简单组件）函数名首字母必须大写ReactDOM.render()的第一个参数必须是首字母大写的闭合标签，<head> <div id="test"></div></head>//引入一些react核心库和babel<script type="text/javascript" src="..."></script><script type="text/babel"> //1.创建一个函

2021-06-22 18:17:27 323

原创 React学习笔记一——JSX语法规则

之前看过两遍关于react基础的视频，每次看完感觉非常懂，但是过一段就会忘记，所以这次再学习自己会做一些笔记记录下来，方便日后的学习，如果对你有帮助，再好不过；通过以下代码来总结以下JSX的语法规则定义虚拟DOM，不要写引号标签中混入JS要使用花括号{}样式的类名指定不要用class，要用className内联样式，要用style={{key:value}}的形式去写虚拟DOM必须只有一个根标签标签必须闭合标签首字母如果为小写字母，则将标签改为html中同名标签，若没有该标签，则报错；.

2021-06-22 17:10:30 362

原创用源码解析Vue2.x版本的响应式数据的原理

Vue实现响应式数据的核心API是Object.defineProperty。其实默认Vue在初始化数据时，会给data中的属性使用Object.defineProperty重新定义所有属性,当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher）如果属性发生变化会通知相关依赖进行更新操作。这里，用一张图来说明Vue实现响应式数据的流程：1.初始化用户传入的data数据这一步对应源码src/core/instance/state.js的 113行function initData

2021-06-18 14:51:03 493 2

原创 JS开发必须知道的常用技巧（持续更新...)

必收藏的JS技巧1.数组1.1数组去重1.2数组交集1.3数组并集1.4数组差集1.5数组排序1.6数组最大值1.6数组求和1.7数组是否包含值1.8数组转对象2.字符串截取2.1截取前n位字符2.2截掉前5位字符2.3截取后5位字符2.4截掉后5位字符2.5截取从第6位到第9位的字符串2.6将字符串abcde 替换成ABCDE2.7从开始截取到指定字符 (该字符出现的第一次)1.数组1.1数组去重普通数组Array.from(new Set([1, 2, 3, 3, 4, 4])) //[1

2021-06-16 16:16:49 718 1

原创 Promise——告别回调函数

今天我们就接着来聊聊微任务的另外一个应用 Promise，DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的，而且新的前端框架也使用了大量的 Promise。可以这么说，Promise 已经成为现代前端的“水”和“电”，很是关键，所以深入学习 Promise 势在必行。我们一般都是先从问题切入，那么 Promise 到底解决了什么问题呢？在正式开始介绍之前，我想有必要明确下，Promise 解决的是异步编码风格的问题，而不是一些其他的问题，所以接下来我们聊的话题都是围绕编码

2021-06-10 15:00:45 589

原创宏任务和微任务的详解

微任务可以在实时性和效率之间做一个有效的权衡。从目前的情况来看，微任务已经被广泛地应用，基于微任务的技术有 MutationObserver、Promise 以及以 Promise 为基础开发出来的很多其他的技术。所以微任务的重要性也与日俱增，了解其底层的工作原理对于你读懂别人的代码，以及写出更高效、更具现代的代码有着决定性的作用。有微任务，也就有宏任务，那这二者到底有什么区别？它们又是如何相互取长补短的？宏任务前面我们已经介绍过了，页面中的大部分任务都是在主线程上执行的，这些任务包括了：渲染

2021-06-10 14:27:13 5903 5

原创浏览器中的消息队列和事件循环

每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理 DOM，又要计算样式，还要处理布局，同时还需要处理 JavaScript 任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条不紊地执行，这就需要一个系统来统筹调度这些任务，这个统筹调度系统就是我们今天要讲的消息队列和事件循环系统。为了能让你更加深刻地理解事件循环机制，我们就从最简单的场景来分析，然后带你一步步了解浏览器页面主线程是如何运作的。需要说明的是，文章中的代码我会采用 C++ 来示范。如果你不熟悉 C++，也没有关系，这里并没有

2021-06-10 14:04:09 712 2

转载浏览器工作原理和实践——栈空间和堆空间

对于前端开发者来说，JavaScript 的内存机制是一个不被经常提及的概念，因此很容易被忽视。但是如果你想成为行业专家，并打造高性能前端应用，那么你就必须要搞清楚 JavaScript 的内存机制了。首先，我们先看下面这两段代码：function foo(){ var a = 1 var b = a a = 2 console.log(a) console.log(b)}foo()function foo(){ var a = {name:"极

2021-06-01 15:03:36 672

转载 JavaScript的执行机制——this的详解

this的详解1.JavaScript 中的 this 是什么2.全局执行上下文中的 this3.函数执行上下文中的 this3.1 通过函数的 call 方法设置3.2 通过对象调用方法设置3.3 通过构造函数中设置4.this 的设计缺陷以及应对方案4.1 嵌套函数中的 this 不会从外层函数中继承4.2 普通函数中的 this 默认指向全局对象 window5.总结我们讲了词法作用域、作用域链以及闭包，并在最后思考题中留了下面这样一段代码：var bar = { myName:"time

2021-05-25 10:47:38 590

原创 JavaScript的执行机制——作用域链和闭包

作用域链和闭包作用域链词法作用域块级作用域中的变量查找闭包闭包是怎么回收的总结理解作用域链是理解闭包的基础，而闭包在 JavaScript 中几乎无处不在，同时作用域和作用域链还是所有编程语言的基础。所以，如果你想学透一门语言，作用域和作用域链一定是绕不开的。那今天我们就来聊聊什么是作用域链，并通过作用域链再来讲讲什么是闭包。首先我们来看下面这段代码：function bar() { console.log(myName)}function foo() { var myName

2021-05-24 16:29:13 1168

原创 JavaScript的执行机制——块级作用域

块级作用域作用域（scope）变量提升所带来的问题变量容易在不被察觉的情况下被覆盖掉本应销毁的变量没有被销毁ES6 是如何解决变量提升带来的缺陷JavaScript 是如何支持块级作用域的作用域（scope）为什么 JavaScript 中会存在变量提升这个特性，而其他语言似乎都没有这个特性呢？要讲清楚这个问题，我们就得先从作用域讲起。作用域是指在程序中定义变量的区域，该位置决定了变量的生命周期。通俗地理解，作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。在 ES6 之

2021-05-24 14:31:07 2759 21

原创 JavaScript的执行机制——调用栈

为什么JavaScript代码会出现栈溢出？什么是函数调用什么是栈什么是 JavaScript 的调用栈在开发中，如何利用好调用栈如何利用浏览器查看调用栈的信息栈溢出（Stack Overflow）总结JavaScript 引擎先会对其进行编译，并创建执行上下文。但是并没有明确说明到底什么样的代码才算符合规范。那么接下来我们就来明确下，哪些情况下代码才算是“一段”代码，才会在执行之前就进行编译并创建执行上下文。一般说来，有这么三种情况：当 JavaScript 执行全局代码的时候，会编译全局代码并创

2021-05-20 17:48:16 1800 4

原创 JavaScript的执行机制——变量提升

变量提升变量提升（Hoisting）JavaScript 代码的执行流程1. 编译阶段2. 执行阶段代码中出现相同的变量或者函数怎么办？总结咱们先看段代码，你觉得下面这段代码输出的结果是什么？showName()console.log(myname)var myname = '极客时间'function showName() { console.log('函数showName被执行');}使用过 JavaScript 开发的程序员应该都知道，JavaScript 是按顺序执行的。若按

2021-05-19 11:47:39 630 1

原创浏览器工作原理和实践——渲染流程

HTML、CSS和JavaScript变成页面的流程1.构建 DOM 树2.样式计算2.1 把 CSS 转换为浏览器能够理解的结构2.2 转换样式表中的属性值，使其标准化2.3 计算出 DOM 树中每个节点的具体样式3.布局阶段3.1 创建布局树3.2 布局计算4.分层5.图层绘制6.光栅化7.合成和显示8.渲染流水线大总结9.相关概念(“重排”“重绘”和“合成”)9.1 更新了元素的几何属性（重排）9.2 更新元素的绘制属性（重绘）9.3 直接合成阶段HTML、CSS、JavaScript 数据，经过

2021-05-18 18:20:03 941

原创 2021年React常见的面试题以及答案(持续更新中...)

React常见的面试题以及答案区分Real DOM和Virtual DOM什么是JSX和它的特性？类组件和函数组件之间有什么区别？了解 Virtual DOM 吗？解释一下它的工作原理。React组件生命周期有几个阶段详细解释 React 组件的生命周期方法react在哪个生命周期做优化受控组件和非受控组件的区别为什么虚拟 dom 会提高性能react的diff算法是怎么完成的react组件之间如何通信什么是高阶组件？React context是什么？什么是Redux？Redux遵循的三个原则是什么？数据如

2021-05-18 12:40:39 39829 12

原创浏览器工作原理和实践——导航流程

从输入URL到页面展示，这中间发生了什么？1. 用户输入2. URL 请求过程2.1重定向2.2响应数据类型处理3. 准备渲染进程4. 提交文档5. 渲染阶段6.总结“在浏览器里，从输入 URL 到页面展示，这中间发生了什么？ ”这是一道经典的面试题，能比较全面地考察应聘者知识的掌握程度，其中涉及到了网络、操作系统、Web 等一系列的知识。那么今天我们就一起来探索下这个流程，下图是我梳理出的“从输入 URL 到页面展示完整流程示意图”：从图中可以看出，整个过程需要各个进程之间的配合，所以在开始正式流

2021-05-14 10:40:39 678

原创浏览器工作原理面试题一：从输入 URL 到页面展示，这中间发生了什么？

从输入 URL 到页面展示的过程用户输入url并回车浏览器进程检查url，组装协议，构成完整的url浏览器进程通过进程间通信（IPC）把url请求发送给网络进程网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程如果没有，网络进程向web服务器发起http请求（网络请求），请求流程如下：5.1.进行DNS解析，获取服务器ip地址，端口5.2.利用ip地址和服务器建立tcp连接5.3.构建请求头信息5.4.发送请求头信息5.5.服务器响应后，网络进

2021-05-13 11:58:17 968

原创浏览器工作原理和实践——HTTP请求流程

HTTP请求流程浏览器端发起 HTTP 请求流程1.构建请求2.查找缓存3. 准备 IP 地址和端口4. 等待 TCP 队列5. 建立 TCP 连接6. 发送 HTTP 请求7. 服务器处理请求8. 服务器响应请求9. 断开TCP链接为什么很多站点第二次打开速度会很快？登录状态是如何保持的？TCP 协议是保证数据完整传输的，一个 TCP 连接过程包括了建立连接、传输数据和断开连接三个阶段。而 HTTP 协议，正是建立在 TCP 连接基础之上的。HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web

2021-05-12 11:50:43 1083

原创浏览器工作原理和实践——TCP协议

TCP协议：如何保证页面文件能被完整送达浏览器？IP：把数据包送达目的主机UDP：把数据包送达应用程序TCP：把数据完整地送达应用程序总结在网络中，一个文件通常会被拆分为很多数据包来进行传输，而数据包在传输过程中又有很大概率丢失或者出错。那么如何保证页面文件能被完整地送达浏览器呢？下面将分别从 “数据包如何送达主机”、 “主机如何将数据包转交给应用” 和 “数据是如何被完整地送达应用程序” 这三个角度来讲述数据的传输过程。IP：把数据包送达目的主机数据包要在互联网上进行传输，就要符合网际协议（Int

2021-05-10 15:07:14 813

原创浏览器工作原理和实践——进程和线程

进程和线程并行处理线程 VS 进程进程和线程之间的关系单进程浏览器的弊端目前多进程架构在介绍进程和线程之前，先讲解下什么是并行处理，因为如果你理解了并行处理的概念，那么再理解进程和线程之间的关系就会变得轻松许多。并行处理计算机中的并行处理就是同一时刻处理多个任务，比如我们要计算下面这三个表达式的值，并显示出结果。A = 1+2B = 20/5C = 7*8在编写代码的时候，我们可以把这个过程拆分为四个任务：任务 1 是计算 A=1+2；任务 2 是计算 B=20/5；任务 3 是计算

2021-05-08 10:45:51 562 2

原创浅谈Vue2.x响应式原理

Vue响应式原理什么是响应式理解响应式Vue通过Object.defineProperty知道数据发生了改变Vue通过依赖收集去更新视图Vue通过依赖更新时去更新视图Vue响应式原理总结什么是响应式在 Vue 实例中声明过的数据，这些数据就是响应式的。什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。理解响应式Vue是如何追踪变化得呢，那么我们就要弄懂以下三个问题：Vue是怎么知道数据发生了改变？Vue是怎么知道去更新哪些视图？Vue是怎么知道在什么时间更新视图

2021-04-20 10:37:52 3138 4

原创 Vue2.x基本知识超详细的思维导图（完整图/可保存）

抽周末时间，没事看看Vue的官网，也顺便做了一下Vue2.x基本知识超详细的思维导图，大家可以保存起来，一图在手，天下我有，Vue2.x进阶知识的思维导图等哪个周末闲了再弄！如果对你有用，记得点赞哦，谢谢！...

2021-04-12 16:31:04 2028 2

原创分分钟钟学会正则表达式，建议收藏！

正则表达式一.限定符二."或"运算符三.字符类四.元字符五.贪婪与懒惰匹配六.常用的正则表达式大全一.限定符1.?:它前面的字符需要出现0次或1次例如：used?可以匹配到use和used2.*:它会匹配0个或多个字符例如：ab*c可以匹配到ac,abc,abbbbbbc3.+:它会匹配一次及以上的字符例如：ab+c可以匹配abc,abbbc,而不会匹配ac4.{}:可以限定匹配的数量例如：ab{6}c,则匹配到abbbbbbc,而要限定b的数量在2到6之间，则是ab{2,6

2021-03-31 14:35:51 372

原创 flex布局实现多个盒子平均分布并换行（五个盒子三个一行另外两个换行靠左对齐显示）

很多项目布局都会用到多个盒子平均分布并换行，虽然有很多的方法，今天我们在这里用一下flex布局来实现一下，实现效果如下图：<template> <div class="analysisTask"> <ul class="chartList"> <li></li> <li></li> <li></li&g

2021-01-27 17:42:40 6995 8

原创 vue组件改变标签属性is的值来动态切换组件内容

首先描述一下我们经常在项目中遇到的需求：比如我们要写一个弹窗，弹窗里显示的是表单内容，但是表单内容会根据进入前选择的状态不通显示的表单内容不通，也就是说，这个弹窗里面有5个不同的表单在各自状态下子在弹窗中渲染，这个时候我们就需要封装一个组件，但是组件不能是死的，我们要通过is名称来动态的切换组件显示；写两个表单组件hive详情表单组件<template><div class="hive_control">

2021-01-14 10:06:31 899

原创 typescript学习笔记：typescript中的函数定义

1.js函数的定义// 函数声明function action(){ return '去打篮球'}//函数表达式var action1 = function(){ return '去打游戏'}2.ts函数的定义// 函数声明function action():string{ return '去打篮球' //正确}function action():string{ return 123 //错误写法，限制了返回类型为字符串，不能是数值}//函数表达式

2021-01-12 13:24:08 1573

原创如何写一个Vue自定义指令

Vue除了核心功能默认内置的指令，Vue 也允许注册自定义指令。自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。写一个自定义指令的两种方式：全局指令：通过 Vue.directive() 函数注册一个全局的指令。局部指令：通过组件的 directives 属性，对该组件添加一个局部的指令。创建全局指令：需要传入指令名称以及一个包含指令钩子函数的对象，该对象.

2020-12-17 11:06:21 11731 1

原创 Vuex的学习笔记三：核心概念Action和Getter的理解和使用

Vuex的主要核心概念一.Action1.1Action的自我介绍1.2组件触发Action中的异步函数1.3组件触发Action异步时携带参数二.Getter2.1Getter的自我介绍2.3组件访问Getter的数据一.Action1.1Action的自我介绍Action用于处理异步任务如果通过异步操作变更数据，必须通过Action，而不是使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。Action 提交的是 mutationAction 函数接

2020-12-08 11:00:11 1972

原创 Vuex的学习笔记二：核心概念State和Mutation的理解和使用

Vuex的主要核心概念一.State1.1State的自我介绍1.2组件访问State中数据的方式第一种方式：$store.state.数据名第二种方式：mapState 辅助函数1.3组件通过哪些方式改变State中数据二.Mutation2.1Mutation的自我介绍2.2组件通过触发Mutation来改变数据2.3组件触发Mutation时传递参数一.State1.1State的自我介绍State提供了唯一的数据公共源，所有共享的数据都要统一放到store的state进行存储；import

2020-12-07 17:47:49 1678

空空如也

空空如也