React 电视端应用：处理遥控器焦点管理（Focus Management）的 React 高阶组件封装-程序员充电站

各位好，欢迎来到今天的“React 电视端应用开发”特别讲座。我是你们的老朋友，一个在屏幕前敲代码敲得手指比遥控器按键还灵活的资深工程师。

今天我们要聊的话题，听起来很枯燥，但却是每一个电视应用开发者的噩梦，也是每一个坐在沙发上只想换台却找不到“确认”键的用户的心头大恨——那就是焦点管理。

在手机上，我们有触摸屏，手指指哪打哪，那叫一个随心所欲。但在电视上？哈，我们手里拿的是个“瞎子”遥控器。它只知道方向，不知道你在哪，更不知道你心里想的是哪个按钮。如果你作为开发者，不能把这个“瞎子”指挥得服服帖帖，那你的应用体验就等于是在给用户设置障碍赛。

所以，今天我们不讲怎么写漂亮的 CSS，不讲怎么优化 Bundle 大小。我们来聊聊怎么给 React 组件装上“大脑”，让它们知道什么时候该抢镜，什么时候该隐身，以及当用户按“下”键时，到底该跳到哪个倒霉蛋身上。

准备好了吗？把手里的薯片放下，咱们开始这场关于“遥控器与 DOM 的博弈”。

第一部分：DOM 是平的，但电视 UI 是立体的

首先，我们要面对一个残酷的现实：HTML DOM 是平的，是一棵树，但电视应用的 UI 往往是复杂的、立体的，甚至是重叠的。

当你写一个 React 组件，你在div里面套div，这很正常。但是，当你按下遥控器的“下”键时，浏览器只知道document.activeElement是谁。如果你只是简单地在键盘事件里写e.key === 'ArrowDown'，然后去遍历 DOM 节点，你会发现一个巨大的坑：DOM 节点的顺序并不总是等于视觉上的顺序。

核心概念：虚拟焦点树

为了解决这个问题，我们需要在 React 组件内部维护一个“虚拟焦点树”。这个树不依赖 DOM 的物理顺序，而是依赖你的业务逻辑。

在这个虚拟树里，每个组件都是一颗节点，都有坐标，都有父子关系。当你移动焦点时，你不是在 DOM 里乱逛，而是在这个虚拟树上“爬树”。

我们的目标是封装一个高阶组件（HOC），让所有需要被遥控器控制的组件都继承这个 HOC 的能力。这就好比给每个组件都发了一本“驾驶员手册”，告诉它：“嘿，小子，当别人按上键时，你得告诉他们去哪。”

第二部分：基础 HOC —— 给组件加上“焦点”属性

让我们从最简单的开始。我们创建一个withFocusHOC。它的职责很简单：监听焦点变化，当组件获得焦点时，调用focus()方法；失去焦点时，调用blur()方法。

这听起来很简单，对吧？但细节决定成败。

代码示例 1：基础版的 withFocus

import React, { useEffect, useRef, ReactNode } from 'react'; // 定义 HOC 的类型，确保组件必须包含 focus 和 blur 方法 const withFocus = <P extends object>( WrappedComponent: React.ComponentType<P & { focused: boolean }> ) => { return (props: P) => { const ref = useRef<HTMLElement>(null); const [focused, setFocused] = React.useState(false); // 核心逻辑：当 focused 状态改变时，操作 DOM useEffect(() => { if (focused && ref.current) { ref.current.focus(); } else if (!focused && ref.current) { ref.current.blur(); } }, [focused]); // 暴露给父组件的方法：手动让这个组件获得焦点 const handleFocus = () => { setFocused(true); }; const handleBlur = () => { setFocused(false); }; // 将 ref 挂载到第一个子元素上，这样 ref.current 就能拿到真实的 DOM 节点 return ( <div ref={ref as any} onFocus={handleFocus} onBlur={handleBlur}> <WrappedComponent {...props} focused={focused} /> </div> ); }; }; export default withFocus;

专家点评：

看到这里，你可能会说：“这就完了？这也太简单了吧。”

别急，这只是第一步。上面的代码有个巨大的逻辑漏洞：它没有处理遥控器的方向键！

上面的代码只是被动地响应了onFocus和onBlur事件。也就是说，如果用户在电视上按“确认”键，我们并没有捕获这个事件。而且，如果用户按“上”或“下”，我们的组件完全不知道该跳到哪个兄弟组件身上。

所以，我们的 HOC 需要升级。我们需要引入一个全局焦点管理器。

第三部分：焦点管理器 —— 中央集权制

在 React 中，最好的方式是使用 Context API。我们需要一个全局的FocusManager，所有的组件都向它注册自己，当焦点移动时，它告诉下一个组件：“嘿，该你上场了。”

代码示例 2：FocusManager Context

import React, { createContext, useContext, useState, ReactNode } from 'react'; // 定义焦点移动的方向 type Direction = 'up' | 'down' | 'left' | 'right' | 'enter'; // 焦点管理的 Context const FocusManagerContext = createContext({ register: (id: string) => {}, // 注册组件 unregister: (id: string) => {}, // 注销组件 focus: (id: string) => {}, // 聚焦到指定组件 navigate: (direction: Direction) => void, // 导航方向 focusNext: () => void // 简单的下一个 }); // 全局状态 const useFocusManager = () => { // 这里我们用一个 Map 来存储所有可聚焦组件的 ID // 实际项目中，你可能需要存储更复杂的数据，比如网格的坐标 const [components, setComponents] = useState<Map<string, HTMLElement>>(new Map()); const [currentFocus, setCurrentFocus] = useState<string | null>(null); // 注册 const register = (id: string) => { setComponents(prev => new Map(prev).set(id, document.getElementById(id)!)); }; // 注销 const unregister = (id: string) => { setComponents(prev => { const next = new Map(prev); next.delete(id); return next; }); }; // 聚焦到指定 ID const focus = (id: string) => { const el = components.get(id); if (el) { el.focus(); setCurrentFocus(id); } }; // 核心功能：处理方向键 const navigate = (direction: Direction) => { if (!currentFocus) return; // 这里需要根据具体的布局逻辑（网格、列表、树形）来实现 // 简单起见，我们假设是线性列表 const ids = Array.from(components.keys()); const currentIndex = ids.indexOf(currentFocus); let nextIndex = currentIndex; if (direction === 'down') nextIndex = currentIndex + 1; if (direction === 'up') nextIndex = currentIndex - 1; if (nextIndex >= 0 && nextIndex < ids.length) { focus(ids[nextIndex]); } }; return { register, unregister, focus, navigate, focusNext }; }; export { FocusManagerContext, useFocusManager };

专家点评：

上面的代码实现了一个非常基础的“线性导航”。在大多数电视应用中，这已经能跑通 80% 的场景了。但是，现实是残酷的。

如果用户在播放视频的界面，按“上”，他应该是想回到播放列表，而不是回到视频播放器本身的上一帧（如果有的话）。如果用户在一个 3×3 的网格里，按“下”，他应该跳到下一行的第一个，而不是下一行的第二个。

这就要求我们的 HOC 必须知道自己在网格中的位置。

第四部分：进阶 HOC —— 网格与坐标系统

为了支持复杂的布局，我们需要在注册组件时传递坐标信息。

代码示例 3：带坐标的 HOC

import React, { useEffect, useRef, ReactNode } from 'react'; import { FocusManagerContext } from './FocusManager'; type GridPosition = { x: number; // 列索引 y: number; // 行索引 cols: number; // 总列数 rows: number; // 总行数 }; const withFocus = <P extends object & { focused: boolean }>( WrappedComponent: React.ComponentType<P>, position: GridPosition // 关键！组件需要知道自己在哪 ) => { return (props: P) => { const ref = useRef<HTMLElement>(null); const [focused, setFocused] = React.useState(false); const { register, unregister, focus, navigate } = React.useContext(FocusManagerContext); // 组件挂载时，注册自己，并带上坐标 useEffect(() => { const id = Math.random().toString(36).substr(2, 9); // 生成唯一 ID register({ id, position, element: ref.current! }); return () => { unregister(id); }; }, []); // 焦点状态变化时，操作 DOM useEffect(() => { if (focused && ref.current) { ref.current.focus(); } else if (!focused && ref.current) { ref.current.blur(); } }, [focused]); // 处理遥控器事件 const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { e.preventDefault(); // 触发自定义的确认事件 (e.currentTarget as HTMLElement).click(); return; } // 交给全局管理器处理方向键 navigate(e.key as any); }; return ( <div ref={ref as any} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} onKeyDown={handleKeyDown} className={focused ? 'focused-style' : ''} > <WrappedComponent {...props} focused={focused} /> </div> ); }; }; export default withFocus;

专家点评：

现在，我们的 HOC 已经具备基本的导航能力了。但是，FocusManagerContext里的navigate函数还是个空壳。我们需要在FocusManager里实现真正的“寻路算法”。

这就像是玩贪吃蛇。当前是x, y，按“下”键，新的坐标nextX, nextY应该是多少？

代码示例 4：实现网格导航逻辑

// 在 FocusManagerContext 的逻辑中 const navigate = (direction: Direction) => { if (!currentFocus) return; // 获取当前组件的所有信息 const current = components.get(currentFocus); if (!current || !current.position) return; const { x, y, cols, rows } = current.position; let nextX = x; let nextY = y; // 简单的网格寻路逻辑 switch (direction) { case 'up': nextY = y > 0 ? y - 1 : rows - 1; // 循环滚动，或者在这里 return 不动 break; case 'down': nextY = y < rows - 1 ? y + 1 : 0; break; case 'left': nextX = x > 0 ? x - 1 : cols - 1; break; case 'right': nextX = x < cols - 1 ? x + 1 : 0; break; default: return; } // 找到目标组件 // 注意：这里需要根据 ID 生成规则来查找，或者我们在 register 时存一个 Map<position, id> // 假设我们有一个 Map 存储位置到 ID 的映射 const targetId = positionMap.get(`${nextX},${nextY}`); if (targetId) { focus(targetId); } };

到这里，基础的网格导航就完成了。但是，电视应用还有一个大问题：焦点陷阱。

第五部分：焦点陷阱 —— 别让用户跑出你的游戏

想象一下，你正在玩一个电视游戏，突然弹出一个广告或者设置窗口。你按“下”键，焦点还在广告上，怎么也点不到“关闭”按钮。你按“上”键，焦点还在广告上。你绝望了，只能去关电视。

这就是焦点陷阱。当一个模态框出现时，焦点必须被锁死在这个模态框内部。一旦用户按“退出”键，焦点必须回到上一个位置。

代码示例 5：焦点陷阱模式

我们需要在FocusManager中引入“栈”的概念。

// 修改 FocusManagerContext const FocusManagerContext = createContext({ // ... 原有的 register, focus trapFocus: (id: string) => void, // 进入陷阱 releaseFocus: () => void, // 退出陷阱 }); // 修改 useFocusManager 逻辑 const [focusStack, setFocusStack] = useState<string[]>([]); // 记录栈 const trapFocus = (id: string) => { setFocusStack(prev => [...prev, id]); focus(id); // 进入陷阱时，强制聚焦到该组件 }; const releaseFocus = () => { setFocusStack(prev => prev.slice(0, -1)); // 退出陷阱时，通常需要回到上一个栈顶元素，或者让用户手动导航 if (prev.length > 0) { focus(prev[prev.length - 1]); } };

代码示例 6：HOC 中的陷阱逻辑

const withFocus = (WrappedComponent, position) => { return (props) => { // ... 前面的逻辑 const { trapFocus, releaseFocus } = useFocusManager(); const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Backspace' || e.key === 'Exit') { // 检查当前组件是否是陷阱的栈顶 // 这里需要更复杂的逻辑来判断是否应该退出 releaseFocus(); return; } // ... 其他方向键逻辑 }; return ( <div // ... ref, on... 事件 onClick={() => { // 当用户用鼠标点击时，也要进入陷阱 trapFocus(id); }} > <WrappedComponent {...props} /> </div> ); }; };

专家点评：

焦点陷阱的核心在于控制权。一旦进入陷阱，所有的键盘事件都只能在这个组件内部处理。如果 HOC 没有拦截“退出”键，焦点就会逃逸出去。

第六部分：自动焦点 —— 当鼠标遇上遥控器

这是电视端开发中最容易翻车的地方。

用户在电视上用鼠标（或者触控板）点击了“播放”按钮。此时，焦点应该自动跳到“播放”按钮上，以便用户紧接着按“确认”键。如果你没有处理好这个逻辑，用户就得多按一次键，体验极差。

代码示例 7：自动聚焦

在 HOC 中，我们需要监听组件的onClick事件。

const withFocus = (WrappedComponent, position) => { return (props) => { const { focus } = useFocusManager(); const [focused, setFocused] = React.useState(false); // ... ref, onKeyDown 逻辑 const handleClick = (e: React.MouseEvent) => { e.stopPropagation(); // 防止冒泡 focus(id); // 强制聚焦 }; return ( <div ref={ref as any} // ... 其他属性 onClick={handleClick} // 关键！ > <WrappedComponent {...props} focused={focused} /> </div> ); }; };

专家点评：

注意e.stopPropagation()。如果父组件也有onClick，而你又想保持焦点在子组件上，你必须阻止事件冒泡。否则，父组件可能会抢走焦点，导致子组件失去“焦点状态”，从而在下一次按键时无法接收键盘事件。

第七部分：数字键盘 —— 快捷键的艺术

现在的电视遥控器，左下角通常有一排数字键（0-9）。这是电视端应用的一大特色。我们需要支持通过数字键直接跳转到对应的组件。

代码示例 8：数字键支持

const handleKeyDown = (e: React.KeyboardEvent) => { // ... 方向键逻辑 if (e.key >= '0' && e.key <= '9') { const num = parseInt(e.key); // 假设我们有一个数字映射表，或者直接按顺序找第 N 个组件 const allIds = Array.from(components.keys()); if (num < allIds.length) { focus(allIds[num]); } } };

专家点评：

数字键支持通常与自动聚焦结合使用。比如，用户按“1”，焦点跳到“首页”，然后用户按“2”，焦点跳到“我的”页面。这种交互非常符合电视用户的习惯。

第八部分：性能优化 —— 不要在渲染中聚焦

React 是声明式的。如果你在render函数里写if (focused) element.focus()，那你的应用会卡得像老牛拉车。

为什么？因为element.focus()会触发浏览器的重排。如果你在组件树的深层节点里做这个操作，每次父组件更新，焦点就会闪烁，性能会直线下降。

最佳实践：

只操作真实 DOM：确保ref.current是一个真实的 DOM 元素。
使用 useEffect：只在focused状态改变时触发focus()。
避免在 render 中调用 focus：永远不要在 return 语句中调用ref.current.focus()。

代码示例 9：优化的 useEffect

useEffect(() => { if (focused && ref.current) { // 使用 requestAnimationFrame 确保在浏览器下一帧渲染后再聚焦 requestAnimationFrame(() => { ref.current.focus(); }); } }, [focused]);