微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我可以在 React/Preact 中为 useEffect 钩子使用动态选择的函数吗?

如何解决我可以在 React/Preact 中为 useEffect 钩子使用动态选择的函数吗?

我正在构建一个复杂的动画钩子序列。动画的选择取决于钩子接收到的 props。传统上,我会使用单个 useEffect,然后通过在依赖项数组中声明所有使用的依赖项来完成其中的所有操作。

然而,这使得整体效果非常笨拙。我想将该效果拆分为多个较小的函数,其中每个函数都有自己的依赖项列表。我可以在 Preact/React 中执行此操作,因为我正在执行以下操作:

import { useEffect } from 'preact/hooks';


function makeEffect1([anchor]) {
  return () => {
    // Animation type 1

    return () => {
      /* Cleanup effect */
    };
  };
}


function makeEffect2([anchor,popper]) {
  return () => {
    // Animation type 2

    return () => {
      /* Cleanup effect */
    };
  };
}


function makeEffect3([anchor,popper,followWidth]) {
  return () => {
    // Animation type 3

    return () => {
      /* Cleanup effect */
    };
  };
}


function useMyEffect(type,opts) {

  const deps = type === 1
    ? [opts.anchor]
    : type === 2
      ? [opts.anchor,opts.popper]
      : [opts.anchor,opts.popper,opts.followWidth];

  const effectToUse = type === 1
    ? makeEffect1(deps)
    : type === 2 ? makeEffect2(deps) : makeEffect3(deps);

  useEffect(effectToUse,deps);
}

我可以使用动态选择的函数及其动态依赖项列表(它可以跨重新呈现可变大小的列表),然后在对 useEffect 钩子的实际调用中使用它吗?是否违反了钩子定律?

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。