我想了解关于 useEffect 和 eslint 的“为什么”的 3 种情况，以及关于 useEffect 如何定义何时触发的总体“如何”。
问题在代码示例中作为注释。
代码沙盒。
import React, { useEffect, useState, useCallback } from "react";
import ReactDOM from "react-dom";
function App() {
// Case A
// why eslint want a as dependensy if it works fine?
const [a, setA] = useState(0);
const [triggerA, setTriggerA] = useState(true);
useEffect(() => {
console.log("Case 1: useEffect a: " + a);
}, [triggerA]);
// Case B
// why eslint want fnB as dependensy if it works fine?
const [b, setB] = useState(0);
const [triggerB, setTriggerB] = useState(true);
const fnB = useCallback(() => {
console.log("Case B: useCallback fnB b: " + b);
}, [b]);
useEffect(() => {
fnB();
}, [triggerB]);
// Case C
// why adding fnC function as dependensy trigger useEffect,
// but adding setC is not?
// how useEffect understand when to trigger?
const [c, setC] = useState(0);
const [triggerC, setTriggerC] = useState(true);
const fnC = useCallback(() => {
console.log("Case C: useCallback fnC c: " + c);
}, [c]);
// no trigger
useEffect(() => {
console.log("no triger");
fnC();
setC((v) => {
console.log("useEffect setC: " + v);
return v;
});
}, [setC]);
// triger
useEffect(() => {
console.log("triger");
fnC();
setC((v) => {
console.log("useEffect fnC: " + v);
return v;
});
}, [fnC]);
console.log("----");
return (
<>
<button onClick={() => setA((v) => v + 1)}>Add 1 to A</button>
<button onClick={() => setTriggerA((v) => !v)}>Trigger A</button>
<div>A: {a}</div>
<hr />
<button onClick={() => setB((v) => v + 1)}>Add 1 to B</button>
<button onClick={() => setTriggerB((v) => !v)}>Trigger B</button>
<div>B: {b}</div>
<hr />
<button onClick={() => setC((v) => v + 1)}>Add 1 to C</button>
<button onClick={() => setTriggerC((v) => !v)}>Trigger C</button>
<div>C: {c}</div>
<hr />
</>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));
依赖数组是一个依赖数组，当从之前的渲染改变时，会调用第一个参数中定义的效果函数。
简而言之，您在 effect 函数中使用的任何变量和函数都应该在您的依赖数组中，因为该函数依赖于它们，当其中一个值发生变化时，它应该重新运行。
a在你的 useEffect 里面使用了。fnB在你的 useEffect 里面使用了。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]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句