blog
blog copied to clipboard
campcc
Techblog around JavaScript, CSS, Source Code Analysis, Responsive Design, FE-Framework etc. Up Up Up !
在现代的软件开发中，管理项目依赖是一个至关重要的任务。为了便于理解和管理这些依赖，[语义化版本控制](https://semver.org/)（Semantic Versioning，简称 SemVer）和 `package.json` 中的版本指示符起着核心作用。 ## 什么是语义化版本控制？ 语义化版本控制是一种标准化的版本号系统，它旨在传达关于每个版本所做更改的信息。它基于一个简单的编号格式：`主版本号.次版本号.修订号`，通常写作 `MAJOR.MINOR.PATCH`。这三个数字的变化代表了不同级别的修改： * **主版本号（MAJOR）** ：当你做出不兼容的 API 更改时，必须增加主版本号。这意味着，如果软件的公共 API 在升级后无法向后兼容之前的版本，主版本号就需要增加。 * **次版本号（MINOR）** ：当你添加了向下兼容的新功能时，必须增加次版本号。这意味着，如果添加了新功能或者改进，但是不影响现有的API的使用，次版本号就应该增加。 * **修订号（PATCH）** ：当你进行了向下兼容的问题修正时，必须增加修订号。这通常指的是不改变软件外部行为的内部变动，比如修复了软件中的bug。 目前业内流行的组件库基本都使用语义化版本控制，比如 [React](https://github.com/facebook/react/releases)、[Ant Design](https://ant.design/changelog/)、[Vue.js](https://github.com/vuejs/core/blob/main/CHANGELOG.md) 等， 这种明确的版本号命名策略，使得开发者能够快速了解版本更新的性质，以及这些更新可能对他们的项目产生的影响。 ## package.json 中的版本指示符...
> 原文链接：[JavaScript WTF: Why does every() return true for empty arrays?](https://humanwhocodes.com/blog/2023/09/javascript-wtf-why-does-every-return-true-for-empty-array/) > > 作者：[Nicholas C. Zakas](https://github.com/nzakas) > > 翻译：gpt-4-1106-preview > > 校对：MonchLee > 导读：本文是 Eslint 的作者 Nicholas C. Zakas 的一篇博文，文章从一个...
> 原文链接：[Frontend predictions for 2024](https://buttondown.email/whatever_jamie/archive/frontend-predictions-for-2024/) > 作者：[Whatever, Jamie](https://buttondown.email/whatever_jamie) 对于前端来说，这是不平凡的一年。我们见证了对服务器端渲染（SSR）市场的争夺和创新的热潮；人工智能的不断渗透；网络渲染器和 JS 引擎的迅猛发展；一大批有志之士试图将知名品牌从宝座上拉下；以及其他各个领域的动向。 在预测新一年的传统占卜之前，让我们回顾一下今年到目前为止的大杂烩。 ## 2023 年回顾 ### SSR SSR 并不是什么新鲜事物。PHP 已经提供了整整 28 年，如果它足以支持 Neopets（还有，虽然有点勉强，Facebook），那么它可以说足以应对任何事情了。 但是 Vercel 一直在大力推动它。它已经成为一些前端开发领域最有影响力人物的公会之家，很难忽视他们的叙述（例如，当他们谈论 Server Actions 时，[Twitter 上一周都充斥着相关的...
故事的开始，2023 年的一个早晨，你刚到公司座位坐下，PM 扔给了你一个需求，需要编写一个 React 应用，从接口获取一个列表的数据并渲染到页面。身经百战的你打开 Visual Studio Code 完成了项目的初始化，考虑到网络请求属于一个**渲染副作用**，于是你毫不犹豫的选择了 [useEffect](https://react.dev/reference/react/useEffect) 进行数据的获取，仅用了一分钟，你就完成了代码编写， ```tsx type ListItem = { id?: string | number; name?: string; }; function App() { const [list, setList] =...
大家好，我是 [Monch](https://github.com/campcc)，今天想跟大家分享的是，如何在 React Hooks 中更优雅地更新复杂的状态数据，这里的复杂状态可能是， * **Objects**，包含多个属性值的 `Object` 对象 * **Nested Object**，嵌套的 `Object` 对象 相信大家在日常开发中都会遇到如下的场景，比如一个分页器对象可能由以下几部分组成， * current，当前页 * pageSize，页的大小 * total，数据的总数 * ... ```ts type Pagination = { current: number;...
随着 2019 年 2 月 React 稳定版 hooks 在 [16.8](https://www.npmjs.com/package/react/v/16.8.0) 版本发布，涌现了越来越多的 “hooks 时代” 的状态管理库（如 zustand、jotai、recoil 等），“class 时代” 的状态管理库（如 redux）也全面拥抱了 hooks。无一例外，它们都聚焦于解决 **组件通信** 的问题， * 组件通信的方式有哪些？ * 这么多的状态管理库要怎么选？ * 可变状态 or 不可变状态？...
 前面我们介绍了 [React架构](https://github.com/campcc/blog/issues/45)，为了实现**可中断的异步更新**，`v16` 使用 [Fiber](https://github.com/campcc/blog/issues/46) 作为核心架构进行了重构， 接下来我们将深入 `Fiber` 树的构建，正式开始之前，我们先回顾下 `Fiber` 相关的一些术语， - `Fiber` 架构下，React 架构分为三层 `Scheduler`、`Reconciler` 和 `Renderer` - `Reconciler` 工作的阶段被称为 `render` 阶段，在该阶段会调用组件的 `render` 方法 - `Renderer` 工作的阶段被称为 `commit` 阶段，在阶段会把...
从 [React设计理念](https://github.com/campcc/blog/issues/44) 和 [React架构](https://github.com/campcc/blog/issues/45) 中我们知道，在 `v15` 版本 `Reconciler` 采用递归的方式更新虚拟 DOM，**这会导致什么问题呢？** 由于递归过程是不能中断的，如果组件树的层级很深，递归更新时间超过了一帧，用户交互就会卡顿， 为了解决这个问题，`v16` 将**递归的无法中断的更新重构为异步的可中断更新**。 由于曾经用于递归的虚拟 DOM 数据结构已经无法满足需要，于是全新的 Fiber 架构应运而生。 那到底什么是 Fiber ？Fiber 只是一个架构吗？为什么说 Fiber 同时也作为静态的数据结构和动态的工作单元？ ## 什么是 Fiber React 团队的核心成员 [Andrew...
[上一篇](https://github.com/campcc/blog/issues/44) 我们介绍了 React 的设计理念，可以简单概括为**快速响应**。 快速响应的关键是**解决 CPU 和 IO 的瓶颈**，实现上**需要将同步的更新变为可中断的异步更新**。 这对应了 React 架构的演变过程（**v15 → v16**）。 ## React 15 React15架构可以分为两层： - Reconciler（协调器）—— 负责找出变化的组件 - Renderer（渲染器）—— 负责将变化的组件渲染到页面上 ### Stack Reconciler Reconciler 负责找出变化的组件，这个“找变化”的过程在 React...