在reactjs的每个组件中重用useEffect代码

Question

我有一个在组件中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 项目中重复此代码？

Answer 1

正如 RTW 在他的评论中提到的，您可以使用 HOC 来集中此代码。

但由于您似乎已经被钩子钩住了，我建议将此代码放入自定义useWow钩子中，并在您可能需要它的每个组件中调用此钩子。

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();
}, [])