- 博客(15)
- 收藏
- 关注
RSS订阅原创 JavaScript简单模拟React中的useEffect
Hooks体系中的关键部分，帮助管理组件的生命周期行为。下面是一个简化的模拟实现，旨在帮助理解useEffect的基本原理，而非React库的真实源码。在React内部，useEffect的实现涉及到很多细节，包括但不限于调度机制、依赖数组的比较、清理函数的执行时机等，以及与React渲染循环的深度集成。React的useEffect钩子是一个非常核心的功能，用于在函数组件中执行副作用操作，比如数据获取、订阅或者手动修改DOM等。
2024-05-13 13:53:42
205
原创 Vue.js中Provide / Inject 的深度探索与实践
Vue.js 开发过程中，父子组件通信是常见的需求，而 Vue 提供了多种实现方式，如 props、自定义事件、Vuex状态管理等。除此之外，Vue 还提供了两种特殊的高级传参方式：provide和inject，它们主要用于跨层级、甚至跨越任意组件层级的通信。
2024-03-19 17:05:04
418
原创 Vue.js 中的 Extends 继承机制与组件复用实践
总结来说，Vue.js 中的 extends 继承机制为我们提供了一种灵活的组件复用手段，但也要结合具体应用场景合理选择继承或组合的方式，以最大程度发挥组件化的优势，同时保持代码的清晰和高效。在实际开发中，根据项目的具体需求和团队的编码习惯，可以选择最适合的方式来组织和复用组件代码。然而，在 Vue3 中，Composition API 推崇的功能解耦原则让组件间的继承变得不再必需，更多的是通过组合（Composition）的方式实现逻辑复用。未被覆盖的选项将被继承。借助 Vue.extend。
2024-03-19 16:57:59
3455
原创 深入探索 JavaScript 中的 Proxy 和 Reflect：设计模式、应用实践与性能优化
Proxy是ES6引入的一个新特性，它允许我们创建一个代理对象，该代理对象可以控制对目标对象的访问。简单来说，当我们在代理对象上执行任何操作时，这些操作会先经过一系列可自定义的“陷阱”（traps），从而有机会在操作执行前或执行后添加额外逻辑。// 自定义get行为// 输出 1，而非原对象的 0Reflect对象与Proxy配合紧密，它提供了一系列静态方法，这些方法与Proxy陷阱方法一一对应，主要用于执行默认的JavaScript操作。
2024-03-12 17:53:26
1178
原创 浏览器中的JavaScript执行机制与事件循环揭秘
最后，主线程空闲后，先清空微任务队列，打印’3’，再从宏任务队列中取出setTimeout回调执行，打印’2’。调用栈是一种后进先出（LIFO）的数据结构，当函数被调用时，引擎会创建一个新的栈帧压入栈顶，其中包含了函数的局部变量、参数等信息。JavaScript代码主要由浏览器中的JavaScript引擎负责执行，最知名的JavaScript引擎包括Google。所以，一个完整的事件循环周期就是：执行栈执行->执行微任务队列->执行宏任务队列->渲染->再次循环。语句时，对应的栈帧就会从栈顶弹出。
2024-03-12 15:15:54
471
原创 深度解读React中的createContext、useMemo、Provider和useContext：一种高效的数据管理模式
合理运用这些工具，不仅可以简化状态传递的过程，还能确保应用具备良好的扩展性和性能表现。是React Hook，它允许消费组件订阅在其父级作用域内创建的Context对象，无需手动一层层地通过props向下传递。然而，在大型应用中，如果上下文中的数据计算成本高昂，每次渲染都重新计算可能会导致性能瓶颈。在React生态系统中，有效地管理和传递状态是至关重要的。是React提供的用于创建上下文对象的函数，它可以封装那些需要在组件树中跨多层传递的值。组件，为我们提供了一种在组件层级之间共享全局状态的方式，而。
2024-03-12 15:01:26
665
1
原创 javascript:void(0)；用法及常见问题解析
主要是用来防止链接的默认行为，即页面跳转。然而，出于安全性和可访问性的考量，建议尽量避免直接在 href 中使用JavaScript，而是采用事件监听的方式控制交互行为。标签）href 属性的值，或者有时用在 onclick 或类似的事件处理器属性中。在这个例子中，点击链接会触发。函数，但不会引起页面导航。
2024-03-11 17:02:49
546
原创 基于 ECMA-262 规范模拟实现的 Promise.race 函数
Promise.race 会返回一个新的 Promise，当传入数组中的任意一个 Promise 被解决或拒绝时，新的 Promise 也会立刻以相同的值（解决或拒绝）进行相应状态的改变。这意味着第一个解决或拒绝的 Promise 的结果将决定 Promise.race 返回的 Promise 的结果。如果传入的是空数组，在真实环境中，返回的 Promise 应该是一个永远不会解决的 Promise，但是在这里为了简洁起见，我们没有特殊处理空数组的情况。
2024-03-11 15:16:45
312
原创 基于 ECMA-262 规范模拟实现的 Promise.all 函数
Promise.all 会返回一个新的 Promise，当且仅当所有传入的 Promise 都成功解决时，新的 Promise 才会被解决，解决值是一个数组，包含了每个传入 Promise 解决的值，按照它们在数组中的位置排列。如果有任何一个 Promise 被拒绝，那么新的 Promise 也会立即被拒绝，其拒绝原因就是那个最先被拒绝的 Promise 的拒绝原因。
2024-03-11 15:01:08
948
原创 基于 ECMA-262 规范模拟实现的 Promise.any 函数
【代码】基于 ECMA-262 规范模拟实现的 Promise.any 函数。
2024-03-11 14:52:25
436
原创 React中的useEffect为什么会出现深度依赖的问题？
在useEffect的依赖项列表中，如果有一个对象或数组变量，并且每次渲染时这个对象或数组的内容发生了变化，但其引用并未改变（即没有创建新的对象或数组实例），那么即使内容有变，React也会认为依赖项未变，从而不会重新执行useEffect。当你对一个对象或数组进行修改时（例如添加、删除属性/元素或者修改现有属性/元素的值），即使内容发生了变化，该对象或数组的引用通常不会改变。需要确保每次内容变化时返回一个新的数组引用，如使用数组的扩展运算符（spread operator）来创建一个新的数组。
2024-02-19 14:39:52
564
1
原创 简单聊聊react和vue它们的diff算法
React 的 diff 算法采用了一种基于 Fiber 架构的双缓存技术，即每次页面更新时，同时在内存中创建两个 Virtual DOM树，一个是当前的 Virtual DOM 树，另一个是更新前的 Virtual DOM 树。前言：React 和 Vue 都采用了 Virtual DOM，并基于它们的 Virtual DOM 实现了 diff 算法，用于对比新旧虚拟 DOM 树的差异，并尽可能地进行最小化更新，以优化页面渲染的性能。Vue 的 diff 算法采用了双端比较的策略。
2023-05-29 11:54:41
561
4
原创 为什么说typescript能让代码变得更加安全？
为什么说typescript能让代码变得更加安全？它是怎么做到的？首先在弄清楚这个问题之前，我们先搞清楚一件事情：程序运行这整个过程是怎么样的：程序是由程序员编写的一系列文本文件组成的；这些文本都是由一个特殊的程序解析，这个特殊的程序就是我们经常说的编译器；在编译器解析完成之后会转换成抽象句法树（abstract syntax tree，AST）【AST就是去掉了空白，注释和缩进的制表符或空格之后的数据结构】；编译器会把AST转换成一种称为字节码的底层表示；字节码在传给运行时程序计算，最后
2021-01-14 13:25:15
635
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人