渲染大量项目会阻止其他功能在渲染完成之前起作用

Question

我正在尝试找出如何防止渲染大量数据冻结React组件中的其他功能。

在代码中，我有一个名为“渲染”的按钮，该按钮可以渲染30000个项目，另一个按钮是“重置”，可以将其删除。

单击“渲染”后，将无法单击其他按钮“重置”，因为该组件暂时正忙于渲染30000个项目。

我希望能够在组件尝试渲染项目时单击“重置”按钮。请帮我解决问题的方法。

const ItemsComponent = () => {
  const [displayItems, setDisplayItems] = useState(false);

  const items = Array.from(Array(30000)).map((item, index) => {
    return (
      <li key={index}>
        Item {index + 1}
      </li>
    )
  });

  const renderItems = () => { setDisplayItems(true) }
  const resetItems = () => { setDisplayItems(false) }

  return (
    <div>
      <button onClick={renderItems}>Render</button>
      <button onClick={resetItems}>Reset</button>
      <ul>
        { displayItems ? items : null }
      </ul>
    </div>
  );
}