开发时触发React Suspense State

Question

假设我有一个如下所示的设置：

function App() {
  return (
    <React.Suspense fallback={<SomeOtherComponent />}>
      <SomeComponent />
    </React.Suspense>
  );
}

在开发过程中是否有一种简单的方法可以触发<SomeComponent />暂停一段设定的时间，以便我可以看到回退状态是什么样子？

我想要这个，因为我试图确保我的回退状态看起来正确，并且到非回退状态的转换看起来不会很卡顿。我希望有一个解决方案可以使组件在 Javascript 端以编程方式挂起。

Answer 1

香草溶液（不推荐）

引发悬念的非官方方式是做出承诺。

const SuspenseTrigger = () => {
  throw new Promise(() => {})
}

注意，未来版本的react可能不支持这种触发悬念的方法。请不要在生产中使用，请参阅此答案以了解更多关于为什么它不是一个好主意的信息。

实施示例：

const SomeComponent = () => {
  const [ready, setReady] = useState(false)

  useEffect(() => {
    setTimeout(() => setReady(true), 1000)
  }, [])

  return ready 
    ? <div>hello world!</div>
    : <SuspenseTrigger/>
}

const App = () => 
  <Suspense fallback={<div>loading</div>}>
    <SomeComponent/>
  </Suspense>