reactjs - useEffect 中的所有变量都绝对需要列为依赖项吗？

Question

useEffect 中使用的所有变量是否始终、绝对、无一异常(exception)地需要指定为依赖项？

我的用例(为演示目的而简化)涉及根据浏览器窗口的宽度执行不同的功能，但在浏览器窗口更改时不运行:

const scrollToTop = () => window.scrollTo(0, 0)
const scrollToTopOfArticle = () => window.scrollTo(0, 200)

function App({
  isDesktop,
  selectedArticle
}) {

  useEffect(() => {
    isDesktop ? scrollToTop() : scrollToTopOfArticle()
  }, [selectedArticle])

  return (
    <div className="App">
      <h1>{selectedArticle.title}</h1>
      <p>{selectedArticle.body}</p>
    </div>
  );
}

如果我将 isDesktop 添加到依赖项，那么只要用户在移动设备和桌面之间调整窗口大小时效果就会运行，这是不希望的，但我也知道效果中使用的所有内容都必须列为依赖。

关于如何协调这两个要求有什么建议吗？

Answer 1

如果你想制作一个useEffect()仅响应 selectedArticle 的变化, 使用 isDesktop和 selectedArticle初始化组件状态。每当selectedArticle变化，第一个useEffect()将使用传入的 Prop 更新两个状态，并触发第二个 useEffect()在下一次渲染时重新运行。

const scrollToTop = () => window.scrollTo(0, 0)
const scrollToTopOfArticle = () => window.scrollTo(0, 200)

function App({
  isDesktop,
  selectedArticle
}) {
  const [desktop, setDesktop] = useState(isDesktop)
  const [article, setArticle] = useState(selectedArticle)

  useEffect(() => {
    if (article !== selectedArticle) {
      setDesktop(isDesktop)
      setArticle(selectedArticle)
    }
  }, [isDesktop, selectedArticle, article])

  useEffect(() => {
    if (desktop) scrollToTop()
    else scrollToTopOfArticle()
  }, [desktop, article])

  return (
    <div className="App">
      <h1>{selectedArticle.title}</h1>
      <p>{selectedArticle.body}</p>
    </div>
  )
}

或者，您可以将这种锁定行为抽象为另一个钩子(Hook)，以便 isDesktop仅在 selectedArticle 时更新其实时值变化。注意 selectedArticle仍然需要成为滚动 Action 效果的依赖项，以便 useEffect()每次更改 selectedArticle 都会触发滚动操作即使isDesktop自上次触发以来未更改值。

const useLatch = (value, deps) => {
  const [state, setState] = useState(value)
  const effect = useCallback(() => { setState(value) }, [value])
  useEffect(effect, deps)
  return state
}

const scrollToTop = () => window.scrollTo(0, 0)
const scrollToTopOfArticle = () => window.scrollTo(0, 200)

function App({
  isDesktop,
  selectedArticle
}) {
  const latchedIsDesktop = useLatch(isDesktop, [selectedArticle])

  useEffect(() => {
    if (latchedIsDesktop) scrollToTop()
    else scrollToTopOfArticle()
  }, [latchedIsDesktop, selectedArticle])

  return (
    <div className="App">
      <h1>{selectedArticle.title}</h1>
      <p>{selectedArticle.body}</p>
    </div>
  )
}