- 博客(180)
- 收藏
- 关注
RSS订阅原创 React源码解析18（9）------ 实现多节点渲染【修改beginWork和completeWork】
目前，我们已经实现了单节点的，beginWork，completeWork，diff流程。之前的children就直接是一个对象jsx，因为是单节点。而现在，是通过数组的方式表示。})]})]})
2023-08-18 13:58:59
681
原创 React源码解析18（8）------ 实现单节点的Diff算法
经过之前的几篇文章，我们已经实现了一个可以进行更新渲染的假React。})})})虽然页面的效果是正确的。但对于两个jsx，二者的区别仅仅是span标签里面的内容不同。但是在程序里面，我们是相当于每次都重新beginWork，重新的创建Filber树，重新的创建真实DOM。而对于这里div和span标签，它没有任何的改变，我们是否可以用一种优化策略，从而对旧资源进行利用呢？所以Diff由此而来。这一篇先只说单节点的Diff，因为目前还没实现带有sibling的情况。
2023-08-17 10:15:31
963
原创 React源码解析18（7）------ 实现事件机制（onClick事件）
在上一篇中，我们实现了useState的hook，但由于没有实现事件机制，所以我们只能将setState挂载在window上。而这一篇主要就是来实现事件系统，从而实现通过点击事件进行setState。而在React中，虽然我们是将事件绑定在JSX上的某个元素上，但是其实最终的执行者是最外层的容器。也就是说React利用了冒泡的机制，将所有事件都冒泡到了最外层容器上，从而创建合成事件，在对相应的事件执行。})});
2023-08-15 10:28:07
859
原创 React源码解析18（6）------ 实现useState
在上一篇文章中，我们已经实现了函数组件。同时可以正常通过render进行渲染。而通过之前的文章，beginWork和completeWork也已经有了基本的架子。现在我们可以去实现useState了。})});由于我们这一篇并不会实现React的事件机制，所以我们先将setState的方法挂载在window上进行调试。有了基础，我们现在开始实现useState。
2023-08-14 15:08:13
1327
原创 React源码解析18（5）------ 实现函数组件【修改beginWork和completeWork】
经过之前的几篇文章，我们实现了基本的jsx，在页面渲染的过程。但是如果是通过函数组件写出来的组件，还是不能渲染到页面上的。所以这一篇，主要是对之前写得方法进行修改，从而能够显示函数组件，所以现在我们在index.js文件中，修改一下jsx的写法。})});这里因为需要使用我们自己的jsx方法。所以在App里面返回的依旧是通过之前的方式进行调用。
2023-08-14 09:47:36
987
原创 React源码解析18（4）------ completeWork的工作流程【mount】
经过上一章，我们得到的FilberNode已经具有了child和return属性。一颗Filber树的结构已经展现出来了。那我们最终是想在页面渲染真实的DOM。所以我们现在要在completeWork里，构建出一颗离屏的DOM树。之前在说FilberNode的属性时，我们提到过一个属性stateNode。它就是用来保存每个FilberNode的真实DOM。OK，现在我们开干，准备实现completeWork。
2023-08-10 16:07:45
1161
原创 React源码解析18（3）------ beginWork的工作流程【mount】
OK，经过上一篇文章。生成了FilberRootNode和HostRootFilber。并且二者之间的对应关系也已经确定。//第一节实现的jsx方法})});所以我们现在要实现ReactDOM.createRoot中返回的render方法。
2023-08-10 10:09:03
1214
原创 React源码解析18（2）------ FilberNode，FilberRootNode结构关系
在上一篇，我们实现了通过JSX转换为ReactElement的方法，也看到了转换后React元素的结构。但是这个React元素，并不能很清楚的表达组件之间的关系，以及属性的处理。所以在React内部，会将所有的React元素转换为Filber树。而这一章节，主要就是简单描述一下FilberNode的结构。首先看一下一颗Filber树是什么样子的：在这张图里，出了filberRootNode，其他的节点都是FilberNode类型，hostRootFilber就是最外层的FilberNode。
2023-08-09 15:34:40
1249
原创 包与NPM（NPM常用指令）
管理包权限，正常来讲一个包只有一个人有权限发布。使用该命令可以给其他人添加权限。初始化一个npm包，执行该命令后，会在包生成一个package.json。分析包，可以分析当前路径下能够通过模块路径找到的所有包，并生成依赖数。比如查看某个包都引入了什么其他依赖包，可以使用该功能。可以使用npm i简写。主要是用来安装依赖包。在NPM仓库中建立一个账号。用于查看当前npm的版本。
2023-07-19 10:04:30
354
原创 2023年了要怎么理解原型和原型链
现在，我来带给你一个非常牛逼的万能公式，来说明__proto__和prototype之间的关系。所以，这里我们针对于不同情况下，列出不同事物的constructor和事物的prototype或者__proto__之间的对应关系。现在我有三个对戏，p1（通过People类实例化出来的）,arr（通过Array类实例化出来的）,obj（通过Object类实例化出来的）。对于constructor，和prototype，__proto__之间的关系。OK，对于上面的People类来说，如果我换一种写法！
2023-06-19 11:27:04
847
原创 如何在React中使用useCallback优化代码
当父组件更新的时候，子组件从props里拿的方法是重复定义的，还是一直用的一个？执行上面的代码，可以看出来，每次父组件更新，都要定义一个setChild方法。在这个例子中，子组件的childName是从父组件的props中拿到的。但是当我点击按钮，修改的是父组件的状态，props并没有改变。memo是一个Hoc高阶组件，他可以对组件进行封装，而封装后的组件只有在props变化的时候才会render。将Child组件进行包装，这个时候，只有更改childName属性的时候，子组件才会更新。
2023-06-09 14:08:34
231
原创 React-reacte-app项目实现antD按需加载（2023）
如果想实现AntD的按需加载，那么简单的方式是依靠webpack的能力去实现。为了解决这个问题，我们要在引入antD的时候，将react , react-dom ，dayjs都引入。我如果随意引用版本，比如用了低版本的antD但是用了高版本的dayjs，那么是一定有问题的。但是我们希望的是通过在全局变量里面找到对应的资源，所以我们要在上面的config-overrides.js里配置externals。所以，要知道antD中引入了什么版本的dayjs，再去通过cdn引入对应版本的资源。
2023-06-01 10:14:50
1116
原创 一篇搞定JS的位运算（公式+力扣真题）--- 持续更新
位操作（Bit Manipulation）是程序设计中对位模式或二进制数的一元和二元操作。在许多古老的微处理器上，位运算比加减运算略快，通常位运算比乘除法运算要快很多。在现代编程语言中，情况并非如此，很多编程语言的解释器都会基本的运算进行了优化，因此我们在实际开发中可以不必做一些编译器已经帮我们做好的优化，而就写出代码本身所要表现的意思。在对位运算的学习过程中，可以锻炼写代码的思路，同时在面试过程中，如果使用位运算来对问题进行解决，也会很加分。
2023-01-13 16:04:47
1867
1
原创 原生JS的拖拽属性draggable（详解）
作为h5新增的属性draggable，它能够给与一切的html元素拖动的效果。而在这个属性之下，也有着关于拖动效果的各个方法。而这一篇文章，主要就是说一下关于draggable属性的使用以及工作场景。
2022-12-02 16:38:55
13922
2
原创 React中ref的使用方法和使用场景（详解）
不管在Vue中还是React，如果我们想使用一个元素的DOM，不需要通过JS中操纵DOM的方法，它们提供了一个专属的API就是ref。而Vue中的ref可能比较简单，这一篇主要讲一下如何在React中使用ref，以及使用ref的场景。
2022-10-27 09:39:53
10582
2
原创 React中如何在事件处理的时候传参（详解）
/执行代码 } button onClick = {但是如果有Vue的基础，可以很清楚的看到二者的区别。在Vue中，我们可以直接给fn传递参数。//执行代码 console . log(value) } button onClick = {你会发现，在页面加载的时候，2222已经被打印出来了。但是点击按钮的时候并没有效果。这说明，该方法并没有被绑定在按钮上，而是在按钮加载的时候直接调用了。
2022-09-09 17:01:33
3184
6
原创 React中this.setState方法原理解析（详解）
而这一篇文章，主要是简单的实现一下this.setState方法，为了实现该方法，就要知道this.setState方法具有什么特点。
2022-08-30 19:50:47
1872
原创 React.createElement方法源码解析（原理详解）
而这一篇文章，主要是讲一下React.createElement是如何创建React元素的。
2022-08-22 19:14:20
2308
原创 React中的JSX --- { }的使用
在做react开发的时候，我们知道最后要通过render方法来将React元素挂载到真实的DOM上。而创建一个React元素，可以通过两种方式创建。
2022-08-18 19:50:27
1214
原创 HTTP的报文（详解）
摘要我们对于http的了解，应该在于，我们如果想请求一个资源或者访问一个页面，客户端（我们）应该向服务器发送一个http请求，然后得到响应，才能出现我们想要的资源。但是，我们在发送http请求的时候，到底给服务器发送了什么，服务器又给我们响应了什么。而这就是http报文，所以它也分为了两种，http的请求报文和http的响应报文。顾名思义，也就是客户端发送的就是http请求报文，服务器响应的就是http响应报文。...
2022-03-02 21:16:17
3210
1
原创 Http的各种请求方法（详解）
摘要我们知道，当我们访问各种网页的时候，之所以能够看到页面，根本原因是发送了http请求然后得到了响应，从而页面才会弹出来。再或者我们上传一些照片和视频时，之所以可以上传成功也是因为我们通过http请求来进行上传，从而将资源放在了网上。当客户端像服务端发送请求的时候，针对于不同意图的请求，我们分成了不同的http请求方法。1.GET请求GET方法是最常见也是最简单的http请求方法，它主要用作于获取资源。也就是说我客户端请求什么，你服务器就原样给我返回什么。我请求的是文本，你就保持原样返回；我请
2022-02-12 20:48:17
18087
2
原创 Http缓存 --- 强缓存和协商缓存（详解）
摘要关于缓存，在性能优化上有着很重要的意义，或者说缓存的存在是就是为了提升性能。而缓存也分为强缓存和协商缓存，而这一篇文章。我们在最后介绍二者的区别，前面主要来说一下缓存的过程，加深理解。1.为什么要有缓存？我们设想一下，如果没有缓存，那么浏览器是怎么向服务端请求资源的。不管服务端的资源是否更新，只要我们刷新页面，就一定会向服务器发送请求。但是这次请求的资源和上次的资源并没有什么区别，这就造成了资源的浪费。所以我们引入了缓存的概念，在第一次向服务器请求资源的时候，把资源保存在本地的磁盘，下次
2021-10-20 18:16:55
1594
原创 弹性盒模型（详解）
摘要关于弹性盒模型，属性也是比较多，属性的值也是比较杂，所以看起来也是比较吃力，总是学习的时候似乎已经掌握了，慢慢不用的话一些属性又不会了。这一篇文章，只去理解弹性盒模型的属性，而不会列出所有属性的值。重点在于理解，而非去死记硬背。1.创建弹性盒子所有人应该都知道我们应该使用display:flex来创建一个弹性盒子。但是其实还有另一种创建方式：display:inline-flex。乍一看这个属性和display:block , display:inline-block是不是有一点点像。其
2021-10-18 16:44:24
5590
原创 二叉树的遍历【先序，中序，后序，层级】（详解）
摘要关于二叉树的遍历也是很常见的问题，而最常用的遍历也是标题中的说的四种方式。先序，中序和后序可以采用递归和迭代的方式来完成，也是深度优先的思想，后面会写出递归和迭代的方法。层级遍历主要是借用队列这种数据结构来进行对二叉树逐层遍历，是广度优先的思想。现在我们来写一下每一种的遍历方法。1.中序遍历先说一下中序遍历的方式是什么。对于二叉树的每个节点，从根节点开始，都要先遍历当前节点的左子节点，再遍历当前节点，然后是当前节点的右子节点。简单来说就是左子树 -> 根节点 -> 右子树。递
2021-09-16 11:42:30
2044
1
原创 JS实现二叉搜索树【增删改查】（详解）
摘要如果说一个数据结构的出现一定是因为它能解决某些问题，我们传统的线性表有数组和链表，前者在改查的优势更大，后者在增删的优势更大。但是往往在应用中这些功能我们是都需要用到的，在对数组或者链表的选择上就有了一些决定性。而二叉搜索树是具备了数组改查快和链表增删快的特点而生的一种数据结构。二叉搜索树具有二叉树的特点，并且，每个节点的左子树中所有节点都是比当前节点的值小的，每个节点的右子树所有节点都是比当前节点的值大的。正是这种特点，使它在数据操作和检索操作上具有很高的效率。OK，这一篇我们主要用JS来
2021-09-14 16:59:30
690
1
原创 原生JS实现call，apply，bind方法（详解）
摘要我们知道如果想改变this的指向，我们有三种方法可以实现。call和apply是直接调用，而bind是返回一个方法，不会直接调用。如果我们想了解它更深的话，那么就自己实现出来吧。首先我们想一下，这三个方法的调用者是方法，是任何方法。那既然是这样，所有的方法都可以再次调用这三个方法，所以我们自己写出来的这三个方法一定是写在Function的原型下的。有了这个思路我们就可以进行实现了：call方法首先我们来回顾一下call方法是如何调用的：let p1 = { name: 'lisi'
2021-08-17 10:02:30
1044
原创 原生JS实现Promise（详解）
摘要首先呢，Promise是异步中比较重要的知识点，学习的最好方法就是掌握它的基本原理。所以这一篇主要说一下如何用JS来实现一个自己的promise。构造函数首先我们来看一下我们是如何使用promise的，我们在实例化对象是这么使用的： let p1 = new Promise((resolve, reject) => { let random = Math.floor(Math.random() * 10); if (random > 4) {
2021-08-16 14:41:08
3643
3
原创 使用原生JS封装Vue-Router
摘要前段时间对Vue-router里面的一些方法原理进行了实现，在这里进行整理一下，相比于上一篇实现的axios，这次实现的路由显得更复杂一些。实现的方法主要有push，go，replace以及beforeEach和afterEach的钩子函数。实现的原理主要有URL和页面的响应，以及router-view和router-link。1.hash和history在写之前我们要了解hash和history的区别，主要的区别还是在于hash模式更改路由不需要重新请求，并且URL中路由前面有#。his
2021-08-11 15:53:19
759
原创 使用原生js封装axios（详解）
摘要在vue中，我们调用接口使用的都是axios，使用之前我们也会进行一定的封装，然后再进行使用。在这里，我们主要说一下axios的实现原理，以及如何使用原生的js来自己封装出一个axios。这里实现出几个主要的方法，包括post请求方法，create配置方法，以及拦截器的方法。1.post方法在我们写方法之前，肯定是要先自己写一个类出来，里面的内容先不用写。然后再在类的下面写出post的方法：function iaxios () {}iaxios.prototype.post = f
2021-07-21 17:35:53
7224
原创 JS的事件类型（详解）
摘要Web浏览器可能发生的事件有很多种类型，而这一篇我们针对于不同的浏览器的事件类型来说明一下，我们从DOM3级事件中总结了一下几种类型的事件：事件 类型作用意义UI事件当用户在页面上的元素进行交互时触发焦点事件当元素获得或失去焦点时触发鼠标事件当用户通过鼠标在页面上执行操作时触发滚轮事件当使用鼠标滚轮时触发文本事件当在文档中输入文本时触发键盘事件当用户通过键盘在页面上执行操作时触发当然除了这些类型我们还有一些其他类型的事件，不过在这里
2021-06-02 20:59:24
2491
原创 详解onclick和addEventListener的区别
摘要当我们想要给某个DOM元素绑定事件的时候，最常用的方法是通过on + 事件名字的方式。而在DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener().并且它们都接受三个参数：要处理的事件名，作为事件处理的一个函数，一个布尔值。最后的布尔值如果为false，表示在冒泡阶段调用事件处理函数，如果是true，表示在捕获阶段调用事件处理程序。区别1：同时绑定多个事件我们来想一个问题，我们使用onclick方法可
2021-05-25 12:10:08
2393
3
原创 一篇文章搞懂JS的事件流
摘要当浏览器发展到第四代时，浏览器开发团队遇到了一个很有意思的问题：页面的那一部分会拥有某一个特定的事件。要明白这个问题是什么意思，我们来看一个例子。当我们点击内部的蓝色圆圈的时候，我们点击的不是一个圆圈，而是页面中的所有圆圈。而事件流描述的就是从页面接收事件的顺序。现在我们来介绍一下三种事件流的情况。1.事件冒泡IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套最深的那个节点）接收，然后逐级向上传播到较为不具体的节点。 <div id="div1">
2021-05-25 11:39:27
329
原创 DOM扩展（详解）
摘要尽管DOM作为API已经非常完善了，但为了实现更多的功能，仍然会有一些标准或专有的扩展。这一篇主要来说一下对于DOM1的不足之处的扩展。1.选择符API虽然DOM已经在docement类型下有了几个选择元素的方法，但似乎还是不能满足我们的需求，所以就延伸除了JavaScript库中最常用的一项功能，就是根据CSS选择符选择与某个模式匹配的DOM元素。(1) querySelector()方法该方法接收一个CSS选择符作为参数，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，则返回nul
2021-05-10 21:45:01
593
原创 DOM（文档对象模型详解）
摘要DOM是针对于HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加，移出和修改页面的某一部分。尽管现在我们可以应用各种框架来实现需求，但对于原生的DOM操作还是有必要好好掌握的，这一篇主要就来说一下DOM的重点。1.Node类型DOM1级定义了一个Node接口，该接口将由DOM中所有节点类型实现。这个接口在Javascript中是以Node类型实现的。也就是说，在文档中任何一个部分都可以看成一个节点。(1) 属性nodeType ： 用于表
2021-05-09 19:13:21
467
原创 BOM（浏览器对象模型详解）
摘要如果想在Web中使用JavaScript，那么BOM无疑是真正的核心。BOM提供了许多对象用于访问浏览器的功能，这些功能与任何网页内容无关。这一篇就来说一下BOM对象的核心内容。1.Window 对象BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAscript规定的Global对象。（1）全局作用域这意味着在网页中定义的任何变量，方法和对象，都是在以window为Global对
2021-05-07 21:26:08
1030
5
原创 JS实现类的继承
OK，有了上一节的基础，我们就可以用ES5来实现一个手写的继承了。这里继承的实现方法也是面试中比较常见的问题，我们从写一个最简单的模式，然后通过分析问题所在从而进行改善，最终实现一个比较完美的继承。1.创建一个父类我们如果想创建一个父类，用方法的模式来写，给类添加成员变量和方法，最简的就是这样写。function People(name,age){ this.name = name; this.age = age; this.sayHello = function(){
2021-04-24 13:16:57
368
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人