最近,我在同事的React代码中看到了一些将setter函数传递到钩子依赖数组的例子,我觉得这不太对。
const MyComponent = () => {
const [loading, setLoading] = useState(true);
useEffect(() => {
doSomeBigLongNetworkRequest();
setLoading(false);
}, [setLoading, /* other deps */]);
// ...
}
我的感觉是他们误解了dependency数组的目的,据我所知,dependency数组是用来指示 * 要监视哪些状态 ,以便钩子可以在状态改变时再次触发, 而不是 * 简单地指示钩子需要使用setLoading
函数,而且由于setLoading
函数实际上从未改变,因此将其包含在依赖项中没有任何作用。
我说得对吗,或者在数组中包含setter是否有意义?我的另一个想法是,也许这只是一个linter错误,因为linter无法识别函数是setter,并认为它可能会更改。
我还应该补充一点,在我所看到的示例中,它们包含了setter,但 * 没有 * 变量,所以在上面的例子中,setLoading
,而不是loading
将出现在dependency数组中,钩子实际上并不需要loading
的值。
1条答案
按热度按时间pjngdqdw1#
是的,你是对的,没有必要包括他们。这里是从文档引用:
React保证了setState函数标识是稳定的,并且在重新呈现时不会改变,这就是为什么从useEffect或useCallback依赖列表中省略是安全的。
一般来说,再次基于文档,关于依赖性数组的建议是:
如果使用此优化,请确保数组包含组件作用域中随时间更改且由效果使用的所有值(如props和state)。否则,代码将引用以前呈现中的过时值。