从传统JavaScript到React的范式转变
在传统的javascript开发中，我们经常通过直接操作dom（如document.queryselector、element.innertext、element.onmouseover等）来实现各种交互效果。然而，当将这类代码迁移到react应用中时，直接复制粘贴往往会遇到问题，甚至导致应用行为异常。这主要是因为react采用了一种声明式编程范式，并通过虚拟dom（virtual dom）来高效管理ui更新。直接操作真实dom会绕过react的协调机制，破坏其内部状态管理，导致视图与实际状态不一致。
要将一个基于DOM操作的JavaScript效果转换为React组件，我们需要理解并应用以下核心React概念：
- 状态管理 (useState): 任何会随着时间变化并在UI中反映出来的数据都应该被视为组件的状态。对于文本乱码效果，显示在屏幕上的动态文本就是核心状态。
- 副作用管理 (useEffect): 涉及与外部系统（如DOM、浏览器API、定时器、网络请求）交互的逻辑，在React中被称为“副作用”。这些副作用应该在useEffect Hook中进行管理，包括事件监听的注册与注销、定时器的启动与清理等。
- DOM引用 (useRef): 尽管React鼓励声明式编程，但在某些特定场景下，我们仍然需要直接访问DOM元素，例如添加事件监听器、测量元素尺寸等。useRef Hook提供了一种在不触发重新渲染的情况下引用DOM元素或在组件生命周期内持久化可变值（如定时器ID）的方式。
实例解析：文本乱码特效的React化
让我们以一个常见的文本乱码（Scramble Text）特效为例，详细演示如何将其从原生JavaScript转换为React组件。
原始JavaScript代码分析
原始JavaScript代码通过onmouseover事件触发，使用setInterval定时器逐步将h1元素的innerText从随机字符替换为存储在data-value属性中的目标字符。
立即学习“Java免费学习笔记（深入）”；
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let interval = null;
document.querySelector("h1").onmouseover = event => {
let iteration = 0;
clearInterval(interval); // 清除现有定时器
interval = setInterval(() => {
event.target.innerText = event.target.innerText // 直接操作DOM
.split("")
.map((letter, index) => {
if(index < iteration) {
// 从data-value中获取目标字符
return event.target.dataset.value[index];
}
return letters[Math.floor(Math.random() * 26)]
})
.join("");
if(iteration >= event.target.dataset.value.length){
clearInterval(interval); // 达到目标后清除定时器
}
iteration += 1 / 3;
}, 30);
}这段代码的核心逻辑是：
- 鼠标悬停时，清除之前的定时器。
- 启动一个新的定时器，每30毫秒执行一次。
- 在每次执行中，遍历当前显示的文本：
- 如果索引小于iteration，则显示目标文本（来自data-value）中的对应字符。
- 否则，显示一个随机字符。
- 当所有字符都被揭示后，清除定时器。
转换为React组件
为了将上述逻辑转换为React组件，我们需要：
- 管理显示文本的状态: h1中显示的文本是动态变化的，所以它应该由useState管理。
- 处理鼠标悬停事件: 鼠标悬停事件是副作用，需要在useEffect中注册和注销。
- 管理定时器: setInterval和clearInterval是副作用，也需要在useEffect中进行。
- 获取DOM引用: 为了在useEffect中添加事件监听器和读取data-value属性，我们需要使用useRef获取h1元素的引用。
- 持久化定时器ID: interval变量需要在多次渲染之间保持其值，useRef也可以用于此目的。
以下是转换后的React组件代码：
import React, { useState, useEffect, useRef } from 'react';
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
/**
* 一个带有文本乱码特效的React组件。
* 当鼠标悬停在其上时，文本会从随机字符逐渐变为目标文本。
* @param {object} props - 组件的属性。
* @param {string} props.targetText - 最终要显示的文本。
*/
const ScrambleTextEffect = ({ targetText }) => {
// 1. 使用useState管理当前显示的文本状态
// 初始时，显示完整的目标文本，或者可以设置为随机字符
const [displayText, setDisplayText] = useState(targetText);
// 2. 使用useRef获取h1元素的引用，以便添加事件监听器
const h1Ref = useRef(null);
// 3. 使用useRef持久化定时器ID，以便在组件生命周期内管理它
const intervalRef = useRef(null);
// 4. useEffect处理副作用：事件监听、定时器逻辑和清理
useEffect(() => {
// 确保组件挂载或targetText变化时，显示文本初始化为目标文本
setDisplayText(targetText);
// 定义鼠标悬停事件处理函数
const handleMouseOver = () => {
let iteration = 0;
// 清除任何现有的定时器，防止重复触发
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
// 启动新的定时器
intervalRef.current = setInterval(() => {
setDisplayText(prevText => {
// 将当前显示的文本拆分成字符数组
return prevText
.split("")
.map((_char, index) => { // _char在此处未使用，我们关注索引
// 如果索引小于迭代次数，则从目标文本中揭示字符
if (index < iteration) {
return targetText[index]; // 修正：从targetText中获取字符
}
// 否则，显示一个随机字符
return letters[Math.floor(Math.random() * 26)];
})
.join(""); // 重新组合成字符串
});
// 当所有字符都被揭示后，清除定时器
if (iteration >= targetText.length) {
clearInterval(intervalRef.current);
intervalRef.current = null; // 重置ref
// 确保最终显示的文本就是目标文本
setDisplayText(targetText);
}
iteration += 1 / 3; // 每次迭代增加1/3，控制字符揭示速度
}, 30); // 每30毫秒执行一次
};
// 挂载时，为h1元素添加mouseover事件监听器
// 确保h1Ref.current存在，即元素已渲染
if (h1Ref.current) {
h1Ref.current.addEventListener("mouseover", handleMouseOver);
}
// 清理函数：组件卸载或依赖项变化时执行
return () => 
