yutao618-CSDN博客

原创 React Dom-diff之多节点

react中DOM DIFF的三个规则只对同级元素进行比较，不同层级不比较不同的类型对应不同的元素可以通过key来标识同一个节点react中DOM DIFF的遍历规则第一轮如果key不同，则直接结束本轮循环newChildren和oldFiber遍历完，结束本轮循环key相同而type不同，标记老的oldFiber为删除，继续循环key相同type相同，则可以复用老节点（oldFiber）,继续循环第二轮newChildren遍历完而oldFiber还有，遍历剩下的所

2021-12-17 10:34:53 356

原创 React Dom-diff之单节点diff

上篇文章已经了解到了react 的初次渲染，这篇文章来看下react中的单节点Dom-diffrender改造import { createFiberRoot } from './ReactFiberRoot';import { updateContainer } from './ReactFiberReconciler';function render(element, container) { //1.创建一个fiberRoot, 它其实指向是我们的div#root这个容器 let.

2021-12-17 10:31:05 288

原创 react Dom-diff之初次渲染

创建项目，修改内容yarn create react-app react-dom-diff使用react官方脚手架create-react-app搭建处理的项目如下：react-dom-diff├── README.md├── node_modules├── package.json├── .gitignore├── public│ ├── favicon.ico│ ├── index.html│ └── manifest.json└── src ├── App

2021-12-08 18:45:17 485

原创 rollup打包原理以及实现rollup

前言上一篇文章已对rollup具体使用做了详细的介绍，这篇文章学习下rollup原理。由于篇幅有限，拉取了rollup最初版本的代码（0.3.0版本）。我的目的是学习 rollup 怎么打包的，怎么做 tree-shaking 的。而初版源码已经实现了这两个功能（半成品），所以看初版源码已经足够了。前置知识rollup 使用了 acorn 和 magic-string 两个库。为了更好的阅读 rollup 源码，必须对它们有所了解。"dependencies": { "acorn": "^1.1

2021-05-27 15:29:18 6198 1

原创 rollup详细使用教程

rollup（下一代ES模块捆绑器）是什么请查看官网介绍注意不要看Rollup.js 中文网，因为这是别人翻译的，不是实时更新的，我之前看这个老是安装出错之前在网络上查找过相关的rollup使用，有些文章很概念不易理解，没有具体步骤；有些文章步骤不够详细，没有来龙去脉。所以打算整理个文章给后来者减少弯路。我保证此文真的是手把手教学，很接地气，因为我是边建工程边使用边写文章，不是某个项目里的代码，所以代码清晰，没有冗余。为什么不用webpack一说到打包工具大家都想到webpack，因为我们用.

2021-04-29 17:00:17 11712 3

原创小程序中实现token过期重新登录再重新请求业务接口

小程序中实现token过期重新登录再重新请求业务接口首先还是来看下小程序官方给出的小程序登录流程：小程序官方登录地址小程序官方登录流程图我们这里所说的token就是指的官方说的自定义登录态，token一般都是有时效性，按照此流程，当token失效的时候，页面在请求接口的时候服务端肯定会认为token是非法的，此时就需要小程序端重新获取新的token，然后继续接着后面的流程走。一般服务端都会给一个特定的状态码标记需要重新获取token，后面的场景我们都以服务端返回code码401认为需要去登录。

2021-03-18 15:03:11 8568 9

原创小程序swiper 自定义样式修改

小程序swiper 自定义样式修改在我们做项目的时候，经常会使用到swiper组件做一些轮播效果，但是碰到这样一个问题：小程序原生的swiper样式满足不了设计稿的需求。这样的话，我们就必须手动的去改小程序原生的swiper的样式了。场景1：一是swiper-item中图片或者元素不是100%的宽度，而是有固定的宽度二是indicatorDots也是自定义出来的html主要代码：<view class="banner-wrap"> <swiper class="s

2021-03-10 11:06:42 2027 2

原创数据结构简单理解

数据结构与算法栈什么是栈数据结构栈是一种遵从后进先出（LIFO）last-in-first-out原则的有序集合。新添加的或待删除的元素都保存在栈的末尾，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。实现一个栈// 栈的创建class Stack { constructor() { // 用数组来存储 this.items = [] } // 添加一个（或几个）新元素到栈顶 push(val) { this.items.push

2020-09-18 15:25:04 262

原创 vuex原理以及实现

vuex官方文档Vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会

2020-09-10 17:26:15 1212 2

原创 typora+picgo+gitee图床使用教程

typora+picgo+gitee图床使用教程文章目录typora+picgo+gitee图床使用教程PicGo相关下载gitee码云图片仓库设置PicGo增加插件typora相关版本要求：设置验证图片上传使用下载地址PicGo相关此教程核心是要搞定PicGo的配置，PicGo 快速上传图片并获取url连接的工具，win,mac都可以用。而且支持很多图床：七牛、腾讯云、又拍云、github、阿里云等等，有桌面状态栏直接拖拽上传，很方便。最终要的是可以和typora结合使用下载PicGo官方下

2020-08-14 18:40:39 434

原创 javaScript中bind实现

思路拷贝源函数:通过变量储存源函数使用Object.create复制源函数的prototype给fToBind返回拷贝的函数调用拷贝的函数：new调用判断：通过instanceof判断函数是否通过new调用，来决定绑定的context绑定this+传递参数返回源函数的执行结果参考链接JavaScript深入之bind的模拟实现深度解析bind原理、使用场景及模拟实现第一版没有参数var foo = { value: 1};function bar() {

2020-08-14 11:48:28 501

原创 JavaScript中New的实现

1.构造函数在了解和使用New之前，我们有必要先熟悉一下构造函数。面向对象编程的第一步，就是要生成对象。前面说过，对象是单个实物的抽象。通常需要一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成。典型的面向对象编程语言（比如 C++ 和 Java），都有“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。JavaScript 语言

2020-08-14 10:54:16 267

原创 Promise的源码实现（完美符合Promise/A+规范）

Promise的源码实现（完美符合Promise/A+规范）Promise是前端面试中的高频问题，大多数公司，都会问一些关于Promise的问题。那是因为前端异步一直是老生常谈，promise更是绕不过去的话题，那么除了会使用promise之外，能否尝试自己封装一个promise呢？如果你能根据PromiseA+的规范，写出符合规范的源码，那么我想，对于面试中的Promise相关的问题，都能够给出比较完美的答案。Promise/A+规范地址中文翻译地址英文原版地址1.结合Promise

2020-08-14 10:40:04 639

yutao618的博客