Повторное использование кода useEffect в каждом компоненте в reactjs - PullRequest
Новая
       4

Повторное использование кода useEffect в каждом компоненте в reactjs

0 голосов
/ 16 января 2020

У меня есть useEffect, который инициализирует wowjs в компоненте следующим образом: 

import WOW from "wowjs";

const HomePage = () => {

useEffect(() => {
        const wow = new WOW.WOW({
        boxClass: "wow",
        animateClass: "animated",
        offset: 0,
        mobile: false,
        live: true,
        scrollContainer: null
      });
      wow.init();
    }, []);

  return (
    <div>
      ....
    </div>
  )
}

Я хочу это useEffect во многих компонентах, чтобы анимации wowjs могли выполняться на каждом маршруте изменение. Как избежать повторения этого кода в моем reactjs проекте?

1 Ответ

1 голос
/ 16 января 2020

Как упомянул RTW в своем комментарии, вы могли бы использовать HO C для централизации этого кода.

Но так как кажется, что вы уже перехватили хуки, я бы предложил поместить этот код в custom useWow hook и просто вызывайте этот hook в каждом компоненте, где он может вам понадобиться. 

const useWow = () => {

  const initWow = () => {
    const wow = new WOW.WOW({
        boxClass: "wow",
        animateClass: "animated",
        offset: 0,
        mobile: false,
        live: true,
        scrollContainer: null
      });
    wow.init();
  }

  return { initWow }
}

А затем в вашем компоненте 

const { initWow } = useWow()

useEffect(() => {
 initWow();
}, [])
...