- 博客(27)
- 收藏
- 关注
RSS订阅原创 Fiber架构与Diff算法
React Fiber 是 React 16 中引入的一种新的渲染架构，它重新实现了调度算法和渲染流程。它将原来的同步渲染方式改为异步渲染，使得 React 应用能够更好地控制任务的优先级，实现更流畅的用户界面。
2025-04-09 11:13:50
624
原创 React路由
SPA：单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。优点：具有桌面应用的即时性、网站的可移植性和可访问性用户体验好、快，内容的改变不需要重新加载整个页面，局部刷新缺点：不利于SEO优化首次渲染速度慢为什么需要路由？单页应用（SPA）中通过 URL 映射不同组件，实现无刷新页面切换。保持浏览器历史记录同步（前进/后退）。
2025-04-09 10:23:02
120
原创 资源加载优化
2）preload 加载的 JS 脚本其加载和执行的过程是分离的，即 preload 会预加载相应的脚本代码，待到需要时自行调用。defer模式下，JS的加载也是异步的，defer资源会在 DOMContentLoaded执行之前，并且defer是有顺序的加载。如果有多个设置了 defer 的 script 标签存在，则会按照引入的前后顺序执行，即便是后面的 script 资源先返回。async模式下，它的加载是异步的JS不会阻塞DOM的渲染，async加载是无顺序的，当它加载结束，JS会立即执行。
2025-04-08 11:58:36
351
原创 Web worker
Web Worker 通过将耗时任务移至后台线程，显著提升了 Web 应用的响应性。其基于消息的通信机制确保了线程安全，适合处理非 UI 任务（如计算、数据获取）。尽管存在一定限制，但在复杂场景中（如数据处理、实时应用）是不可或缺的工具。
2025-04-08 11:41:18
894
原创 HTTP缓存机制
合理配置HTTP缓存可显著降低服务器负载并加速页面加载。核心是通过控制强缓存时间，利用ETag或实现高效协商缓存，结合资源版本化管理确保更新及时生效。实际应用中需根据资源类型和安全需求灵活选择策略。
2025-04-08 09:48:09
420
原创 事件循环 Eventloop
JavaScript是一种单线程语言，有同步和异步的概念，这就解决了代码阻塞的问题同步任务：是直接放在主线程上排队依次执行，异步任务：会放在任务队列中，若有多个异步任务则需要在任务队列中排队等待，任务队列类似于缓冲区，任务下一步会被移到调用栈然后主线程执行调用栈的任务。
2025-04-08 09:27:32
462
原创 IntersectionObserver、scrollIntoView
IntersectionObserver接口提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。threshold 一个包含阈值的列表, 按升序排列, 列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。root 所监听对象的具体祖先元素。如果为true ，元素的顶端将和其所在滚动区的可视区域的顶端对齐。如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。定义滚动是立即的还是平滑的动画。接口的方法会滚动元素的父容器，主动将元素滚动到视口内的指定位置。
2025-04-07 18:59:06
800
原创 说说 Real DOM 和 Virtual DOM 的区别？优缺点？
Real DOM是浏览器中实际存在的文档对象模型，而Virtual DOM是React等库用来优化性能的一个抽象概念。虚拟DOM其实只是一个包含了标签类型type，属性props以及它包含子元素children的对象。和是前端开发中与页面渲染相关的核心概念，它们的区别和优缺点直接控制：直接操作浏览器原生 API，适合简单场景或需要精准控制 DOM 的场合。实时性：修改后立即生效，无需中间处理流程。性能瓶颈：频繁操作 DOM 会导致多次重绘（Repaint）和回流（Reflow），性能急剧下降。
2025-04-07 18:32:38
484
原创 redux、react-redux
reducer是个纯函数，接收state数据，返回加工的state数据，接受两个参数，state初始默认值，action对象，从action对象中获取type，data，根据type来更新store数据。redux中通过sunscribe来监听store改变来更新，react-redux通过provider传入的store自动监听。异步action，action返回值为函数，异步action一般会调用同步action，异步action不是必须要用的。connect() 接收四种不同的、皆可选的参数。
2025-04-07 18:16:48
630
原创 React的事件机制？
React 17以前注册的事件最终会绑定在document这个DOM上，而不是React组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在document上，其他节点没有绑定事件)React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，在React中这套事件机制被称之为合成事件。阻止合成事件与最外层document上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation()
2025-04-07 17:53:53
699
原创 React中的key有什么作用？
list的节点始终是动态生成的，每次数据的变更都会导致list需要map生成一份新的列表（宏观角度确实是重新遍历生成），站在react的角度，它需要考虑list数据规模大小是否会造成性能问题，所以在diff源码层才有了当key与type都相同时，react会利用旧fiber节点的数据clone一个新的fiber节点，而不是重新创建一个全新的fiber节点。而对于list结构数据会经常变动，当头部或中部插入新数据时，逐层对比会因为对比错位而失效，所以需要key来缓存旧节点，从而借用map修正逐层对比。
2025-04-07 15:24:27
424
原创 React error boundary
React16之前,组件内部的错误经常会引出莫名奇妙的异常，这些错误还不能在组件中去审查，React 16引入了一个新的概念——错误边界。特点：只能捕获后代组件生命周期产生的错误（主要是render()），不能捕获自己组件产生的错误和其他事件在合成事件，定时器中产生的错误。错误边界 (error boundary)用来捕获后代组件错误，渲染出备用页面。并不会渲染那些发生崩溃的子组件树。作用点：错误边界目前只在类组件中实现，生产环境中起作用。可以当一个常规组件使用。
2025-04-07 10:57:08
112
原创 React组件的state和props有什么区别？类组件的事件怎么绑定
只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。props就是外部传递给组件的属性，在函数组件中，可以直接通过形参props访问，而在class组件中，我们一样能通过this.props访问到外部传递的属性。state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。
2025-04-07 10:52:23
231
原创 Hooks使用useReducer
useReducer是 React 中用于管理复杂状态逻辑的 Hook，尤其适合处理包含多个子值、依赖前一个状态或需要统一管理的场景。
2025-04-07 10:38:48
452
原创 Hooks使用useMemo,useCallback
按需缓存：仅在性能敏感场景使用（如大数据处理、高频交互）。配合React.memo：避免子组件因父组件无关状态更新而重渲染。优先用函数式更新：解决闭包陷阱（如合理使用useMemo和可以显著提升 React 应用性能，但需结合具体场景权衡利弊。
2025-04-02 15:56:57
470
原创 Hooks使用useEffect
useEffect 处理副作用的useEffect(setup,dependencies),setup初始化，是一个函数，dependencies依赖项，是一个数组。
2025-04-02 13:33:11
756
原创 Hooks使用useState
const [state, setState] = useState(initialState)传入唯一的参数: initialState，可以是数字，字符串等，也可以是对象或者数组。返回的是包含两个元素的数组：第一个元素，state 变量，setState 修改 state 值的方法。1.Hooks整个作用域最顶层，不是代码书写的最顶层，2.Hooks不要写到块级作用域3.useState初始值如果是一个函数，那必须是没有参数的纯函数（函数执行不依赖外部因素），react调用useState初始参
2025-04-02 09:39:06
541
原创 React Hooks 的闭包陷阱
闭包陷阱的原因是由于闭包捕获了旧的变量，解决方法包括正确设置依赖数组、使用ref保存最新值、清理副作用、函数式更新state等。需要根据具体情况选择合适的解决方案。基本原则：优先通过依赖数组声明依赖，让 React 自动管理闭包。性能敏感场景：使用 useRef 存储可变值，避免副作用重复触发。状态更新：优先使用函数式更新（setState(c => ...)）。复杂逻辑：考虑 useReducer 或自定义 Hook 封装。
2025-04-02 09:12:53
683
原创 javaScript预编译
javaScript的执行过程先扫描整体语法语句，如果存在逻辑错误或者语法错误，那么直接报错，程序停止执行，没有报错的，开始从上到下解释一行执行一行。变量提升会提升变量声明，不会提升变量赋值，一般是针对var声明的变量。预编译代码执行前的操作，会变量提升、函数提升（具名函数）1.声明变量,形参和变量声明。2.实参值赋值给形参。
2025-03-26 12:21:32
112
原创 requestAnimationFrame和setTimeout
动画或高频更新场景始终优先使用 requestAnimationFrame，而 setTimeout 更适合非动画的延时逻辑。专为浏览器动画设计，确保回调函数在下一次浏览器重绘前执行，与屏幕刷新率（通常 60Hz，即约 16.7ms/帧）同步，从而实现流畅的动画效果。通用的延时执行工具，用于在指定毫秒后执行回调，不保证精确性，适用于非动画的异步任务（如延迟加载、一次性操作等）持续运行：即使页面在后台，仍会执行回调，可能浪费资源。高效渲染：浏览器自动优化，适合高频更新（如动画）。
2025-03-25 15:09:03
234
原创 apply和call,bind的区别
三者都可以改变函数的this对象指向三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入bind是返回绑定this之后的函数，apply、call 则是立即执行。
2025-03-24 18:32:22
270
原创 数据类型转化、数据类型判断
]是false,[]==false,[]通过valueOf()\toString转化为''''==false,两边转数字0==0。对象 == 非对象 非对象是 number,string,对象就原始类型比较，对象比较 valueOf，toString 方法原始类型比较 ['5','6']=='5,6'数组==值 数组转成数字/字符串 [5]==5,['5']==5,[5]=='5',['5']=='5'其他==布尔值 布尔值先转数字再比较 true==1 false==0，[]==!
2025-03-24 17:52:59
544
原创 字符串常见方法
注意： 如果参数 from 和 to 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。该方法的参数 regexp 是必需的，规定要匹配的模式的 RegExp 对象。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。该参数可指定返回的数组的最大长度。一个非负的整数，比要提取的子串的最后一个字符在 string 中的位置多 1。该方法也是接收两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。
2025-03-24 17:28:28
905
原创 什么是深拷贝和浅拷贝?以及怎么实现深拷贝和浅拷贝?
拷贝前后对象的基本数据类型互不影响，拷贝前后对象的引用类型因共享同一块内存，会相互影响。如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，拷贝的就是内存地址。深拷贝开辟一个新的栈，两个对象属完成相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。// const cloneObj={...obj}赋值语句指向都是同一栈，基本类型指向栈中的值，引用数据类型指向栈中的地址。函数库lodash的_.clone方法;
2025-03-24 17:01:15
151
原创 数组常见的方法及返回值
返回一个新的数组对象，这一对象是一个由 start和end决定的原数组的浅拷贝（包括 start，不包括 end),start 和 end 代表了数组元素的索引。没有值现存数组浅拷贝。对数组的元素进行排序，返回为排序后的数组。移除或者替换已存在的元素和/或添加新元素，返回值为删除元素的数组，没有删除返回空数组，会改变原数组。筛选函数实现的测试的所有元素，return返回一个新数组,如果没有返回一个空数组，需要return。指定的元素(一个或多个)添加到数组的末尾，返回值为新的数组长度，会改变原数组。
2025-03-24 16:19:28
320
原创 函数参数归一化
这样固定字段不太灵活，如果需求在一直变化，函数需要写很多个，可能下次需求以sex分组，代码做一次改进。还可能遇到组合字段的分类，例如'25-男'，上面方法就没法实现，就需要对代码进行进一步改进。
2025-03-21 16:19:45
93
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人