理解React Context与Ref的结合应用
在react中，ref是访问dom节点或组件实例的一种方式。当我们需要在多个组件之间共享一个dom元素的ref时，react context提供了一种高效且简洁的机制。例如，一个父组件可能拥有一个dom元素的ref，并希望其子组件能够基于此ref执行某些操作，如添加事件监听器。
考虑以下场景：一个EditorProvider组件管理一个div元素的ref，并通过Context将其暴露给消费组件。
import React, { useRef, useContext, useMemo } from 'react';
// 定义Context的类型
interface EditorContextProps {
historyState: any; // 示例，具体类型根据实际需求定义
ref: React.RefObject;
}
// 创建Context
const EditorContext = React.createContext(undefined);
// 自定义Hook，方便消费Context
export function useEditorContext(): EditorContextProps {
const context = useContext(EditorContext);
if (context === undefined) {
throw new Error('useEditorContext must be used within an EditorProvider');
}
return context;
}
// EditorProvider组件
export default function EditorProvider({ children }: { children: React.ReactNode }) {
const ref = useRef(null); // 创建ref
const historyState = useMemo(() => ({ /* 初始状态 */ }), []); // 示例
const context = { historyState, ref };
return (
{/* 将ref绑定到DOM元素 */}
{children}
);
} 上述代码展示了如何通过EditorProvider将一个HTMLDivElement的ref共享出去。消费组件（例如一个Lexical插件）可以通过useEditorContext钩子获取到这个ref。
blur事件的局限性与focusout的优势
当消费组件尝试监听这个共享ref上的失焦事件时，一个常见的误区是使用blur事件。
import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider'; // 假设路径
function MyLexicalPlugin() {
const { ref } = useEditorContext();
const blurHandler = useCallback((event: FocusEvent) => {
console.log('Blurred');
// 在这里处理失焦逻辑
}, []);
useEffect(() => {
const element = ref.current;
if (element) {
// 错误示范：blur事件不冒泡
element.addEventListener('blur', blurHandler, false);
}
return () => {
if (element) {
element.removeEventListener('blur', blurHandler);
}
};
}, [ref.current, blurHandler]); // 依赖项中包含ref.current
return null; // 插件通常不渲染DOM
}上述代码中，blurHandler可能不会按预期触发，尤其是当焦点从ref所指向的div内部的某个子元素移出时。这是因为blur事件不会冒泡。这意味着，如果焦点从一个子元素移出，blur事件只会在该子元素上触发，而不会传播到其父元素（即我们通过ref引用的div）。
为了解决这个问题，我们应该使用focusout事件。focusout事件与blur事件类似，都表示元素失去焦点，但关键区别在于focusout事件会冒泡。当元素本身或其任何后代元素失去焦点时，focusout事件都会在元素上触发。这使得它非常适合在父元素上监听子元素的失焦行为。
使用focusout事件实现正确的失焦监听
将useEffect中的blur事件替换为focusout即可解决问题：
import React, { useEffect, useCallback } from 'react';
import { useEditorContext } from './EditorProvider'; // 假设路径
function MyLexicalPlugin() {
const { ref } = useEditorContext();
const blurHandler = useCallback((event: FocusEvent) => {
console.log('Blurred or focus moved out from a child element');
// 在这里处理失焦逻辑
}, []);
useEffect(() => {
const element = ref.current;
if (element) {
// 正确做法：使用focusout事件，它会冒泡
element.addEventListener('focusout', blurHandler);
} else {
return; // 如果element不存在，则不进行操作
}
// 清理函数：在组件卸载或依赖项改变时移除事件监听器
return () => {
if (element) { // 再次检查element是否存在，以防万一
element.removeEventListener('focusout', blurHandler);
}
};
}, [ref.current, blurHandler]); // 依赖项中包含ref.current和blurHandler
return null;
}代码解析与注意事项：
- useCallback包裹事件处理函数： blurHandler被useCallback包裹，这确保了在ref.current不变的情况下，blurHandler的引用在每次渲染时保持稳定。这对于useEffect的依赖项优化非常重要，避免不必要的事件监听器重新注册。
-
useEffect的依赖项：
- ref.current：当ref指向的DOM元素发生变化时（尽管这种情况在EditorProvider中通常不会发生，但作为最佳实践，应包含），useEffect会重新运行。
- blurHandler：虽然我们使用了useCallback，但如果blurHandler内部依赖了外部变量，并且这些变量发生变化，blurHandler的引用也会改变，此时useEffect需要重新运行以注册新的事件处理函数。
- 清理函数： useEffect返回的函数是清理函数。它会在组件卸载时或useEffect的依赖项发生变化并重新执行之前运行。在这里，我们移除了之前添加的focusout事件监听器，防止内存泄漏。
- focusout vs focusin： 类似的，focusin事件是focus事件的冒泡版本。如果你需要在父元素上监听子元素的获取焦点行为，可以使用focusin。
- 条件检查： 在useEffect内部，始终检查ref.current是否为null。在组件挂载的初始阶段，ref.current可能尚未被赋值。
总结
在React中，通过Context共享ref是管理复杂组件间DOM交互的强大模式。当需要监听这些共享ref上的焦点事件时，理解blur和focusout（或focus和focusin）之间的区别至关重要。focusout事件的冒泡特性使其成为在父元素上捕获子元素失焦行为的理想选择。结合useEffect和useCallback的正确使用，我们可以构建健壮且无内存泄漏的事件监听机制。
