是否鼓励使用闭包来"Save" React 钩子中的值

Question

这里有一些代码来说明我想要完成的任务：

import React, { useState } from "react";
export default function App() {
const [list, setList] = useState(["a", "b", "c"]);
const [text, setText] = useState("");
let listBefore;
const addItem = () => {
listBefore = list;
setList([text, ...list]);
//simulate api call "addNewItem(newItem, confirmAdd)"
setTimeout(() => confirmAdd(false), 2000);
};
const confirmAdd = success => {
if (!success) {
setList(listBefore);
}
};
return (
<div className="App">
{list.toString()}
<input onChange={e => setText(e.target.value)} />
<button onClick={addItem}>Add</button>
</div>
);
}

目标是在我知道新列表项已成功添加到数据库之前立即更新 UI。如果它失败了，我使用我的listBefore变量恢复。我一直在试图弄清楚为什么这会起作用，并偶然发现了关闭。我的猜测是，尽管在请求成功之前可能会发生许多重新渲染(并且listBefore被重新创建为未定义(，listBefore也会在confirmAdd()内部"记住"，因为它在被调用时具有值。

所以我想知道：

1. 我是否正确理解闭包是如何应用的？
2. 这是鼓励吗？

Answer 1

1. 是的，你对关闭的想法是正确的。
2. 它可以工作，但不鼓励这样做，因为这很难理解，并且在读取或调试代码时进行跟踪。在这种情况下，您应该使用 useRef 在 List 之前进行 sotre。