Блог

Главная - Вопросы по программированию - Могу ли я использовать динамически выбранную функцию для подключения useEffect в React/Preact?

Могу ли я использовать динамически выбранную функцию для подключения useEffect в React/Preact?

#javascript #reactjs #react-hooks #preact

Вопрос:

Я создаю сложную последовательность анимационных крючков. Выбор анимации зависит props от полученного крючком. Традиционно у меня был бы single 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? Это нарушает законы крючков?

Комментарии:

1. Я считаю, что длина массива зависимостей не должна меняться между визуализациями. Я думаю, что большинство людей рекомендовали бы выполнять условные условия внутри эффекта, но тогда, конечно, вам придется использовать один гигантский массив зависимостей, что, возможно, не очень хорошо.

2. Однажды я сломал useEffect приложение, которое добавляло и удаляло класс css для определенного элемента на основе тайм- аутов и интервалов , а также одновременно перетасовывало некоторый текст. Это привело к двум крючкам — useAnimationState и useShuffle где состояние, возвращенное, useAnimationState было использовано useShuffle для запуска перетасовки. Это сработало довольно хорошо. Вот ссылка, если она вас интересует — github.com/thenewboston-developers/Website/blob/…

3. @y2bd Это то, чего я пытаюсь избежать. Анимация должна выполняться до завершения. Слишком много зависимостей являются проблемой

4. @LakshyaThakur Я займусь этим. Спасибо, что поделились…

5. Вы говорите об этом : в настоящее время вы проверяете каждый тип на предмет выбора функции для вызова . вместо этого вы не хотите проверять тип вручную, чтобы правильно выбрать функцию ?

Метки: