是否鼓励在 React Hooks 中对 "Save" 值使用闭包

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() 中是 "remembered" 因为它具有值在被调用时。

所以我想知道：

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

Answer 1

是的，你的关闭想法是正确的。
它有效，但不鼓励这样做，因为这很难理解，并且在阅读或调试代码时难以跟踪。在这种情况下，您应该使用 useRef 来存储 beforeList。

是否鼓励在 React Hooks 中对 "Save" 值使用闭包

Is it Encouraged to Use Closures to "Save" Values within React Hooks

closures

reactjs

react-hooks