reactjs - 我可以依赖组件中的 useEffect 顺序吗？

Question

考虑以下模式:

const Comp = ({ handler })=> {
  // handler is some callback of the form ( ) => void
  useSomeHook(handler);
  //...
}

function useSomeHook(cb) {
  const ref = useRef()

  useEffect(() => {
    ref.current = cb; // update ref before second useEffect
  })

  useEffect(() => {
    // use the current (most recent) ref value
    const iv = setInterval(() => { ref.current() }, 3000) 
    return () => { clearInterval(iv) };
  }, []) // run only after first render
}

问题:我可以相信这个事实吗？首先 useEffect 总是在第二秒之前执行 useEffect ，所以ref已经更新了吗？

背景:我的目的是避免记住Comp中传入的回调。 ( useCallback ) 并设置 cb作为部门我特别感兴趣的是，这个可变引用模式在 React 世界中是否有效 - 上面只是一个人为的示例。

我想，读完 a tweet from Dan Abramov 后，答案将是明确的“是!” 。不过，following issue状态:

We do not make guarantees about sibling order, whether within a component or between siblings. This is because strong guarantees there hinder refactoring. Within a component, you should be able to re-order Hooks—especially, custom ones.

我对上述陈述的解释是否错误 - 或者链接有点矛盾？感谢任何澄清。

PS:我知道linked post 。这个问题更多的是关于一般模式、官方文档以及与提到的矛盾(？)陈述相关的问题。

谢谢!

Answer 1

调用它们的顺序很重要，据我所知，组件中的两个 useEffect 调用将始终以相同的顺序运行。这就是 React 识别哪个钩子(Hook)是哪个钩子(Hook)的方式(基于顺序)。

出于上述原因，您不能做的主要事情之一是有条件地运行钩子(Hook):React 会根据钩子(Hook)在组件中调用的顺序(索引)来跟踪调用的钩子(Hook)。

这句话讨论的是组件中以及父组件和子组件之间的清理调用顺序。通常，您在清理部分所做的事情不应影响其他 Hook 。通常你要做的就是清除钩子(Hook)中任何持久的副作用。诸如取消 API 调用和清除间隔之类的事情。

We guarantee that parent effects are destroyed before the child ones. The reason for this is that parents often tend to depend on some resource created by the child. Such as removing a listener from a DOM node managed imperatively by a child. If the child disposes its resources first, the parent might not be able to properly clean itself up. This is not specific to Hooks — it’s how componentWillUnmount works as well.

We do not make guarantees about sibling order, whether within a component or between siblings. This is because strong guarantees there hinder refactoring. Within a component, you should be able to re-order Hooks—especially, custom ones. Between siblings, it is expected that you can re-order them safely too. It is also common that only one sibling updates or unmounts, so dependencies between siblings cannot be reliable anyway.

父子之间的顺序已设置。例如，渲染 2 个子组件的父组件。

<Parent>
  <Child/>
  <Child/>
</Parent>

编辑:这就是我重构代码的方式:

我会确保在初始 useRef 中包含 cb，然后使用第一个效果的依赖数组中的 cb 来更新引用。

然后你要确保清除第二个效果中的间隔。

const Comp = ({ handler }) => {
  // handler is some callback of the form ( ) => void
  useSomeHook(handler);
  //...
};

function useSomeHook(cb) {
  const ref = useRef(cb);

  useEffect(() => {
    ref.current = cb; // update ref before second useEffect
  },[cb]);

  useEffect(() => {
    const id = setInterval(() => {
      ref.current();
    }, 3000); // use the current (most recent) ref value
    return () => {
      clearInterval(id);
    };
  }, []); // run only after first render
}