在数组中定义React Hooks是否合规？如何优化视频播放控制逻辑？

1. 数组中定义Hooks是否符合React规则？ #

不符合。React Hooks的核心规则是：必须在组件函数的顶层直接调用Hooks，不能将Hooks调用嵌套在循环、条件判断、嵌套函数，或是数组字面量这类表达式内部。

你当前写法const playFilters = [useIsPageVisible(), useIsInViewport(videoElement)];将Hooks调用放在了数组初始化的表达式中，这违反了Hooks调用规则——React依赖稳定的Hooks调用顺序来跟踪状态，即便当前数组内的Hooks数量固定，这种写法也会降低代码可读性，后续维护中若不小心修改数组结构（比如增减Hooks），还会导致调用顺序混乱，引发难以排查的bug。

2. 更优的实现方式 #

修正Hooks调用位置 #

先在组件顶层单独调用每个Hooks，再组合成过滤数组，确保符合规则：

const Player = () => {
  // 顶层单独调用每个Hook，符合React规则
  const isPageVisible = useIsPageVisible();
  const isInViewport = useIsInViewport(videoElement);
  const playFilters = [isPageVisible, isInViewport];
  
  const player = useInitPlayer();

  useEffect(() => {
    if (!player) return;

    // 所有过滤条件满足则播放，否则暂停
    playFilters.every(Boolean) ? player.play() : player.pause();
  }, [player, playFilters])

  return <PlayerComponent player={player}/>
}

进一步优化：封装逻辑+减少不必要重渲染 #

将播放条件判断封装为自定义Hook，同时用useMemo缓存结果，避免useEffect频繁触发：

// 自定义Hook：封装播放条件判断逻辑
const usePlayConditions = (videoElement) => {
  const isPageVisible = useIsPageVisible();
  const isInViewport = useIsInViewport(videoElement);
  
  // 缓存条件结果，仅依赖变化时重新计算
  return useMemo(() => {
    return isPageVisible && isInViewport;
  }, [isPageVisible, isInViewport]);
};

const Player = () => {
  const shouldPlay = usePlayConditions(videoElement);
  const player = useInitPlayer();

  useEffect(() => {
    if (!player) return;

    // 执行播放/暂停操作
    const handlePlayPause = () => {
      shouldPlay ? player.play() : player.pause();
    };
    handlePlayPause();

    // 组件卸载时暂停视频，避免内存泄漏
    return () => {
      player.pause();
    };
  }, [player, shouldPlay])

  return <PlayerComponent player={player}/>
}

额外优化：处理异步竞态问题 #

如果useInitPlayer是异步初始化播放器，可能出现useEffect执行时播放器已过期的情况，可通过引用跟踪组件挂载状态：

const Player = () => {
  const shouldPlay = usePlayConditions(videoElement);
  const player = useInitPlayer();
  const isMounted = useRef(true);

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    if (!player || !isMounted.current) return;

    shouldPlay ? player.play() : player.pause();
  }, [player, shouldPlay])

  return <PlayerComponent player={player}/>
}

内容的提问来源于stack exchange，提问作者Shrihari Balasubramani