我编写了一个简单的组件来重现我在一个更大的项目组件中遇到的问题。
假设我有一个arrayA，我想在每次点击按钮时不断添加值1，还有一个状态arrayB，我想点击按钮时更新。
export default function UseStateTest(props) {
const arrayA = [];
const [arrayB, setArrayB] = useState([1, 2]);
function handleClick() {
arrayA.push(1);
setArrayB([3, 4]);
console.log(arrayA);
}
return <button onClick={handleClick}>Test</button>;
}
有了setArrayB，代码的行为就不正确了，当我点击按钮：arrayA将始终有1个元素1(我认为，根据我在其他代码中遇到类似问题的经验，代码实际上是在替换元素，而不是推送(。
当我注释setArrayB时，代码的行为是正确的，每次单击按钮都会向数组中添加一个新元素"1"。
请有人帮我理解是什么导致了这种行为。
每次需要重新渲染组件时，都会调用组件函数。对组件的每次调用都会得到不同的arrayA(与任何其他函数一样(。这就是为什么有一个useState挂钩(以及其他一些挂钩，如useRef(：因此，您可以在渲染中持久化有状态信息。
如果不调用setArrayB，您的组件不会更改其状态，因此React不会重新渲染它(不会再次调用您的函数(通过对setArrayB的调用，您正在更改组件的状态，从而导致重新渲染，从而执行新的调用，从而创建新的arrayA(和新的handleClick(。
您不能在函数中的简单变量/常量中存储任何应该在渲染之间持久存在的信息，因为这些信息是在每次函数调用时重新创建的。相反，使用useState(用于更改后应导致组件重新渲染的状态信息(、useRef(用于不应导致组件再次渲染的有状态信息[rare](和各种其他挂钩。