本文介绍一种不依赖硬编码 id 的现代 react 方案：通过 dom 引用 + context 状态管理，实现块级元素的精准选中与变更捕获，避免父子组件误触发，确保样式动态更新仅作用于实际变化的最小单元。
本文介绍一种不依赖硬编码 id 的现代 react 方案：通过 dom 引用 + context 状态管理，实现块级元素的精准选中与变更捕获，避免父子组件误触发，确保样式动态更新仅作用于实际变化的最小单元。
在构建可视化编辑器（如低代码页面构建器）时，一个核心需求是：当用户修改某一块内容（例如 <block>{start.name}</block>）时，系统必须精确识别并响应“这一块”的变更，而非其父级或祖先块。传统基于递归生成字符串 ID（如 start_1_1）的方式存在两大缺陷：一是 ID 依赖渲染顺序，结构微调即失效；二是 useEffect 监听 children 浅比较无法区分真实 DOM 变更，导致“假阳性”触发。
我们推荐采用 “引用优先、状态驱动” 的替代方案——完全绕过手动 ID 分配，转而利用原生 DOM 节点引用（ref）与 React Context 实现高精度变更感知。
✅ 核心思路：用 DOM 引用代替字符串 ID
- 每个
<block></block>绑定一个ref，直接持有其对应的真实 DOM 元素； - 通过 Context 全局共享当前选中/变更的 DOM 节点；
- 点击或内容变更时，只更新该节点的引用，天然规避层级污染。
? 实现步骤
1. 创建 Block 上下文（Context）
import { createContext, useContext, useState, ReactNode } from 'react';
const BlockContext = createContext<{
selected: HTMLElement | null;
select: (node: HTMLElement | null) => void;
reset: () => void;
} | null>(null);
export const BlockProvider = ({ children }: { children: ReactNode }) => {
const [selected, setSelected] = useState<HTMLElement | null>(null);
const select = (node: HTMLElement | null) => setSelected(node);
const reset = () => setSelected(null);
return (
<BlockContext.Provider value={{ selected, select, reset }}>
{children}
</BlockContext.Provider>
);
};
export const useBlock = () => {
const context = useContext(BlockContext);
if (!context) throw new Error('useBlock must be used within BlockProvider');
return context;
};2. 封装安全的 DOM 引用 Hook
import { useCallback, useState } from 'react';
export const useReference = () => {
const [node, setNode] = useState<HTMLElement | null>(null);
// useCallback 确保 ref 回调函数稳定，避免重复绑定
const ref = useCallback((element: HTMLElement | null) => {
if (element) setNode(element);
}, []);
return [node, ref] as const; // 类型推断更精确
};3. 改造 Block 组件（无 ID，纯引用驱动）
import { useEffect, useRef } from 'react';
import { useBlock } from './BlockContext';
import { useReference } from './useReference';
export const Block = ({
children,
className = "",
...props
}: React.HTMLAttributes<HTMLDivElement>) => {
const { selected, select } = useBlock();
const [node, ref] = useReference();
// 点击即选中当前块（支持直接操作 DOM）
const handleClick = () => {
if (node) {
select(node);
// ✅ 此处可立即应用 CSS 类：node.classList.add('selected');
console.log('Selected block:', node);
}
};
// 当 node 更新（首次挂载或重渲染），同步到 Context
useEffect(() => {
if (node) select(node);
}, [node, select]);
return (
<div
{...props}
ref={ref}
className={`${className} hover`}
onClick={handleClick}
>
{children}
</div>
);
};⚠️ 关键注意事项
-
不要在
useEffect中监听children：React 的children是 ReactElement 对象，其引用变化频繁且不反映真实 DOM 内容变更。应直接操作 DOM 节点（如监听MutationObserver）或结合业务逻辑（如表单输入事件）判断变更。 -
避免
useRef + useEffect组合陷阱：useRef不触发重渲染，若将其与useEffect依赖项混用（如原文中prevChildrenRef.current !== children），极易因闭包导致状态不同步。 -
持久化需求？用 localStorage + keypath 补充：若需刷新后恢复选中状态，可在
select()时将node.id或自定义data-block-key存入localStorage，并在useEffect中读取并querySelector恢复。
✅ 最终效果
- 修改
<block>{start.name}</block>时，仅该节点的 DOM 引用被选中； - 父级
<block></block>完全不受影响，useEffect不误触发； - 动态样式（如
node.style.border = '2px solid blue'）可精准施加，无需解析 ID 字符串； - 结构自由调整（增删兄弟节点、嵌套深度变化）不影响功能稳定性。
此方案以 React 生态最佳实践为基础，兼顾性能、可维护性与扩展性，是构建专业级块编辑器的推荐范式。
