是否从React.useEffect中的依赖项列表中省略函数道具

Question

我有以下代码块：

function foo({ bar, func }) {
useEffect(() => {
func(bar)
}, [func, bar])
....
}

将func包含在React.useEffect的依赖项列表中是一种反模式吗？我的印象是func的函数定义几乎从未改变。如果我错了，请纠正我。

Answer 1

这取决于在父组件中明显初始化的func的值

但是，假设func被设置为一个永远不会改变的常量函数(大多数情况下都是这样(，那么就不需要在这里添加它了，只需保留bar，并从useEffect的第二个参数中删除func即可

然而，这里的坏做法是，在您的代码中，如果func设置为递增bar的函数，例如

const func = (bar) => bar + 1;

这最终将无限触发useEffect，因为每次bar发生变化时，useEffect都会被触发，并再次增加bar，以此类推

如果您想知道func是否可以更改

我将给您一个func将在单击按钮时更改的父组件示例。

import React, {useState} from "react";
const ParentComponent = () => {
const increment = bar => bar+1;
const decrement = bar => bar-1;
const [func, setFunc] = useState(increment);
return <div>
//When this button is clicked, `func` value will be changed
<button onClick={() => setFunc(decrement)}/>
// This is your component
<foo func={func}/>
</div>
}