React.js
关注
分享
扫一扫
文章平均质量分 60
小灰灰学编程
开发web网站、小程序，需要可联系
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
《缓存双刃剑：useMemo/useCallback的精准施法指南》
在React的魔法世界里，useMemo和如同两把淬火的神剑——用得妙可斩性能瓶颈于无形，用得拙则反噬应用于须臾。今天，就让我们揭开这两把双刃剑的神秘面纱，掌握精准施法的奥秘！原创 2025-08-05 15:41:37 · 222 阅读 · 0 评论 -
useContext性能围城：如何避免无谓渲染？
/ 使用示例最小化Context范围：仅在需要的地方使用Provider冻结不变值：使用useMemo缓存不变的Context值拆分大Context：按功能分离多个Context优化消费者：使用React.memo或选择器监控性能：定期使用Profiler检测考虑替代方案：对高频更新使用状态管理库下一讲预告：《缓存双刃剑：useMemo/useCallback的精准施法指南》将深入探索React缓存机制的奥秘，揭示如何正确使用useMemo和useCallback提升性能。原创 2025-08-04 16:01:03 · 836 阅读 · 0 评论 -
useRef三副面孔：DOM操作/数据容器/渲染隔离舱
/ 仅在value变化时更新// 使用示例应用场景关键特性典型用例DOM操作访问/操作DOM节点聚焦、滚动、测量DOM数据容器存储不触发渲染的可变数据保存定时器ID、上一状态值渲染隔离舱突破闭包限制、跨渲染周期存储访问最新状态、避免重复计算下一讲预告：《useContext性能围城：如何避免无谓渲染？》将深入解析Context API的性能陷阱与优化策略，构建高效的状态传递系统。原创 2025-08-04 15:59:54 · 401 阅读 · 0 评论 -
useEffect生存手册：依赖数组陷阱、清除函数与Closure Hell破局
诚实原则：使用到的所有外部值都应放入依赖数组稳定原则：确保依赖项引用稳定（基本类型或useMemo）最小原则：保持依赖数组尽可能小。原创 2025-08-03 22:24:05 · 393 阅读 · 0 评论 -
组件通信八爪鱼：父子/兄弟/跨级传值实战大全
/ 创建事件总线（章鱼神经中枢）},if (!},return (<h2>章鱼的神经网络</h2><OctopusTentacle id="触手A" color="#ff6b6b" /><OctopusTentacle id="触手B" color="#4ecdc4" /><OctopusTentacle id="触手C" color="#ffe66d" /></div>// 监听神经信号}, []);// 2秒后清除消息。原创 2025-08-03 22:23:26 · 665 阅读 · 0 评论 -
useState进阶：批量更新、函数更新与竞态解决方案
技巧场景解决方案批量更新同步多次更新React自动批量处理异步批量React 18自动批处理状态依赖新状态基于旧状态函数更新竞态条件异步数据请求AbortController或请求标识复杂状态关联状态更新useReducer或合并状态相同值更新避免不必要渲染React自动跳过（使用Object.is比较）下一讲预告：《useEffect生存手册：依赖数组陷阱、清除函数与Closure Hell破局》将深入探索React副作用管理的核心机制，解决依赖地狱和闭包陷阱等难题。原创 2025-08-02 12:16:41 · 544 阅读 · 0 评论 -
React状态管理对决：useState异步更新 vs setState合并策略
🏇 遇上🛡️，一场史诗级的状态更新对决就此展开！究竟谁能更胜一筹？让我们拉开这场技术较量的帷幕！fill:#333;color:#333;color:#333;fill:none;状态更新竞技场useState轻骑兵setState重甲骑士异步更新策略批量合并战术。原创 2025-08-02 11:51:39 · 1373 阅读 · 0 评论 -
函数组件入门：用纯函数思想构建UI的5大准则
编程原则函数组件实现单一职责原则小型专注的组件开闭原则通过组合而非修改扩展功能无副作用原则useEffect隔离副作用引用透明性纯渲染函数明确依赖原则props作为显式输入🚀更可预测的UI界面🔧更易调试的应用程序🧩更可复用的组件库📈更高性能的React应用函数组件不仅是React的未来，更是构建可靠、可维护前端应用的基石。原创 2025-08-01 10:22:20 · 225 阅读 · 0 评论 -
React类组件核心：this绑定、生命周期与设计陷阱避坑指南
🧠明确的生命周期：清晰的组件阶段划分🛡️错误边界：应用稳定的最后防线🏛️面向对象思维：封装、继承、多态的经典实践“理解过去，方能更好地驾驭未来。类组件虽渐入历史，但其设计思想将永远照亮React之路。下一讲预告：《高阶组件(HOC)实战：从日志埋点到权限守卫》将揭示类组件最强大的复用模式，将组件功能提升到全新维度！// 类组件的最后遗产// 这里封印着React的古老智慧...// 但新时代的魔法师们...// 正在用Hook书写新的传奇。原创 2025-08-01 10:21:14 · 666 阅读 · 0 评论 -
虚拟DOM深度解密：Diff算法如何驱动高性能渲染？
🚀性能优化：最小化昂贵的DOM操作🧩抽象层：统一多平台渲染（Web、Native、VR）🔄声明式编程：开发者关注"是什么"而非"如何做"🛡️安全性：自动处理XSS防护（通过React DOM）下一讲预告：《函数组件入门：用纯函数思想构建UI的5大准则》将带您探索React函数组件的核心哲学与实践技巧，揭示Hooks如何彻底改变组件设计范式。虚拟DOM不是万能的，但它是现代前端框架高效渲染的基石。理解其工作原理将帮助您编写更高效的React应用，并为性能优化打下坚实基础。原创 2025-07-31 09:40:19 · 773 阅读 · 0 评论 -
JSX 背后的魔法：从语法糖到虚拟DOM的编译秘密
为什么 React 中写的 HTML 标签能跑在 JavaScript 里？浏览器如何识别这种“四不像”语法？：《虚拟DOM深度解密：Diff算法如何驱动高性能渲染？》将揭示虚拟DOM如何比直接操作DOM快 10 倍！的返回值并非真实 DOM，而是一个。当 JSX 包含嵌套组件时，编译呈现。后变成标准 JavaScript。原创 2025-07-31 09:38:41 · 618 阅读 · 0 评论 -
React的form表单自定义校验规则
React的form表单自定义校验规则原创 2024-06-18 22:07:00 · 1194 阅读 · 0 评论 -
实现React的Form表单非受控组件的必填校验提示
实现React的Form表单非受控组件的必填校验提示原创 2024-06-11 14:53:05 · 534 阅读 · 0 评论 -
实现Dropdown下拉菜单监听键盘上下键选中功能-React
实现Dropdown下拉菜单监听键盘上下键选中功能-React原创 2024-05-31 16:03:51 · 833 阅读 · 1 评论 -
react-virtualized实现行元素不等高的虚拟列表滚动
react-virtualized实现行元素不等高的虚拟列表滚动原创 2024-02-01 10:57:15 · 2735 阅读 · 0 评论 -
React中使用LazyBuilder实现页面懒加载方法二
通过懒加载，实现：在初始dom出现在视口内时，替换掉初始dom，渲染真实dom，并取消对该dom的监听，实现只需加载一次，首次加载多少个真实dom，取决于可视区域跟初始dom的高度原创 2024-01-26 11:53:10 · 743 阅读 · 0 评论 -
React中使用LazyBuilder实现页面懒加载方法一
通过懒加载，实现：只有出现在视口内的元素才渲染真实的dom，在视口以外的元素都渲染初始dom，首次加载多少个真实dom，取决于可视区域跟初始dom的高度原创 2024-01-25 11:10:50 · 707 阅读 · 0 评论 -
React中实现行等高的虚拟列表加载滚动
当一个页面中需要接受接口返回的全部数据进行页面渲染时间，如果数据量比较庞大，前端在渲染dom的过程中需要花费时间，造成页面经常出现卡顿现象。需求：通过虚拟加载，优化页面渲染速度。缺点：需要固定好每一行元素的高度原创 2024-01-23 18:35:33 · 1005 阅读 · 0 评论 -
react中使用antd的tabs进行标签切换时，销毁dom
最近接的一个需求，需要将之前通过点击按钮触发跳转到的另外一个页面，通过跟点击按钮的页面融合，通过tab的形式进行切换。【由于业务方面的需求，两个页面的逻辑代码部分存在一致性（经多年长期沿用下来的代码）】原创 2023-12-12 16:59:44 · 1760 阅读 · 0 评论 -
encodeURIComponent对url参数进行编码
当我们拼接在url上的参数存在某些特殊字符时（&、%、#、?、/ 等），getHrefParam()并不能满足我们的需求，例如：url后面的参数是：?window.location.search方法获取的参数被“#”截断。解决方法：encodeURIComponent对参数进行一次编码即可。原创 2023-10-26 18:05:08 · 736 阅读 · 0 评论 -
react的table合并行时，出现border-bottom重复问题
的处理，但是由于合并的行恰好能合并到table的最后一行，但是本身不属于最后一个tr，所以不具有该属性，导致td本身的border-bottom跟table的boder-bottom双重渲染。定义一个方法，接收整个list跟当前行的index，通过index截取剩下的list，赋值给newArr数组，for循环newArr数组，判断接下来的元素是否还存在rowSpanNum有值的行信息，如果有，则保持当前td的borderBottom值，如果没有，则当前td的borderBottom为'none'原创 2023-10-26 11:50:25 · 468 阅读 · 0 评论 -
React中使用refs获取子组件的state
React中使用refs获取子组件的state原创 2023-06-08 15:31:15 · 867 阅读 · 0 评论 -
react中ref的理解与简单运用
react中ref的理解与简单运用原创 2023-05-27 16:16:47 · 841 阅读 · 0 评论 -
React子组件没有随父组件更新问题的解决
React子组件没有随父组件更新问题的解决原创 2022-12-01 17:57:20 · 2230 阅读 · 0 评论 -
React+antd实现table动态列添加删除
React+antd实现table动态列添加删除原创 2022-11-23 17:19:17 · 5411 阅读 · 7 评论 -
React-router实现简单的路由跳转
React-router实现简单的路由跳转原创 2022-10-19 14:58:36 · 1030 阅读 · 0 评论 -
React的useEffect用法记录
React的useEffect用法记录原创 2022-07-02 22:25:41 · 505 阅读 · 0 评论 -
React中renderProps的使用
index.jsximport React ,{Component} from 'react'import './index.css'export default class A extends Component { render(){ return ( <div className='a'> <h2>我是A组件</h2> {/* render调用原创 2022-03-19 12:00:28 · 890 阅读 · 0 评论 -
React中使用Context进行多层级组件传值
文件结构index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-03-19 00:13:16 · 1154 阅读 · 0 评论 -
React.js兄弟组件的传值通信
在React中，完成兄弟组件之间的通信，要借助pubsub-js库在vs code中，借助yarn进行下载安装yarn add pubsub-js在组件中通过以下语句进行引用import PubSub from 'pubsub-js'订阅消息用法PubSub.subscribe('getData',(msg,stateObj)=>{ console.log('A组件订阅消息了') console.log(stateObj) this.s原创 2022-01-07 18:00:16 · 790 阅读 · 0 评论 -
React中的父子组件之间的传值通信
在父组件中，通过state的方式定义组件的参数进行初始化// 定义App组件的状态值 state = { msg: '我来自父组件', messageA: '', // 接受A组件信息 messageB: '', // 接受B组件信息 }通过import调用子组件// 组件引用import PageA from './components/pageA'import PageB from './components/pageB'在父传子的过程中，只需要在原创 2022-01-07 14:51:16 · 881 阅读 · 0 评论