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

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

Reusing useEffect code in every component in reactjs

reactjs

react-hooks

dry

wow.js