- 博客(22)
- 收藏
- 关注
RSS订阅原创 css flex
如果所有弹性盒子的flex-grow属性都为0，则它们将等分剩余空间。如果一个弹性盒子的flex-grow属性为1，而其他弹性盒子的flex-grow属性为0，则前者将占据剩余空间的全部。可以设置为具体的长度值或百分比，也可以设置为content、fit-content、min-content、max-content等特殊值。如果所有弹性盒子的flex-shrink属性都为1，则它们将等比例收缩。CSS的flex属性是flex-grow、flex-shrink和flex-basis这三个属性的组合。
2024-03-25 15:05:58
104
原创 js当中的双等于运算符
一种特殊，null == undefined 是true，和其他类型对比是false。复杂数据类型，判断二端对象指向的地址是否一致。有一端出现了对象 ==》 对象转原始类型。NaN 和任何类型比较都是 false。布尔类型 ==> 布尔转数字进行比较。在双等运算符中，分为二种情况。
2024-03-25 14:43:00
298
原创 Symbol中的方法
这些方法可以让您更灵活地操作符号，例如在全局范围内共享符号，或者使用符号来定义可迭代的对象。类型还有一些内置的方法，允许您对符号进行操作和检查。在 JavaScript 中，
2024-03-14 14:02:59
342
1
原创 JavaScript 中的Symbol 简单介绍
是 ECMAScript 6（ES6）中引入的一种原始数据类型。它用于为对象属性创建唯一标识符。与字符串或数字不同，符号保证是唯一的，这意味着即使您使用相同的描述创建多个符号，它们也永远不会相等。符号通常用作对象的键，以避免命名冲突，并在不希望发生意外冲突的情况下向对象添加元数据。等其他功能一起使用，以在 JavaScript 中实现可迭代集合或自定义行为。它们提供了一种在对象中创建私有或隐藏属性的方式，因为符号不会通过。JavaScript 中的符号。在 JavaScript 中，符号通常与对象属性和。
2024-03-14 14:01:09
461
1
原创 React Diff
React Diff算法的实现是React中的核心部分，它决定了在更新UI时应该对DOM进行哪些更改以保持与虚拟DOM的同步。React Diff的实现基于虚拟DOM树的比较，以确定需要进行更新的部分，并尽量减少DOM操作的数量，以提高性能。React Diff算法的实现细节是React框架内部的实现细节，通常是高度优化的，以提高性能并尽可能地减少DOM操作。新的虚拟DOM树和之前的虚拟DOM树进行比较，找出两者之间的差异。：在React中，组件渲染时会生成对应的虚拟DOM树，表示组件的UI结构。
2024-03-13 16:31:40
507
原创 new ResizeObserver
是一个相对较新的 JavaScript API，允许开发人员观察 DOM 元素大小的变化。它提供了一种有效地检测网页上元素尺寸变化的方式，这对于实现响应式设计、执行布局计算或基于元素调整大小触发操作非常有用。它接受一个回调函数作为参数，该函数将在观察到的元素大小发生变化时被调用。在回调函数中，可以通过。替换为与你要观察大小变化的元素匹配的选择器。属性访问观察到的元素的新大小。
2024-03-12 16:42:14
422
1
原创 react-fiber 学习
四、支持并发处理（结合第3点理解，面对可变的一堆任务，react始终处理最高优先级，灵活调整处理顺序，保证重要的任务都会在允许的最快时间内响应，而不是死脑筋按顺序来）一、支持增量渲染，fiber将react中的渲染任务拆分到每一帧。（不是一口气全部渲染完，走走停停，有时间就继续渲染，没时间就先暂停）（让优先级高的运行，比如事件交互响应，页面渲染等，像网络请求之类的往后排）这样设计的好处就是在数据层已经在不同节点的关系给描述了出来，即便某一次任务被终止，当下次恢复任务时，这种结构也利于。
2024-03-06 16:07:25
344
1
原创 taro -react 学习
build 模式（去掉 --watch 参数） 将不会监听文件修改，并会对代码进行压缩打包。yarn dev:weapp // 打包dist --watch 可以做到实时监听。>yarn build:weapp // 可以打包，但是没有实时监听。dev 模式（增加 --watch 参数） 将会监听文件修改。pack.json 文件当中有设配各种小程序的命令。打包工具 --- 推荐 webpack 5。yarn 拉取依赖要等5分钟左右。trao init 项目名称。选择默认或者 自定义模板。
2024-02-26 16:04:45
448
1
原创 js console 中的内置方法--整理
打印出该行代码被执行的次数，可选的标签参数用于对执行次数进行计数，方便统计代码执行次数。：创建一个分组，在其中的所有输出都将可折叠。这在需要输出大量信息时，可以使输出更加清晰。：如果条件不满足，则在控制台中打印指定的消息。这对于简单的断言测试非常有用。：打印函数的调用栈，显示函数调用关系，有助于追踪代码的执行路径。方法停止计时，并在控制台中显示执行时间。：用于计算某段代码的执行时间。
2024-02-26 09:55:54
325
1
原创 React 当中如何动态引入本地背景图片
如果图片地址在项目目录下，我们直接引入 style={{ backgroundImage: item.backgroundImage }}， 这样是解析不成功的。这里有二种解决方法，一种是前端自己解决。我们都知道背景图片可以通过 backgroundImage： url();去引入，如果把 url 部分是动态渲染的，我们该如何引入。一、将图片保存在public目录下，这样使用 ./ 直接获取，能够完成动态渲染。二、将图片 http 地址保存在 服务端返回线上图片地址。
2024-02-23 15:36:59
600
1
原创 浏览器渲染主线程是如何工作的？
新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务。这样一来，就可以让每个任务有条不紊的、持续的进行下去了。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即。我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我。浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时。1. 在最开始的时候，渲染主线程会进入一个无限循环。整个过程，被称之为事件循环（消息循环）
2024-02-22 14:50:01
319
1
原创 浏览器的进程和线程
如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。网络进程内部会启动多个线程来处理不同的网络任务。默认情况下，浏览器会为每个标签⻚开启一个新的渲染进程，以保证不同的。一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行。有了进程后，就可以运行程序的代码了。代码，该线程称之为主线程。线程处理不同的任务。
2024-02-22 14:47:02
329
1
原创 React 项目当中使用less，区分cra/vite
首先，确保你的 React 项目已经配置支持 Less。你可以使用 Create React App 这样的工具来创建一个支持 Less 的 React 项目，或者手动配置 webpack 或 Parcel 等构建工具来支持 Less。你可以从 Yarn 的官方网站 (https://yarnpkg.com/) 下载并安装适用于你的操作系统的版本。在 React 项目中使用 Less（一种 CSS 预处理器）可以让你更方便地管理样式。这将使用 Vite 的模板创建一个名为。
2024-02-19 10:49:52
792
1
原创 react18 - 新hooks ——— useDeferredValue
例如，在用户更改搜索关键字时，我们可能需要在搜索框下方显示搜索结果。但是，由于使用了 useDeferredValue，搜索结果可能不会立即更新，而是在下一帧或更远的时间更新。如果使用 useDeferredValue，我们可以将状态的更新推迟到下一帧或更远的时间。这意味着即使用户在短时间内频繁输入搜索关键字，我们也可以避免频繁的渲染和 DOM 更新，从而提高应用程序的性能。为何要推出useDeferredValue这个hooks，要解决的是react渲染频率过高产生的性能问题。
2023-06-14 10:12:29
130
1
原创 react 18学习小计
如果项目中有通过promise、setTimeout、原生事件处理函数去解决批处理的问题在React18中将不会生效了。一直到React18发布，React17都没有任何更新，可以说React17只是作为React18的垫脚石.所有更新都会自动进行批处理。多次更新将会合并成一次更新，从而降低渲染次数提高性能。批处理就是多个状态更新合并成一个次更新。（视图层将多次渲染合并成一次渲染）我们只在React18中进行批处理。17中只有三个小版本，分别是。的更新都不会进行批处理。
2023-06-13 10:05:32
99
1
原创 Ant react 组件报错解决整理 4.4
解决：默认一行显示三个，一个占位一行，如果想占多列，请使用表格。解决：将Drawer组件 visble 改为 open；换位 item 写法。
2023-04-04 10:15:31
3324
1
原创 宏任务和微任务的理解
我理解js代码在运行开始，讲所有js代码放入宏任务，然后进入到所有js的执行队列，然后执行第一作用域下的同步代码，至于异步代码，分为我们的宏任务和微任务promise里面是同步，promise.then()是微任务，setTimeout是宏任务。第一次执行的是宏任务的同步代码，把宏任务存起来，微任务运行完毕之后执行，而后分解存起来的宏任务，而后分宏任务和微任务，而后进行一次宏任务，而后清空微任务，而后在宏任务，依次执行。第二个是每执行玩一次宏任务就要清空一次微任务；第一是js执行机制是先同步后异步执行；
2023-02-18 10:07:00
70
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人