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