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

【问题标题】：Reusing useEffect code in every component in reactjs在 reactjs 的每个组件中重用 useEffect 代码
【发布时间】：2020-01-16 15:51:54
【问题描述】：

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

【问题讨论】：

reactjs.org/docs/higher-order-components.html

标签： reactjs react-hooks dry wow.js

【解决方案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();
}, [])

【讨论】：