- 博客(21)
- 收藏
- 关注
RSS订阅原创 React 的代码分割与懒加载
摘要：本文介绍如何使用React.lazy和Suspense实现组件动态加载，优化页面性能。通过代码分割将大文件拆分为小文件，按需加载不同页面组件（主页、关于页、联系我们页）。核心实现包括：1）使用React.lazy动态导入组件；2）用Suspense包裹组件并设置加载占位符；3）结合路由实现页面切换时的动态加载。这种方法能显著减少初始加载时间，提升首屏性能。文中还提供了与react-router配合使用的示例，并强调了错误处理和用户体验优化的注意事项。
2025-12-17 11:22:28
346
原创 useEffect 依赖遗漏问题
React useEffect依赖项遗漏问题解析：当useEffect内部使用了状态变量（如count）却未将其加入依赖数组时，会导致闭包问题，始终获取初始值（如count始终为0）。正确做法是将所有依赖的状态变量（如[count]）加入依赖数组，这样副作用才能感知最新状态。开发中应：1) 严格声明所有依赖项；2) 空数组[]表示仅执行一次；3) 使用useCallback优化函数依赖。合理配置依赖数组可避免性能问题和状态不一致错误。
2025-12-17 11:18:51
192
原创 合理使用useEffect，避免不必要的副作用
React中useEffect依赖数组配置不当会导致性能问题：未配置依赖数组时，每次渲染都会触发副作用（如示例中count和name变化都执行）；依赖项遗漏则无法感知最新状态。优化方案是正确设置依赖数组，如示例改为仅在count变化时执行，避免name更新时的无效调用，从而提升性能。合理配置依赖项是优化useEffect副作用的关键。
2025-12-16 20:52:53
91
原创 Axios网络请求优化（缓存）
本文介绍了两种优化网络请求的方法：1)使用缓存机制避免重复请求，通过Map对象存储已请求数据，再次请求时直接从缓存获取；2)利用AbortController取消不需要的请求，节省资源。文中提供了具体的代码实现示例，包括带缓存的axios封装和可取消请求的实现，展示了如何在实际项目中应用这些优化技术。
2025-12-16 20:45:07
163
原创 前端工具函数utils
/** * start => 工具函数： * regStr 多个 空格|换行符|逗号 换成单个逗号 * removeEmpty 移除对象里面各种空值情况 * isEmpty 非空验证 如果是undefined， null， ''， NaN，false，0，[]，{} ，空白字符串，都返回true，否则返回false *//** * 去除对象中所有符合条件的对象 * @param {Object} obj 来源对象 * @param {Function} isEmpty 函数验证每.
2025-12-12 01:08:17
106
原创 React源码原理+虚拟Dom+Fiber架构原理+diff算法（1）
本文通过实现简易React框架来解析其核心原理，主要包括：1）使用createElement方法创建虚拟DOM树结构；2）实现Fiber架构，通过workLoop和performUnitOfWork函数进行任务调度和时间切片处理；3）采用reconcileChildren算法进行DOM差异对比；4）使用requestIdleCallback实现空闲期渲染优化。代码展示了从虚拟DOM创建到Fiber树构建，再到DOM更新的完整流程，包括文本节点处理、属性更新和节点删除等核心功能，帮助深入理解React底层工作
2025-12-12 00:39:17
214
原创 定义一个 TypeScript 泛型 Concat＜T, U＞，它接受两个数组类型 T 和 U，并返回一个合并后的新数组类型
TypeScript 中可以通过泛型结合数组展开语法实现数组合并类型。TypeScript 中可以通过泛型结合数组展开语法实现数组合并类型。
2025-07-18 16:52:57
237
原创 react-native 修改Android包名（亲测可用） - Tiramisu.man - 博客园
react-native 修改Android包名（亲测可用） - Tiramisu.man - 博客园。
2025-06-05 20:37:07
216
原创 js手写实现 call、apply、bind
面试的时候如果遇到需要手写代码，手写实现apply,call,bind也是问的比较多的，今天好好学习一下，怎么手写实现。 this绑定
2022-10-25 15:30:13
551
原创 封装Object.prototype.toString.call（） replace $1$2....使用
replace $1$2... 使用 封装Object.prototype.toString.call（）
2022-10-12 14:58:02
366
原创 html中显示\n为换行符
<p style="font-size:16px;white-space: pre-line;">{{item.job_content}}</p> p{ white-space: pre-line; }
2021-10-14 11:20:01
5050
原创 React Hook 入门到精通（ useState | useReduce、useEffect、useContext、useRef、useCallback | useMemo ）
Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。useState | useReduce 的使用import React, { useState, useReducer } from 'react'// 创建reduceconst ageReduce = (state, action) => { switch (action.type) { case 'add': retur.
2021-09-12 00:40:10
1759
原创 前端代码规范，移动端，pc端css初始化
附上两个比较好的前端代码规范：京东凹凸实验室前端代码规范.网址是：Aotu.io - 前端代码规范,如果你们公司没有具体的前端代码规范，你完全可以自己按照这套规范来编写。里边包括了HTML规范、图片规范、CSS规范、命名规范和JS规范。优点是清晰、简单、不复杂。近一年来，我工作中的代码都是安装这个标准来写的。腾讯前端代码规范网址是：TGideas文档库我经常看腾讯的前端博客，也阅读他们的开源项目。我认为腾讯的前端代码规范是优秀的。所以第二个推荐腾讯的代码规范文档库TGideas...
2021-09-10 23:45:23
440
原创 图片设置宽高相同，宽设置100%高怎么设置同宽
<style>.image-header{ position: relative; width: 100%; height: 0; padding-top: 100%;}.image-header img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}</style><div class="image-header"> <im.
2021-09-01 18:14:44
458
原创 虚拟DOM与DOM Diff 的原理
虚拟DOM虚拟DOM是和真实DOM相互对应的它是什么一个能代表 DOM 树的对像，它通常含有标签名、标签上的属性、事件监听和子元素等，以及其他属性。它有什么优点（为什么用它）1、减少DOM的操作：虚拟DOM 可以将多次操作和为一次操作，比如你添加1000个节点，是一个接一个操作的。（减少DOM操作的次数）虚拟DOM借助DOM diff 可以把多余的操作省掉，比如你添加1000个节点，只有10个是新增的。（减少DOM操作的范围）2、跨平台：虚拟DOM不仅可以变成DOM，还可以变
2020-11-30 11:50:32
394
原创 虚拟 DOM 的优缺点？
虚拟 DOM 的优缺点？什么是虚拟dom用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中,反应到实际的dom树,减少了dom操作.虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for引入key值进行区分.优点：保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 D.
2020-11-30 10:35:24
4795
原创 常见 Promise 面试问题
前端面试过程中，基本都会问到 Promise，如果你足够幸运，面试官问的比较浅，仅仅问 Promise 的使用方式，那么恭喜你。事实上，大多数人并没有那么幸运。所以，我们要准备好九浅一深的知识。常见的promise面试问题我们看一些 Promise 的常见面试问法，由浅至深。了解 Promise 吗？ Promise 解决的痛点是什么？ Promise 解决的痛点还有其他方法可以解决吗？如果有，请列举。 Promise 如何使用？ Promise 常用的方法有哪些？它们的作用是什么..
2020-11-23 11:16:04
3657
原创 vue项目刷新当前页面
需求场景：有时候我们在vue项目页面做了一些操作，需要刷新一下页面。解决的办法：this.$router.go(0)。这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好；本次采用 this.$router.replace()的方法来实现首先创建Refresh.vue 文件<template> <p v-show="fals...
2019-10-23 11:45:36
354
原创 ⼿写 Promise
实现⼀个简易版 Promise 那么我们先来搭建构建函数的⼤体框架 const PENDING = "pending"const RESOLVED = "resolved"const REGECTED = "regected"function MyPromisse(fn) { const that = this that.state = PENDING t...
2019-09-23 19:15:21
210
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人