JavaScript如何追踪“上一个”状态？从DOM到React/Vue的全面实践307

好的，各位前端探索者们，大家好！我是你们的中文知识博主。今天我们要聊一个在JavaScript开发中无处不在，却又常常被巧妙隐藏起来的概念——如何追踪“上一个”状态或值。这个看似简单的问题，在实际项目中却有着千变万化的应用场景和实现方式。让我们以`[javascript prev]`为线索，深入挖掘JavaScript中“前一个”的奥秘与实践。
---

在JavaScript的世界里，数据和状态的变化是常态。我们编写的代码，很多时候都在响应用户的交互、数据的更新或时间的流逝。然而，在这些动态变化的场景中，我们经常会遇到一个核心需求：如何获取一个值或状态在它发生变化之前是什么样子？也就是说，我们不仅关心“现在”是什么，还关心“上一个”瞬间是什么。

这个“上一个”的概念，在不同的语境下有不同的体现：它可能是DOM结构中前一个兄弟元素，可能是组件生命周期中前一次渲染的Props或State，也可能是数据更新前的旧值。理解并掌握如何在JavaScript中追踪这些“前一个”信息，能极大提升我们编写出更健壮、更智能、响应更灵活的代码的能力。

本文将从最基础的JavaScript原生方法，到现代前端框架中的高级用法，全面解析如何优雅地追踪“前一个”值/状态。

一、原生JavaScript中的“前一个”：变量缓存与DOM操作

最直接、最原始的追踪“前一个”值的方法，就是利用JavaScript的变量作用域和赋值特性，手动缓存上一个状态。

1.1 简单变量缓存法

当你需要比较某个变量的当前值和上一个值时，最简单的方式就是定义一个额外的变量来存储旧值。
let previousValue = null;
let currentValue = 0;
function updateValue(newValue) {
previousValue = currentValue; // 在更新 currentValue 之前，将其当前值赋给 previousValue
currentValue = newValue;
(`旧值: ${previousValue}, 新值: ${currentValue}`);
}
updateValue(10); // 旧值: 0, 新值: 10
updateValue(20); // 旧值: 10, 新值: 20
updateValue(15); // 旧值: 20, 新值: 15

应用场景：

滚动方向判断：记录上一次的滚动位置，判断用户是向上还是向下滚动。
鼠标移动轨迹：记录上一次的鼠标坐标，计算鼠标移动的距离或速度。
计时器/动画：记录上一帧的时间戳或元素位置，计算增量。

示例：判断滚动方向
let lastScrollY = ; // 初始化为当前滚动位置
('scroll', () => {
const currentScrollY = ;
if (currentScrollY > lastScrollY) {
('向下滚动');
} else if (currentScrollY < lastScrollY) {
('向上滚动');
}
lastScrollY = currentScrollY; // 更新上一次的滚动位置
});

1.2 DOM元素操作：`previousElementSibling`与`previousSibling`

在DOM（文档对象模型）中，如果你想获取一个元素在文档流中的“前一个”兄弟元素，JavaScript提供了专门的API。

``：返回该元素在DOM树中前一个兄弟元素（只包含元素节点，忽略文本节点和注释节点）。
``：返回该元素在DOM树中前一个兄弟节点（包括元素节点、文本节点、注释节点等）。

通常情况下，我们更常用`previousElementSibling`来操作HTML元素。
/* HTML 结构示例

第一个段落
第二个元素

目标元素按钮
*/
const targetElement = ('target');
if (targetElement) {
const prevElement = ; // 获取上一个元素节点
const prevNode = ; // 获取上一个节点（可能是一个文本节点，即换行符）
('前一个兄弟元素:', prevElement ? : '无'); // 输出: SPAN
('前一个兄弟节点:', prevNode ? : '无'); // 输出: #text (通常是换行符)
if (prevElement) {
= '#add8e6'; // 给上一个兄弟元素设置背景色
}
}

应用场景：

列表操作：选中某个列表项时，高亮显示它上一个兄弟项。
表单验证：当某个输入框验证失败时，定位到其上一个相关的提示信息元素。
动态布局：根据当前元素的前一个元素的状态来调整自身样式。

二、现代前端框架中的“前一个”：Ref、Watchers与Hooks

在React、Vue等现代前端框架中，由于组件化和响应式数据的引入，追踪“前一个”状态有了更优雅、更符合框架范式的方式。

2.1 React中的`useRef`与自定义Hook

在React函数组件中，由于每次渲染都会重新执行组件函数，直接声明一个变量来存储旧值会随着重新渲染而丢失。这时，`useRef`就派上用场了。`useRef`可以创建一个在组件整个生命周期内保持不变的对象，其`.current`属性可以在渲染之间保持值。

我们可以利用`useRef`来存储上一次渲染时的某个值或Props。
import React, { useRef, useEffect } from 'react';
function MyComponent({ count }) {
const prevCountRef = useRef(); // 创建一个ref来存储旧的count值
useEffect(() => {
// 在 effect 执行时，存储的是上一次渲染时的 count 值
('旧的count:', );
('新的count:', count);
// 更新 ref 的当前值，为下一次渲染做准备
= count;
}, [count]); // 只有当 count 变化时才执行 effect
return (

当前 Count: {count} );
}
// 父组件使用示例
// function App() {
// const [value, setValue] = (0);
// return (
// <div>
// <MyComponent count={value} />
// <button onClick={() => setValue(value + 1)}>增加</button>
// </div>
// );
// }

为了更方便地复用这个逻辑，我们可以将其封装成一个自定义Hook：
import { useRef, useEffect } from 'react';
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
= value; // 在每次渲染后更新 ref 的值
}, [value]); // 只有当 value 变化时才更新
return ; // 返回上一次渲染时的 value
}
// 在组件中使用
function MyAnotherComponent({ userName }) {
const prevUserName = usePrevious(userName); // 获取上一个 userName
useEffect(() => {
if (prevUserName !== undefined) { // 避免首次渲染时 prevUserName 为 undefined
('旧的用户名:', prevUserName);
('新的用户名:', userName);
if (prevUserName !== userName) {
(`用户名从 ${prevUserName} 变更为 ${userName}`);
}
}
}, [userName, prevUserName]);
return (

当前用户名: {userName} );
}

应用场景：

数据比较：在`useEffect`中比较当前props/state和上一次的props/state，执行副作用（如API请求、动画）。
状态回滚：存储组件内部的复杂状态历史，实现撤销/重做功能。
性能优化：仅当关键数据发生变化时才重新计算或渲染。

2.2 Vue中的`watch`侦听器

Vue提供了强大的`watch`选项（或Composition API中的`watch`函数）来侦听数据的变化。它会自动提供变化前后的两个值：新值（`newValue`）和旧值（`oldValue`）。

Options API示例：
export default {
data() {
return {
message: 'Hello'
};
},
watch: {
message(newValue, oldValue) {
(`message 从 "${oldValue}" 变更为 "${newValue}"`);
}
},
methods: {
changeMessage() {
= 'Vue World';
}
}
};

Composition API示例：
<script setup>
import { ref, watch } from 'vue';
const count = ref(0);
// watch 接收一个响应式数据源和一个回调函数
watch(count, (newValue, oldValue) => {
(`count 从 ${oldValue} 变更为 ${newValue}`);
});
const increment = () => {
++;
};
</script>
<template>
<p>当前计数: {{ count }}</p>
<button @click="increment">增加</button>
</template>

对于复杂对象或数组的深度侦听，Vue的`watch`也提供了`deep: true`选项。
watch(someObject, (newValue, oldValue) => {
('对象变化', oldValue, newValue);
}, { deep: true });

应用场景：

数据同步：当某个数据变化时，触发异步请求或更新本地存储。
表单验证：侦听输入框值变化，实时进行验证，并根据新旧值提供更精确的错误提示。
动画触发：当某个状态从旧值变为新值时，触发相应的CSS动画或JavaScript动画。

三、更高级的“前一个”：状态历史与撤销/重做

当我们需要追踪的“前一个”不仅仅是上一个瞬间，而是一系列的历史状态时，我们就需要构建一个状态历史栈。这通常用于实现应用程序的“撤销”（Undo）和“重做”（Redo）功能。

核心思路是维护一个数组作为历史记录，每次状态更新时，将旧状态压入历史栈，并清空重做栈。执行撤销时，从历史栈弹出并压入重做栈；执行重做时，从重做栈弹出并压入历史栈。
class StateHistory {
constructor(initialState) {
= [initialState]; // 存储历史状态
= 0; // 当前状态在 history 中的索引
= []; // 存储重做状态
}
/
* 获取当前状态
*/
getCurrentState() {
return [];
}
/
* 更新状态并记录历史
* @param {any} newState - 新的状态
*/
commit(newState) {
// 如果当前状态不是历史记录的末尾（说明之前有撤销操作），则清除重做栈
if ( < - 1) {
= (0, + 1);
= []; // 清空重做栈
}
(newState);
= - 1;
('状态已提交:', newState);
}
/
* 撤销到上一个状态
*/
undo() {
if ( > 0) {
(()); // 将当前状态推入重做栈
--;
('已撤销，当前状态:', ());
return true;
}
('无法撤销');
return false;
}
/
* 重做到下一个状态
*/
redo() {
if ( > 0) {
(()); // 将重做栈顶的状态推入历史
++;
('已重做，当前状态:', ());
return true;
}
('无法重做');
return false;
}
}
// 使用示例
const editorHistory = new StateHistory({ text: '初始文本' });
(()); // { text: '初始文本' }
({ text: '修改1' });
({ text: '修改2' });
({ text: '修改3' });
(); // 已撤销，当前状态: { text: '修改2' }
(); // 已撤销，当前状态: { text: '修改1' }
(); // 已重做，当前状态: { text: '修改2' }
({ text: '新的修改4' }); // 提交新状态会清空重做栈
(); // 无法重做
(()); // { text: '新的修改4' }

应用场景：

富文本编辑器：实现文本内容的撤销和重做。
绘图工具：记录每次操作，方便用户回退。
配置界面：允许用户回退到之前的配置状态。

四、总结与最佳实践

追踪“前一个”状态是JavaScript开发中的一项基本而重要的技能。无论是简单的变量缓存，还是利用框架提供的强大功能，亦或是构建复杂的状态历史管理系统，选择合适的策略取决于你的具体需求和项目复杂度。

最佳实践建议：

明确需求：在动手之前，先思考你需要追踪的是什么？仅仅是上一个值，还是一个完整的历史记录？
选择合适的方法：原生变量缓存适用于简单场景；DOM API用于DOM结构；React `useRef`/自定义Hook和Vue `watch`是框架组件中追踪状态变化的利器；更复杂的撤销/重做则需要自定义状态管理。
注意性能与内存：尤其是在追踪大量数据或长时间历史时，要警惕可能带来的性能开销和内存占用。例如，限制历史记录的长度，或者只存储状态的差异而非完整状态。
代码清晰可维护：无论是哪种方式，都要确保变量命名清晰，逻辑易于理解。对于复杂逻辑，考虑封装成函数或自定义Hook。

希望通过本文的全面解析，你能对JavaScript中如何追踪“上一个”状态有了更深入的理解和掌握。下次当你遇到类似的需求时，相信你已经知道如何优雅地应对了！如果你在项目中还有其他追踪“prev”的奇妙用法，欢迎在评论区分享，我们一起交流学习！

2025-11-02

上一篇：JavaScript对齐：驾驭动态布局与响应式设计的关键技巧

下一篇：JavaScript 获取年份：告别旧日陷阱，拥抱精确未来！全面解析 `getFullYear` 与日期操作