Reactjs useEffect依赖触发器在react中如何工作？

我想了解关于useffect和eslint的3个“为什么”案例，以及关于useffect如何定义何时触发的总体“如何”

问题在代码示例中作为注释

import React，{useffect，useState，useCallback}来自“React”；
从“react dom”导入react dom；
函数App（）{
//案例A
//如果它工作正常，为什么eslint需要一个依赖关系？
常数[a，setA]=useState（0）；
const[triggerA，setTriggerA]=useState（true）；
useffect（（）=>{
console.log（“案例1:useffect a:+a”）；
}，[triggerA]）；
//案例B
//如果fnB工作正常，为什么eslint希望fnB作为Dependency？
const[b，setB]=useState（0）；
const[triggerB，setTriggerB]=useState（true）；
const fnB=useCallback（（）=>{
log（“案例B:useCallback fnB:+B”）；
}，[b]）；
useffect（（）=>{
fnB（）；
}，[triggerB]）；
//案例C
//为什么要添加fnC函数作为Dependency触发器Useffect，
//但加入setC不是吗？
//如何理解何时触发？
const[c，setC]=useState（0）；
const[triggerC，setTriggerC]=useState（true）；
const fnC=useCallback（（）=>{
log（“案例C:useCallback fnC:+C”）；
}，[c]）；
//无触发器
useffect（（）=>{
控制台日志（“无触发器”）；
fnC（）；
setC（（v）=>{
console.log（“useffect setC:+v”）；
返回v；
});
}，[setC]）；
//触发器
useffect（（）=>{
控制台日志（“触发器”）；
fnC（）；
setC（（v）=>{
控制台日志（“Useffect fnC:+v”）；
返回v；
});
}，[fnC]）；
控制台日志（“---”）；
返回(
setA（（v）=>v+1）}>A加1
setTriggerA（（v）=>！v）}>触发器A
A:{A}

setB（（v）=>v+1）}>将1添加到B
setTriggerB（（v）=>！v）}>触发器B
B:{B}

setC（（v）=>v+1）}>将1添加到C
setTriggerC（（v）=>！v）}>触发器C
C:{C}

);
}
ReactDOM.render（，document.querySelector（“#root”）；

依赖关系数组是一个依赖关系数组，当从上一次渲染更改时，它将调用第一个参数中定义的效果函数

简而言之，在effect函数中使用的任何变量和函数都应该在依赖项数组中，因为函数依赖于它们，所以当其中一个值更改时，它应该重新运行

因为您在useEffect中使用了

a

因为您在useEffect中使用了

fnB

因为依赖项数组中缺少

fnC

setC

是来自

useState

的状态更新程序函数，除非手动执行，否则对它的引用永远不会更改

即使您没有定义依赖项或缺少某些依赖项，您的所有函数都将工作，唯一的问题是，如果值发生更改，则不会重新运行该效果，这将导致许多错误。例如：-

const id = props.id;
const [idData, setIdData] = React.useEffect(null);

// doesn't run when id changes
React.useEffect(() => {
   async function callApiAndUpdateIdData {

  } 

  callApiAndUpdateIdData()
}, []);

// runs when id changes
React.useEffect(() => {
   async function callApiAndUpdateIdData {

  } 

  callApiAndUpdateIdData()
}, [id]);

---

谢谢，但是如果我不想在案例A和B中触发，那么不包括A和B也可以吗？这只是埃斯林不够聪明？你能澄清一下第4条吗？setC和fnC之间的区别是什么？如何检查此参考以及什么是参考？要意识到，

eslint

是你的朋友，而不是你的敌人。您必须解决这些eslint错误，不用说，您可能会发现不需要的bug。经验法则是，如果它在useEffect函数中，请在依赖项数组中定义它

setC

是React提供的更新程序函数，它的引用永远不会更改，而

fnC

是在组件内部定义的函数，其引用可以在重新渲染时更改。

const id = props.id;
const [idData, setIdData] = React.useEffect(null);

// doesn't run when id changes
React.useEffect(() => {
   async function callApiAndUpdateIdData {

  } 

  callApiAndUpdateIdData()
}, []);

// runs when id changes
React.useEffect(() => {
   async function callApiAndUpdateIdData {

  } 

  callApiAndUpdateIdData()
}, [id]);