Javascript 与求职面试相关的潜在问题

因此，我进行了一次React工作面试，并在我的作业中添加了以下代码，以关闭模式框：

const App = (): ReactElement => {

  const [isOpen, setIsOpen] = useState<boolean>(false);

  const renderApp = (): ReactElement => {
    if (isOpen) {
      return <FeedbackForm onClose={() => setIsOpen(false)} />;
    }

    return <button onClick={() => setIsOpen(true)}>Open modal</button>;
  }

  if (isOpen) {
    return <>
      <div className='App'>
        <FeedbackForm onClose={() => setIsOpen(false)} />
      </div>
    </>
  }

  return <>
    <div className='App'>{renderApp()}</div>

  }

export default Feedback;

---

我看不出这段代码中有什么问题。我试着用一个调用

toggle（）

的按钮运行它，我发现它可以很好地更新状态。面试官在这里谈论的潜在问题是什么？

在

切换功能中，我们根据当前状态值设置状态。React分批执行更新，并且当我们多次运行
toggle（）
时，状态可能不会在后续的每次运行中更新。因此，为了确保不会丢失以前运行的状态更新，我们可以执行以下操作：

const toggle=（）=>setIsOpen（（prevIsOpen）=>！prevIsOpen）；

现在，在您的场景中，这可能不会发生，因为我们正在显示/隐藏基于切换单击的模式，这将完全更改视图，但我们不能确定，也不能冒险进行生产部署。如果是其他内容，如显示/隐藏扩展面板、侧边栏等，则如果同时单击切换按钮，且每次单击之间的延迟最小，则问题将很容易被发现。
在切换功能中包装setIsOpen是否存在特殊问题？将isOpen传递给该函数是否只是一个潜在问题？问题在于
setIsOpen
。我们无法确定它何时会更新
isOpen
属性。如果最初
isOpen=true
，然后，如果我们设置isOpen（！isOpen）；setIsOpen（！isOpen），那么，它将不再是
真的
。这是因为React将在列表中记录更新，然后一次执行所有更新。因此，更新列表类似于
updates=[false，false]
，最终结果将是
false
。如果我们使用了
setIsOpen（（previisopen）=>！previisopen）
，那么更新列表将类似于
updates=[false，true]
，最终结果是
true
。这是因为prevIsOpen指向prev State。这是有道理的，但是，我记得我在某个地方读到，在更新列表中用setState来反应更新状态，钩子基本上没有列表，只更新需要立即更新的单个值。你能详细说明一下吗？这个想法是React成批执行更新，钩子也是如此。无论状态的值是什么，都会执行此操作。您可以将
setState
视为redux中的调度器。它只是发送操作/更新状态。非常好，非常感谢您的帮助：）
const [isOpen, setIsOpen] = useState(false)
const toggle = () => setIsOpen(!isOpen);