- 博客(67)
- 收藏
- 关注
RSS订阅原创 React——setState 是同步还是异步问题
从前面我们可以看到setState的表现都很像异步，但本身并不是一个异步方法，是同步的！！ 如果setState是一个同步执行的机制，那么这个组件会被重新渲染100次，这对性能是一个相当大的消耗。React框架设计的性能优化机制，在React环境中，setState表现出来是异步的；在原生事件、setTimeout/setInterval、async/await，setState表现出来是同步的；setState本身并不是异步，只是因为react的性能优化机制体现为异步。
2024-04-01 17:14:37
614
原创 虚拟DOM和真实DOM的区别
真实DOM是浏览器中实际存在的DOM结构，它由浏览器解析HTML生成，并且直接与浏览器交互。当页面中的数据发生变化时，真实DOM会重新计算布局和渲染，这个过程比较耗费性能。 虚拟DOM是一种在内存中以JavaScript对象的形式表示的轻量级的DOM结构。它是对真实DOM的一种抽象和模拟，可以在内存中进行操作和计算，然后再将变化的部分批量更新到真实DOM上，以提高性能。它允许我们在JavaScript中创建、更新和删除DOM元素。它是React等现代JavaScript框架的核心概念之一。
2024-03-29 16:58:45
319
原创 VUE——mixins混入
Mixins（混入），一种分发 Vue 组件中可复用功能的非常灵活的方式；实际由一个mixins.js文件，导出一个js对象，包含组件中的变量、方法、生命周期函数（如：data、components、methods、beforecreated、props等等），是一个公共的对象，各个组件可以通过引入它复用里面的功能。
2024-03-29 16:39:53
258
原创 React—— props校验（非typescript校验类型）
非typescript环境下，当我们在封装组件的时候，接受props时传入的内容，需要做类型检测，那我们可以用props校验进行类型的检查。props校验允许在创建组件的时候，就约定props的格式、类型等。如果props想设置默认值，可以通过。来给组件的props添加校验规则。
2024-03-20 11:14:16
498
原创 React——props children （插槽平替）
React当中不存在v-slot插槽这种概念，而当我们又需要实现这个种功能时，该怎么办呢？我们可以通过props children属性去实现。
2024-03-20 10:44:35
332
原创 React——组件通讯
组件中的状态是私有的，组件的状态只能在组件内部使用，无法直接在组件外使用，但是我们在日常开发中，通常会把相似、功能完整的应用才分成组件（工厂模式）利于我们的开发，而不同组件直接又需要传递数据，而这个过程就是组件通讯。
2024-03-19 19:25:01
878
原创 React——class组件中setState修改state
class组件中通过state去存储当前组件的数据，那怎么对其进行修改呢？**setState() 作用：**1 、
2024-03-19 15:51:28
460
原创 React——关于事件处理
如果我们在render return的虚拟dom的on事件当中注册事件的话，那this的指向会是undefined，因为是模块化环境，全局状态的this不是window而是undefined。this的指向坚持谁调用指向谁，我们可以通过react的源码看到render函数通过instance去调用的，那render内部的this指向肯定是instance；vue实例里，我们所有方法都写在methods里面，我们通过源码可以发现，vue内部通过fn.bind(this),把所以方法的this都进行了绑定。
2024-03-18 18:24:08
358
1原创 React——组件化
类（class）组件：使用 ES6 的 class 和extend 继承React的component来创建的组件。组件化其实在每个架构当中都存在，通常我们会把独立、可复用、可组合的不错剥离出来，独立开发一个组件。依据业务、组件类型分门别类放在JS文件当中，这个依据个人习惯、业务性质进行堆放。函数组件：使用JS的。
2024-03-18 16:29:46
688
原创 React——关于JSX
我们在初建react项目的时候，需要使用到react.creatElement去写虚拟dom，在编写过程中太繁琐不直观，不利于开发，而jsx就是解决这个问题，可以直接写一段类似HTML的代码去代替react.creatElement编码。提高开发效率。
2024-03-15 17:03:38
1167
原创 React——react 的基本使用
简单看下demo的配置，在根目录我们可以看到，没有任何webpack的配置文件，我们可以通过eject命令去自动生成相关的配置（react基于webpack搭建），但是不推荐使用，eject是不可逆的，生成的文件不是全部都需要，会导致项目很混乱。react创建react元素(虚拟DOM)，reactDom渲染react元素到APP。（react-native需要自己再下载依赖）
2024-03-14 16:14:54
462
原创 React——关于react概述
React 是一个用于构建用户界面的 JavaScript 库 （类UI HTML MVC里的V)react官网react中文网。
2024-03-13 16:07:03
467
原创 HTML——HTML 文件中的 DOCTYPE 是什么作用？
DOCTYPE 即 Document Type，网页文件的文档类型标准。HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准。DOCTYPE 需要放置在 HTML 文件的。主要作用是告诉浏览器的解析器要使用哪种。
2024-03-11 15:19:28
496
原创 JavaScript——map方法和foreach方法的区别
forEach 方法是遍历数组的方法，它提供了一种快捷的方式来遍历数组的所有元素。而 map 方法是映射数组的方法，它可以根据指定的规则对数组的每个元素进行映射，并返回一个新的数组。实际上现在 V8 对于 Array 的优化真的很糟糕，现在都已经 Node.js v9 的年代了，方法返回一个全新的数组，其中包含转换后的元素和相同数量的数据。，还有诸多参数和上下文需要在执行的时候考虑进来，这里可能拖慢性能；1、for 循环当然是最简单的，因为它没有任何额外的。它不是普通的 for 循环的。
2024-03-11 14:57:16
459
原创 VUE——v-cloak指令
功能：利用vue实例化后v-cloak属性会消失，设置其样式。属性选择器，可以控制vue实例化完成前的dom样式。'关于v-cloak的用法'
2024-03-07 10:58:47
235
原创 JavaScript——流程控制（程序结构）
代码会依据我们写入的判断分支执行，从而得到2种不同的结果。涉及语句if else/ switch /三元表达式。 代码会依据我们写入的判断循环执行，比如for循环/while循环，达到某种条件才停止循环。流程控制就是来控制我们的代码按照什么结构顺序来执行。更倾向于一种思想结构。 它没有特定的语句，我们的程序默认就是由上往下去进行执行的；流程控制分为三大结构：顺序结构、分支结构、循环结构。 代码从上往下依次执行，从A到B执行，单向执行；
2024-03-06 15:49:44
369
原创 JavaScript——类型转换
JavaScript是弱类型语言，我们在开发过程中因为与用户的一些交互会导致一种数据类型转换为另外一种数据类型，这就是我们的类型转换。 Object(数据)，字符串转对象JSON.parse(JSON字符串) 两边有一个是字符串，会把非字符串转换成字符串，最后拼接成一个字符串返回。 对象转字符串JSON.stringify(对象)，得到JSON字符串。 都会把非数字类型转换成数字类型，如果无法转换则返回，NaN。 String(数据) 、变量/数据.toString() Symbol(数据)
2024-03-06 13:36:16
991
原创 JavaScript—— 模板字符串、拼接字符串
用法：+ 号 拼接字符串，+号两边只要其中一边有字符串就可以进行拼接。`` 反引号 结合 ${} 使用。 引号、+ 写太多很麻烦。
2024-03-06 11:27:31
375
原创 JavaScript—— 运算符总结(超全)
以上优先级：先乘除后加减，有括号的先算括号里面的，同级就从左往右依次运算。如果两边有一个是字符串，那么拼接产生一个新的字符串。取余数，存在类型隐式转换，正负只与左边数字有关。如果两边都是number类型，就是进行相加。相减 ，存在类型隐式转换。相乘，存在类型隐式转换。相除，存在类型隐式转换。
2024-03-06 11:11:43
455
原创 JavaScript- 关于数据类型及其判断方法（超全）
简单数据类型也叫做基本数据类型、值类型，因为起单纯存储值。Number：数值型（数字型），参与数学运算做数字的标识 ，例子：1，3，4String：字符串型，用来表示文字的''和""和``'jessica'、 "jessica"、 `jessica` （1左边的那个键）Boolean：布尔类型true和false2种状态undefined：未定义类型，代表未定义（只声明没赋值）null ：空值类型，代表定义未赋值NaN：数字值（number），表示不是一个合法的数字// 怎么产生的？
2024-03-05 16:27:03
801
原创 JavaScript - 基础写法
在浏览器的F12-选则控制台-查看信息，如果输出的数据类型是字符串则是黑色，如果是number类型则是蓝色。 console.log (需要输出的内容)，开发人员调试数据用的。(英文格式，可写可不写)，当把很多代码写在同一行的时候，那么就要加。prompt(‘提示用户输入什么’) 原生的。confirm(‘提示用户的内容’) 原生的。alert(‘想提示的内容’) 原生的。(引入外部的js文件形式、cdn)
2024-03-05 14:47:41
344
原创 BOM-navigator对象（涉及多端版本匹配）
navigator导航对象，我们可以通过它导航到我们的服务器、网站；该对象属性appVersion获得当前浏览器的版本、内核、系统信息等等（所有浏览器信息） 这里我们可能就会涉及到不同的设备了，比如：电脑浏览器、手机浏览器、IPAD浏览器。
2024-03-05 13:40:09
166
原创 BOM-history历史记录对象
在日常使用浏览器当中，我们都知道浏览器存在一个功能，查看我们浏览的历史记录，而BOM它存在一个对象-history，我们可以通过js操作这个对象去查看浏览器的历史记录。
2024-03-05 13:31:13
161
原创 HTML5- 拖拽功能
HTML5新增了拖拽功能，但不是所有元素都能拖拽，如果希望该元素强制可以被拖拽，加一个行内属性。dragover(用在容器内)drop(用在容器内)
2024-03-05 13:16:52
1537
原创 HTML5-新增的操作类
以前我们通过className操作（新增、删除）类不方便，比如新增className += ‘class’，当点击几次时会重复的添加class，很冗余，操作起来也很不方便，html5新增了操作类的方法，classList。 如何获取classList，我们会获得一个伪数组，保存当前元素所有的类。是否存在类 contains(‘red’) 返回布尔值true、false。替换类 replace(‘被替换的’，‘替换进去的新类’)切换类（有就删 无则加） toggle(‘xx’)删除类 remove()
2024-03-04 15:55:53
424
原创 JavaScript-如何通过原生JS实现匀速动画
前面可以看到，我们使用current++是一种匀速的方式，匀速的快慢取决于我们+=后面的值，如果我们希望是缓动动画的形式去移动我们的元素，我们可以通过以下封装算法去实现。据我们所知，我们可以通过css3（transform translate即可）区实现这个动画，但是通常面试的时候，可能会被要求原生手敲； 使用到的知识点：定时器去实现setInterval去实现。
2024-03-04 15:12:56
384
原创 JavaScript-定时器 - setInterval、setTimeout
setInterval一旦开启，里面的代码就会按照写入的时间执行，每隔一段时间就会调用一次，没有关闭的话不会停止。 setTimeout可以理解为把一段代码延迟执行，回调函数只会调用一次。
2024-03-01 15:56:39
135
原创 JavaScript-关于事件、事件流（捕获、冒泡）、事件源、常用事件
事件流：当一个事件触发后，它其实经历了从上（捕获阶段)到下(事件目标)，又从下(事件目标)到上(冒泡阶段)的流动过程，这就称之为事件流事件冒泡默认存在的，事件捕获要写特殊代码才能看到，如下。例如：addEventListener的第三个参数写为true就是事件捕获，所以前面写的addEventListener里面提到的就是这里不管是捕获、冒泡，都会触发同名事件事件流如果不写特殊代码，会经历完整的事件流。
2024-03-01 14:48:14
1150
原创 阻止a标签跳转的方法
这个是最常用的方法，京东也是使用该方法，这里是的意思是这次点击又JavaScript处理，处理的方式是无/伪协议，如果我们后面写个alert() 就代表alert()处理，其次写其他也一样。总是跳转到当前页面顶部，当页面内容较多时，还是会有跳转的感觉。，直接做截断了，后面不会执行。阻止事件的默认行为，
2024-02-29 11:15:15
798
原创 DOM 获取父子节点
DOM 是以树状结构排列的，所以父子关系是相对的，当li为我们的目标节点的时候，ul为其父节点，其他li为它的兄弟节点，li里面包含的标签为子节点，以此类推。父元素.childNodes，包含标签、文本、注释等。元素.parentNode，直接得到DOM对象。父元素.children，这个只会找到标签。
2024-02-28 17:54:27
280
原创 DOM HTML5 -操作自定义属性
如果它不存在，我们自己写入的叫做”自定义属性“，一般我们用来存储某些数据的场景下使用；我们的标签它默认就有自己的属性：id、class、style、src等等。
2024-02-28 17:38:06
440
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人