旺旺大王Oᴗoಣ-优快云博客

原创 React 中的 key 有什么作用？

React 的key是：通过唯一标识帮助 React 精准匹配新旧节点，避免全量更新（如在列表增删时减少不必要的 DOM 操作）；：当列表顺序变化时，相同key的组件实例会被复用，避免状态（如输入框内容）意外丢失；：解决因索引变化导致的组件实例错位问题。最佳实践是使用（如item.id），避免使用数组索引index（动态列表可能引发 bug）。若数据无唯一 ID，可用uuid生成，但需注意性能影响。

2025-06-19 09:45:00 520

原创说说对Fiber架构的理解?解决了什么问题?

Fiber 架构是 React 16 引入的，核心解决问题。：将虚拟 DOM 节点升级为包含指针的 Fiber 节点，形成链表结构（非递归树），支持；：将渲染拆分为小任务单元，通过实现——高优任务（如用户输入）可中断渲染，保证界面流畅；：为不同更新标记优先级（如动画>数据更新），确保关键交互即时响应。它带来的直接收益是（React 18 基础），使复杂应用保持流畅，并为SuspenseTransition等高级特性铺平道路。

2025-06-18 18:30:18 895

原创 React Jsx转换成真实DOM的过程

JSX 转换成真实 DOM 分为四个关键阶段：1. 编译阶段：Babel 将 JSX 编译为 React.createElement() 调用；2. 虚拟 DOM 创建：createElement 生成描述 DOM 结构的轻量 JS 对象；3. 协调过程：React 对比新旧虚拟 DOM 树，通过 Diff 算法找出最小变更；4. DOM 提交：ReactDOM 将变更批量更新到真实 DOM。

2025-06-18 17:53:46 1015

原创 JS实现数组去重（重复的元素只保留一个）

JS实现数组去重（重复的元素只保留一个）1.遍历数组法2.数组下标判断法3.排序后相邻去除法4.优化遍历数组法（推荐）5.ES6实现6.利用Object 键值对1.遍历数组法它是最简单的数组去重方法（indexOf方法）实现思路：新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中；var arr=[2,8,5,0,5,2,6,7,2];function unique1(arr){ var hash=[]; for (var i = 0; i &lt

2020-07-31 15:20:08 1560

原创 px/em/rem的三者区别及其应用

px/em/rem的区别与应用1、1px有多大？我们先了解几个概念：关键概念设备像素：设备屏幕实际拥有的像素点一般来说：宽度方向有1920个像素点，长度方向有1080个像素点。逻辑像素：CSS的像素单位(就是我们这次要讨论的csspx)，其尺寸大小是相对的，也称为独立像素分辨率：屏长的设备像素 × 屏宽的设备像素（1920* 1080） ppi（pixels per inch）：像素密度，表示沿对角线每英寸长度的像素数目（单位是dpi）,越大显示的越细腻缩放因子（Scale Factor

2020-06-22 20:41:02 511

原创 CSS都有哪些选择器呢？

CSS都有哪些选择器？一、基本选择器*通用元素选择器，匹配任何元素E 标签选择器，匹配所有使用E标签的元素.info class选择器，匹配所有class属性中包含info的元素#footer id选择器，匹配所有id属性等于footer的元素二、多元素的组合选择器E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔E F 后代元素选择器，匹配所有属于E元素...

2020-02-26 22:28:37 263

原创 src与href的区别简述

简述一下src与href的区别1、src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。2、src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。 <script src =”js.js”></script>...

2020-02-26 00:19:36 555

原创闭包的定义及生成条件，闭包的作用及注意事项

闭包的生成有三个必要的条件：在函数a内部间接或者直接return一个函数b注：直接return一个函数：return function(){}间接return一个函数：return{bbb:function(){}}return一个对象或者数组，这个对象中有函数在函数b中使用函数a的私有变量用一个变量接收函数b，形成一个不会销毁的执行空间，如果不接収，执行a（）,会被回收...

2020-02-24 19:24:31 1541 1

原创同源策略是什么？

同源策略同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。它是由Netscape提出的一个著名的安全策略。所有支持JavaScript的浏览器都会使用这个策略。满足同源的三个条件：所谓同源是指，域名、协议、端口相同。...

2020-02-23 22:24:16 621

qq_43539439的博客