文章类型: 排序方式:
使用React Context的一些优化建议
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。
解读vue中的solt
在 Vue.js 中,插槽(slot)的原理是利用组件的内容分发机制。当一个组件包含插槽时,Vue.js 会将组件内部的内容根据插槽的定义分发到相应的位置。
快速打开Nest.js的世界
从引用官方介绍开始: Nest(NestJS)是一个用于构建高效、可扩展的Node.js服务器端应用程序的框架。它使用渐进式JavaScript,使用TypeScript构建并完全支持TypeScript(但仍然允许开发人员使用纯JavaScript编码),并结合了OOP(面向对象编程)、FP(功能编程)和FRP(功能反应编程)的元素。
基于Animate.css让你的网站眼前一亮吧
当你想要吸引用户的注意力,动画是一个强大的工具。Animate.css是一个功能丰富的库,用于在网页上快速轻松地添加动画。无需深入JavaScript或复杂的CSS,你可以给元素添加预设的动画效果。本文将指导你如何使用Animate.css为你的网站增添活力。
Vue项目构建优化
在开发大型前端项目时,往往是一个需求对应一个分支,当完成需求后,就需要将代码打包、部署。代码通常需要部署到多个环境中,这些环境包括:日常环境、测试环境、回归环境和生产环境。回归环境用于在发布前进行测试,生产环境是用户访问的版本。随着时间的推移,项目中会不断引入许多新的依赖(如第三方库、插件等)和图片资源,代码数量也会逐渐增多,从而导致构建项目更加耗时,这也意味着部署项目需要消耗更长的时间。
单线程JavaScript为何如此高效
JavaScript 中的异步任务通常是通过回调函数、Promise、async/await 等机制来处理。通过合理使用异步任务和任务队列,可以实现非阻塞的代码执行,提高代码的性能和响应能力。
vue3组件注册
一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。
一篇文章带你看懂Node.js
Node.js 是一个开源与跨平台的 JavaScript 运行时环境。在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核),利用事件驱动、非阻塞和异步输入输出模型等技术提高性能。可以理解为 Node.js 就是一个服务器端的、非阻塞式I/O的、事件驱动的JavaScript运行环境。
Vue之nextTick原理与作用
在 Vue.js 中,$nextTick 方法的底层原理涉及 Vue 的更新队列以及浏览器的异步任务队列(微任务和宏任务)。它的主要目标是在下次 DOM 更新循环结束后执行回调函数,确保能够访问到更新后的 DOM。
浅谈JavaScript闭包
当一个函数能够记住并访问它创建时的词法作用域,即使该函数在其词法作用域之外执行,我们称之为闭包。
我知道你想用useEffect,但你先别急
useEffect是React提供给我们的一个“逃生舱”,是React 的纯函数式世界通往命令式世界的“逃生通道”,选择合适的时机使用useEffect会让我们的代码既优雅又高效,反之会造成不必要的负担。
React之Effect详解
在React中,Effect是一种用于处理副作用的机制,它允许我们在组件生命周期中执行诸如数据获取、订阅事件、手动操作DOM等副作用操作。
React之自定义 Hook
自定义Hooks是一种在React中重用逻辑的方式。它允许我们将组件中的状态逻辑提取到可重用的函数中,并在需要时在不同的组件中使用。
认识&对比 React、Vue2、Vue3 三者的 diff 算法
React 是 Fiber 架构的,Fiber 其实是一个链表的结构,但是由于没有设置反向指针,因此没有使用双端比对的方式去优化 Diff 算法(没有反向指针,从右往左遍历链表会很困难)。这一点在 React 源码 reconcileChildrenArray 函数的注释中也有说明。
React之Context 深层传递参数
通常情况下,我们使用Context来避免通过props一层一层地传递数据,特别是当应用程序变得复杂时。深层传递参数是指在React应用程序中将数据从一个祖先组件传递到较深层的后代组件。
JavaScript中的设计模式
JavaScript设计模式是编程世界的智慧结晶,提供了解决常见问题的优秀方案。无论你是初学者还是经验丰富的开发者,掌握这些模式都能让你的代码更清晰、更灵活。本文将为你介绍一些常见的设计模式,帮助你提高代码质量,构建更可维护的应用。让我们一起深入了解这些设计模式的精妙之处吧!
React之条件渲染
条件渲染是指根据特定条件选择性地渲染React组件或元素。这可以通过JavaScript中的条件语句(如`if`语句或三元运算符)来实现。在React中,条件渲染通常与组件的`render`方法结合使用,根据某些条件返回不同的React元素。
React.js快速入门教程
React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序(SPA),可以轻松地创建交互性强、快速响应的用户界面。
不同打包工具下的环境变量配置方式对比
在现代的JavaScript应用程序开发中,环境变量的配置是至关重要的。不同的应用场景和部署环境可能需要不同的配置,例如开发、测试和生产环境。最常见的需求是根据不同的环境,配置如是否开启sourceMap、API请求地址的切换、是否压缩代码等逻辑。本文主要介绍利用不同的工具:Webpack、Vite、Rollup打包项目的环境变量的配置方式。
浅析 5 种 React 组件设计模式
作为一名 React 开发者,你可能会面临下面几个问题:如何构建一个高复用度性的组件,使其适应不同的业务场景?如何构建一个具有简单 API的组件,使其易于使用?如何构建一个在 UI 和功能方面具有可扩展性的组件?为解决上述问题,下面介绍五种 React 组件设计模式,并对比它们的优缺点。
用TypeScript编写React的最佳实践
如今, React 和 TypeScript 是许多开发人员正在使用的两种很棒的技术。但是把他们结合起来使用就变得很棘手了,有时很难找到正确的答案。不要担心,本文我们来总结一下两者结合使用的最佳实践。
React 中条件渲染的 N 种方法
条件渲染在React开发中非常重要的功能,它允许开发人员根据条件控制渲染的内容,在创建动态和交互式用户界面方面发挥着至关重要的作用,本文总结了常用的的条件渲染方法。
Chrome 插件开发指南和实践
阅读本文你将了解到:Chrome 插件整体架构;如何开发一个 Chrome 插件(Popup 和 Devtools);如何使用前端框架(React/Vue)进行开发;如何调试插件;如何使用 Puppeteer 对插件进行 E2E 测试(本地和 CI 环境)。
前端最轻量级的精度计算工具库!
今天和同事聊起计算机中精度的话题。于是想起一个小巧的,快速的JavaScript库:big.js。它可用于任意精度的十进制算术运算。这里分享给大家。
了解前端新框架-nue.js
前端开发者 Tero Piirajinen 推出了一个名为 Nue.js 的极简化前端开发工具,并迅速引发社区讨论。Piirajinen 在 Hacker News 上表示,它是 React、Vue、Next.js、Vite、Svelte 和 Astro 的替代品。
浏览器如何运行一段JavaScript代码
虽然有很多关于JavaScript的书籍和资料,但绝大多数都从JavaScript语言本身的角度去分析其语法和语义,很少有与JavaScript具体执行过程相关的分析资料。因此,我邀请大家一起从浏览器的角度来看一下一段JavaScript代码到底是如何执行的。
useEffect 实践案例(一)
对于 useEffect 的掌握是 React hooks 学习的**重中之重**。因此我们还需要花一些篇幅继续围绕它讲解。
「React 进阶」React 优雅的捕获并处理渲染异常
React jsx 在编译阶段,会被 babel 变成 React.Element 的形式,它的执行是在 React 整个渲染的 render 阶段执行的,如果 React.Element 出现了空指针等异常,那么就会中断 render 阶段的执行,当然也不会执行渲染真实 DOM 的 commit 阶段。所以如果是初次渲染,任何渲染动作也就不会执行,最终呈现给我们的视图就是白屏。
[译]JavaScript中Base64编码字符串的细节
Base64编码和解码是一种常见的将二进制内容转换为适合Web的文本的形式。它通常用于data URLs,比如内嵌图片。当你在JavaScript中对字符串应用base64编码和解码时会发生什么?这篇文章探讨了这些细节和需要避免的常见陷阱。
【Web技术】1869- spa 如何达到 ssr 的秒开技术方案——预渲染
SPA(单页应用)在初次加载时,由于需要加载所有必要的 JavaScript 和 CSS 文件,以及应用的主 HTML 文件,因此可能会产生白屏时间较长的问题,对用户体验而言是非常糟糕的。对单页面应用进行预渲染,将页面在打包期间渲染成静态 HTML 文件,可以很好的解决白屏时间过长问题