【问题标题】:Is useEffect inside custom hook considered a bad practice?自定义挂钩中的 useEffect 是否被认为是一种不好的做法?
【发布时间】:2022-12-22 18:07:21
【问题描述】:

我试图创建一个可重用的挂钩,其中包括来自反应查询的 2 个其他突变挂钩,它执行 2 个不同的操作。我成功地创建了我的自定义挂钩,一切都按预期工作。我唯一的问题是,在构建挂钩时,我必须在自定义挂钩中使用 useEffect。我只是想知道在自定义挂钩中使用 useEffect 是否是一种不好的做法,我是否需要改变我的方法?会因此而出现任何性能问题吗?有什么我应该注意的吗?

【问题讨论】:

  • 这是一种非常常见的模式,一点也不糟糕。事实上,每当您在组件中看到 useState 和 useEffect 时,您应该问问自己这是否应该是自定义挂钩。大多数时候答案是“是”。对此个人看法。

标签: reactjs react-hooks react-query


【解决方案1】:

这是一件很常见的事情。 The official documentation describes a custom hook that uses useEffect。

您唯一应该注意的是,与往常一样,您的钩子不应该通过在钩子本身之外维护任意共享状态来故意破坏钩子隔离。

【讨论】:

  • 你的钩子不应该保持任何共享状态- 你这是什么意思?
  • @KonradLinkowski 我指的是通过在挂钩本身之外维护任意共享状态来故意破坏挂钩隔离
【解决方案2】:

我认为“通过在挂钩本身之外维护任意共享状态来故意破坏挂钩隔离”指的是发生在我身上的事情。我在自定义挂钩中存储了一个“变量”(使用 useState),但我希望该变量可以在外部 React 组件中访问,但有时自定义挂钩状态会被重置,因此该值也会被重置,并且 React 组件会因此而受苦。 我认为总体思路是始终保持秩序,您在外部钩子/React 组件中定义状态,将该状态传递给自定义钩子,自定义钩子可以生成其他数据,这些数据可以在某些处理步骤后返回(例如使用 Effect)并且数据可以在外部挂钩/React 组件中用作“由某些初始状态生成的状态”,它仅在外部挂钩/React 组件调用者中持久存在。 因此,在您和我的情况下,永远不要在自定义挂钩中初始化和维护外部挂钩/React 组件调用者状态,也永远不要在您的自定义挂钩中修改外部调用者给出的初始状态。

抱歉,这可能会混淆我写的内容,但这对我来说也不是很清楚。希望它比伊戈尔给你的简短回答更清楚。 祝你好运 !

【讨论】:

    猜你喜欢
    • 2015-10-29
    • 1970-01-01
    • 2017-12-18
    • 1970-01-01
    • 2018-01-25
    • 1970-01-01
    • 2017-07-28
    • 2011-06-11
    相关资源
    最近更新 更多