在useEffect中，调用更新时是否会更新所有变量

Question

如果我有这样的useEffect，例如：

useEffect(()=>{
doSomething(varOne, varTwo)
},
[varOne]);

我希望它只在varOne更改时重新运行，但当它更改时，我希望它也具有varTwo的更新值。如果varTwo发生变化而什么也没发生，这对我来说并不重要，但当varOne发生变化时，它应该同时使用两个更新的值运行。

这是我应该期待的吗？从我所做的测试来看，它似乎是这样工作的，但我想确保这是可靠的，以及我应该一直期待它的工作方式。

Answer 1

简短回答。。。是的，即使您在useEffect调用中仅引用varOne，所有与状态相关的值都已更新。在以下示例中，您将看到varOne和varTwo都在单击按钮时更新，但在更新按钮文本时，效果将读取这两个新值。

export default function App() {
const [varOne, setVarOne] = useState('Initial Var One');
const [varTwo, setVarTwo] = useState('Initial Var Two');
const [buttonText, setButtonText] = useState('');
useEffect(() => {
setButtonText(`${varOne} - ${varTwo}`)
}, [varOne]);
const handleClick = () => {
setVarOne('Var One Changed');
setVarTwo('Var Two Changed');
}
return (
<div className="App">
<button onClick={handleClick}>{buttonText}</button>
</div>
);
}

在这里运行。。。

Answer 2

通过功能组件，您还可以使用等价于类组件中实例变量的useRef。https://reactjs.org/docs/hooks-faq.html#is-有一些类似实例变量

Answer 3

如果将"varOne"放入数组中，并将其作为useEffect((的第二个参数传递；您的方法将在"varOne"更改时被调用。

只要通过一个空数组，一切都会完美。

useEffect(()=>{doSomething(varOne, varTwo)},[]);