#createSelector

createSelector 是一个工厂函数，用于为 @videojs/store 中的存储切片创建类型安全的选择器。它是 Video.js React 响应式状态管理的核心工具。

#概述

createSelector 函数由 Video.js React 提供，用于生成与特定存储切片关联的选择器函数。这些选择器可以传递给 usePlayer 钩子，实现对播放器状态的精确订阅。

#API 参考

#参数

#返回值

#选择器类型

Video.js React 提供以下内置选择器：

#播放器选择器

• selectBuffer - 缓冲状态
• selectControls - 控制栏状态
• selectError - 错误状态
• selectFullscreen - 全屏状态
• selectLive - 直播状态
• selectPiP - 画中画状态
• selectPlayback - 播放状态
• selectPlaybackRate - 播放速率状态
• selectRemotePlayback - 远程播放状态
• selectSource - 媒体源状态
• selectStreamType - 流类型状态
• selectTextTracks - 文本轨道状态
• selectTime - 时间状态
• selectVolume - 音量状态

#示例

import { createSelector, usePlayer } from '@videojs/react';

// 创建自定义选择器
const selectCustomState = createSelector('playback');

// 使用选择器订阅状态
function CustomComponent() {
  const playbackState = usePlayer(selectCustomState);
  
  return (
    <div>
      当前播放状态: {playbackState.paused ? '暂停' : '播放中'}
    </div>
  );
}

#组合多个选择器

import { selectPlayback, selectTime, usePlayer } from '@videojs/react';

function PlayerStatus() {
  const playback = usePlayer(selectPlayback);
  const time = usePlayer(selectTime);
  
  return (
    <div>
      <span>播放状态: {playback.paused ? '暂停' : '播放中'}</span>
      <span>当前时间: {time.currentTime}秒</span>
    </div>
  );
}

#工作原理

createSelector 基于 @videojs/store 的选择器模式工作：

1. 状态订阅：选择器函数订阅特定存储切片的变化
2. 类型推断：TypeScript 根据切片名称自动推断返回类型
3. 响应式更新：当订阅的状态变化时，组件自动重新渲染

#最佳实践

1. 在组件顶层定义选择器：避免在渲染过程中重新创建选择器
2. 组合使用：将多个选择器组合以获取复杂状态
3. 类型安全：利用 TypeScript 类型推断确保状态访问安全