如何在不违反useEffect依赖规则时，仅在目标Prop变化时调用回调Prop？

我开发了一个简易对话框组件，通过open Prop控制显示状态，onOpen Prop指定对话框打开时执行的回调。最初的实现如下：

const MyDialog = ({ open, onOpen, children }) => {
  React.useEffect(() => {
    if (open) {
      onOpen()
    }
  }, [open])

  return (
    <UnderlyingDialogComponent open={open}>
      {children}
    </UnderlyingDialogComponent>
  )
}

这个实现功能正常，但react-hooks/exhaustive-deps lint规则要求将onOpen加入useEffect的依赖数组。如果添加该依赖，onOpen自身引用变化时也会触发回调，不符合仅在open从false变为true时执行的需求。虽然useCallback能稳定onOpen的引用，但无法保证组件使用者会这么做，因此需要找到无需禁用lint规则的实现方式，或者明确是否可以忽略该规则。

方案一：用useRef跟踪open的历史状态，精准触发回调 #

通过useRef记录上一次的open值，只在open从关闭切换到打开时执行onOpen，同时将onOpen加入依赖数组以满足lint规则：

const MyDialog = ({ open, onOpen, children }) => {
  const prevOpenRef = React.useRef(false);

  React.useEffect(() => {
    // 仅当当前open为true且上一次为false时，执行回调
    if (open && !prevOpenRef.current) {
      onOpen();
    }
    // 更新历史状态
    prevOpenRef.current = open;
  }, [open, onOpen])

  return (
    <UnderlyingDialogComponent open={open}>
      {children}
    </UnderlyingDialogComponent>
  )
}

这种方式既符合lint要求，又能严格控制回调触发时机——即便onOpen引用变化，只要open状态没有从关闭转为打开，就不会误触发回调。

方案二：用useRef保存onOpen的最新引用 #

如果不想让主useEffect依赖onOpen，可以通过另一个useEffect将onOpen的最新引用同步到ref中，确保执行的是最新回调，同时满足lint规则：

const MyDialog = ({ open, onOpen, children }) => {
  const onOpenRef = React.useRef();

  // 实时同步onOpen的最新引用
  React.useEffect(() => {
    onOpenRef.current = onOpen;
  }, [onOpen])

  React.useEffect(() => {
    if (open) {
      onOpenRef.current();
    }
  }, [open]) // 仅依赖open，lint不会报错

  return (
    <UnderlyingDialogComponent open={open}>
      {children}
    </UnderlyingDialogComponent>
  )
}

这里的核心是把onOpen的引用维护在ref中，主逻辑的useEffect只关注open的状态变化，既避免了onOpen变化导致的误触发，又不会违反lint规则。

关于是否忽略lint规则 #

不建议直接忽略react-hooks/exhaustive-deps规则。该规则的存在是为了避免闭包陷阱——如果onOpen依赖了外部变量，不加入依赖数组可能导致执行的是旧版本的回调，捕获的变量并非最新值。如果确实需要临时跳过该规则，必须添加明确的注释说明原因：

React.useEffect(() => {
  if (open) {
    onOpen()
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [open])

但这种做法存在潜在风险，优先推荐前面两种符合lint规则的实现方式。

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