梨逍遥

代码改变世界，程序员创造未来

梨逍遥

更新（重新渲染）是 React 的重要特性 —— 当用户与应用交互的时候，React 需要重新渲染、更新 UI，以响应用户的输入。但是，React 为什么会重新渲染呢？如果不知道 React 为什么会重新渲染，我们如何才能避免额外的重新渲染

前端知识体系

思维导图，web 端首次加载有点慢，需要耐心等待一下（ps：遇到浏览器无响应请点击等待按钮）

浏览器

浏览器浏览器渲染原理渲染引擎解析 HTML：将 HTML 转换为 DOM 树（Document Object Model）。解析 CSS：将 CSS 转换为样式规则，并应用到 DOM 树。构建渲染树：根据 DOM 树和样式规则生

21 个让 React 项目更整洁的最佳实践

本文转载自：https://mp.weixin.qq.com/s/xvAJtv1RyOq7rBwaq_tm0Q 1. 使用 JSX 简写尽量对布尔变量使用 JSX 简写。假设你想控制一个导航栏组件的标题可见性。「不好的:」 123retur

隐藏移动端滚动条的几种方案

在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的你可能想到直接设置滚动条样式就可以了，就像这样 123::-webkit-scrollbar { display: none;} 目前来看好像没什么问题，但在某

如何使用 Docker 提升开发及部署体验

前言某些项目在进行私有化部署的时候遇到了一些问题：内网隔离环境，一些 npm 包需要先下载到 u 盘再拷贝到对应的机器上进行安装，安装起来很麻烦。测试环境下，代码和机器配置调试好了，部署到线上机器的时候却出现了问题。线上机器迁移的

构建工具对比与模块化规范

前端工程的痛点前端的模块化需求前端业界的模块标准非常多，包括 ESM、CommonJS、AMD 和 CMD 等等。前端工程一方面需要落实这些模块规范，保证模块正常加载。另一方面需要兼容不同的模块规范，以适应不同的执行环境。兼容浏览器，

vercel部署跨域问题

next.js 本地开发环境跨域利用rewrites重写代理在next.config.js中： 123456789async rewrites() { return [ //接口请求前缀带上/admin-api/

Rollup 打包原理与插件

插件机制仅仅使用 Rollup 内置的打包能力很难满足项目日益复杂的构建需求。对于一个真实的项目构建场景来说，我们还需要考虑到模块打包之外的问题，比如路径别名(alias) 、全局变量注入和代码压缩等等。可要是把这些场景的处理逻辑与核心的

Vite双引擎架构

这篇文章我们会将目光集中到 Vite 本身的架构上，一起聊聊它是如何站在巨人的肩膀上实现出来的。所谓的巨人，指的就是 Vite 底层所深度使用的两个构建引擎：**Esbuild **和 Rollup Vite 架构图很多人对 Vite 的双

Vite 配置

no-bundle 的理念通过 Vite 初始化的项目，在项目根目录中有一个 index.html 文件，这个文件十分关键。因为 Vite 默认会把项目根目录下的 index.html 作为入口文件。也就是说，当你访问 http://lo

优势谈判

摘要：优势谈判，指的是在谈判过程中，主动把握谈判节奏，最终让对方感觉自己获胜的谈判模式。很多人都陷入一个误区，认为：谈判的胜利就是自己获胜。其实，谈判的真正目的不是主宰对方，而是让对方感觉也有所收获。要知道，对方会给你你想要的东西，但是

向上管理的艺术

摘要：💼 在职场中，与上级建立良好的关系并有效地向上管理是取得成功的关键之一。本文将总结与归纳关于向上管理的重要要点，并通过案例和经验分享，帮助读者理解如何正确汇报工作、建立和谐的上下级关系以及实现共同提升 💪💼🎉。分类：#职场

React Hooks 使用时要避免的6个错误

今天来看看在使用 React hooks 时的一些坑，以及如何避开这些坑。问题概览：不要改变 hooks 的调用顺序；不要使用旧的状态；不要创建旧的闭包；不要忘记清理副作用；不要在不需要重新渲染时使用 useState；

React 组件代码结构如何组织？

1. 导入依赖项我们需要在组件文件顶部导入组件所需的依赖项，通常是使用 import 来进行导入。对于不同类别的依赖项，建议对它们进行分组，这有助于帮助我们更好的理解组件。可以将导入的依赖分为四类： 12345678910111213

React常见错误，如何避免？

下面来分享在 React 开发中常见的一些错误，以及如何避免这些错误。理解这些问题背后的细节，防止犯下类似的错误。 1. 组件卸载后执行状态更新报错信息：Can’t perform a React state update on an

React 渲染流程

1. React 渲染流程在说 React 的渲染流程之前，先来看一个在渲染流程中绝对绕不开的概念——协调。（1）协调协调，在 React 官方博客的原文中是 Reconciler，它的本意是“和解者，调解员”。那协调是怎么跟 R

React 组件设计模式

在 React 设计模式中，最重要、也是最为大家所津津乐道的几个模式分别是：● 有状态组件与无状态组件● 高阶组件（HOC）● Render Props 这些形态各异的 React 设计模式虽然实现思路有所不同，但本质上基本都是为了实现

React 纯函数组件

1. 纯函数所谓纯函数，它是这样一种函数：即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。从纯函数的定义，可以提取出纯函数的必要条件：● 纯函数接受参数，基于参数计算，返回一个新对象；● 不会产生副作用，计算过程不会

React组件通信

在组件之间是存在嵌套关系的，如果我们将一个程序的所有逻辑都放在一个组件中。那么这个组件就会变得臃肿并且难以维护，所以组件化的思想就是对组件进行拆分，再将这些组件嵌套在一起，最终形成我们的应用程序。比如，下面的组件就存在如下的关系：●

React生命周期

1. React 生命周期概览React 会把状态的变更更新到 UI，状态的变更过程必然会经历组件的生命周期。所谓的生命周期就是组件从创建到销毁的过程，它是一个很抽象的概念， React 通常将组件生命周期分为三个阶段：● 装载阶段（

React 组件实践

1. 定义组件接口React 世界由组件构成，所以，如何设计组件的接口就成了组件设计最重要的事情。（1）设计原则React 的组件其实就就是软件设计中的模块，所以其设计原则也遵从通用的组件设计原则，简单说来，就是要减少组件之间的耦

React Router

React Router 是 React 生态系统中最受欢迎的第三方库之一，近一半的 React 项目中使用了 React Router，下面就来看看如何在 React 项目中使用 React Router v6 吧！ 1. 概述Re

React 组件化开发

一、什么是组件化在处理一个复杂的问题时，我们逻辑思维能力是有限的，不太可能一次性搞定所有的内容，那我们就可以对问题进行拆解，拆解成一个个小的问题，最后将其放入整体中，这就是分治的思想。分而治之是软件工程的重要思想，是复杂系统开发和维

package.json

在每个前端项目中，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。package

React 基础入门

一、开发前的准备 1. 开发环境（1）Node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。React 应用并不依赖于 Node.js 运行，但是开发过程中的一些编译过程（比如 npm

HTML 属性

1. inputmodeinputmode全局属性是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。 1<input type="text" inputmode="tel&qu

你不知道的HTML

1. input 标签：输入验证我们通常会使用 JavaScript 来校验表单，比如： 123456function validateForm() { const inputText = document.forms[&q

数据处理库

1. 工具库（1）LodashLodash 是一个一致性、模块化、高性能、提高开发者效率的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 Ja

如何去搞前端基建

前言大家好，我是yinhan，话说当下，前端职位在近十年的磨砺之下，已是百花齐放万家争鸣，前端也不再是以前那个单纯的切图仔；要问为什么不单纯，无异于前端工程化、前端 devops、前端跨端、前端工具化、前端 CI/CD、前

拖拽排序库

1. React Beautiful Dndreact-beautiful-dnd 是一款美观且简单易用的 React 列表拖拽库。其动画效果自然，性能优秀，简洁而强大的 API，易于上手，与标准浏览器的互动性非常好。 2. Sor

HTML常见兼容问题

前言iphoneX 的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。其实对于 web 前端来说，刘海在绝大多数的场景下是可以不用处理的，因为 safari 或客户端（微信，手 Q 等）的 statusBar 已经替我

文件处理库

1. PDF （1）PDF.jsPDF.js 是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。它由社区驱动并受 Mozilla 支持，目标是创建一个通用的、基于 Web 标准的平台来解析和呈现 PDF。（2）jsP

js常见兼容问题

iPhone7 用 for…in 遍历数组失效问题描述：最初学习使用 js 时，觉得for...in遍历比for循环简洁，后期在用户反馈后发现 iPhone7 不支持用 for…in 遍历数组解决方式：改为for循环遍历移动端点

Vue 库

1. 状态管理（1）PiniaPinia 是最新一代的 Vue 轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成员在 2019 年 11 月重新设计的一个状态存储库，它允许你跨组件/页面

React 库

1、状态管理（1）React ReduxRedux 是 JavaScript 应用程序的状态容器，提供可预测的状态管理。React Redux 是 Redux 官方实现的 React 绑定。可以让你构建一致化的应用，运行于不同的环境（

css常见兼容问题

移动端的 1px问题描述：1px 的边框。在高清屏下，移动端的 1px 会很粗。产生原因：首先先要了解一个概念：DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 逻辑像素的比值

前端四大手写

要问程序员最心虚的面试题，如果要投票选择，手撕代码一定是前三位的。其中在前端领域，以手写 bind、手写深拷贝、手写 EventHub（发布-订阅）、手写 Promise最为常见，我将他们称为四大手写。本文的目的就是要破除大家对四大手写

图标库

1. IconParkIconPark 提供超过 2400 个高质量图标，还提供了每个图标的含义和来源的描述，便于开发者使用。除此之外，该网站还可以自定义图标，这是与其他图标网站与众不同的地方。该图标库是字节跳动旗下的技术驱动图标样式

动画库

很多时候我们在开发前端页面时都会做一些动画效果来提升用户体验度和页面美观度，所以今天就来给大家推荐几个好用的 JavaScript 动画库，希望对各位小伙伴有所帮助！ Animate.cssanimate.css 是一个使用 CSS3

2023-06-28

sentry - 清理数据

前端监控

一、SENTRY 数据软清理（清理完不会释放磁盘，如果很长时间没有运行，清理时间会很长）12345# 登陆 sentry_worker_1 容器$ docker exec -it sentry_onpremise_worker_1

2023-06-28

前端监控 SDK 的一些技术要点原理分析

前端监控

一个完整的前端监控平台包括三个部分：数据采集与上报、数据整理和存储、数据展示。本文要讲的就是其中的第一个环节——数据采集与上报。下图是本文要讲述内容的大纲，大家可以先大致了解一下：，可以用它来写一些简单的 DEMO，帮助加深理解。再结合

2023-06-28

平台接入sentry自托管项目

前端监控

一、安装 docker 1.Windows Docker 安装https://www.runoob.com/docker/windows-docker-install.html 2.MacOS Docker 安装https://www

2023-06-28

性能监控、异常监控

前端监控

性能监控 HTTP一个是 http 的方面，在后端 log 日志，流入 kafka，然后在 kafka 消费数据，可以准确的监控到哪些接口有异常？异常率是多少？ API前端的 Performance 的 api，在用户的实时使用的过

2023-04-24

generator函数生成器及其实现

前端面试

调用生成器函数会返回一个生成器对象，每次调用生成器对象的 next 方法会执行函数到下一次 yield 关键字停止执行，并且返回一个 { value: Value, done: boolean }的对象。本质是协程在 ES6 的实现。

2022-12-12

CDN

前端浏览器

CDN 是什么内容分发网络（Content delivery network 或 Content distribution network，缩写：CDN）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可

2022-12-04

数据处理库

前端收藏

2022-11-21

如何去搞前端基建

前端

2022-10-19

条件语句的优化

技巧

在日常的开发中，我们经常会编写一些条件语句，过多的 if…else 会导致代码难以理解和维护，今天来分享几个优化条件语句的小技巧！ 1. Array.includes来看下面的代码： 12345678function test(ani

2022-08-16

拖拽排序库

前端收藏

9 / 12