React useEffect () запускается только при первом рендере с зависимостями - PullRequest
Новая
       1

React useEffect () запускается только при первом рендере с зависимостями

0 голосов
/ 23 сентября 2019

Есть несколько других SO вопросов по этому вопросу, где ответом является либо устранение жалоб на зависимости через ESLint (я использую машинопись), либо что-то еще, чтобы разрешить второму параметру useEffect значение [].Однако согласно React docs это не рекомендуется.Кроме того, в документации реагирования useEffect написано

Если вы передадите пустой массив ([]), реквизиты и состояние внутри эффекта всегда будут иметь свои начальные значения.Хотя передача [] в качестве второго аргумента ближе к знакомой ментальной модели componentDidMount и componentWillUnmount, обычно существуют более эффективные решения, позволяющие избежать слишком частого повторного запуска эффектов.Кроме того, не забывайте, что React откладывает запуск useEffect до тех пор, пока браузер не выполнит рисование, поэтому выполнение дополнительной работы представляет собой меньшую проблему.

У меня есть следующий код: 

  useEffect(() => {
    container.current = new VisTimeline(container.current, items, groups, options);
  }, [groups, items, options]);

Я хочу, чтобы он запускался только один раз.

Это единственный способ, позволяющий запускать его каждый раз, и useState для отслеживания того, что он выполнялся раньше: 

  const [didLoad, setDidLoad] = useState<boolean>(false);

  useEffect(() => {
    if (!didLoad) {
      container.current = new VisTimeline(container.current, items, groups, options);
      setDidLoad(true);
    }
  }, [didLoad, groups, items, options]);

1 Ответ

0 голосов
/ 23 сентября 2019 
useEffect(() => {
    container.current = new VisTimeline(container.current, items, groups, options);
  }, [groups, items, options]);

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

useEffect(() => {
    container.current = new VisTimeline(container.current, items, groups, options);
  }, []);

Надеюсь, это помогло.

...