javascript - 在 React.js 的功能组件中首次渲染之前调用 api

Question

如果我想在组件第一次渲染后调用 API，我知道我们有 useEffect钩子(Hook)调用 API 方法。 (我说的只是功能组件。没有类组件)。

有什么办法，我可以在我的组件第一次渲染之前调用 API。

这个问题的原因是，如果某些 UI 部分依赖于 API，我也不想在第一次渲染时向用户显示任何不完整的信息，一旦我从 API 获取数据就会改变。
这似乎是一个糟糕的 UI 体验。

编辑:我得到了一些建议来使用 useLayoutEffect 或任何消耗性标志来检查它是否被渲染。我检查了 useLayoutEffect 不起作用，并且通过使用 consumable 标志，我们只会增加复杂性。

我们有什么更好的方法吗？

Answer 1

我认为 useLayoutEffect通过传入一个空数组作为第二个参数，可以用于类似的事情。 useLayoutEffect(() => {...}, []);

Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

尽管您始终可以在父组件中获取数据并将其作为 Prop 传递。或者 - 如果你不介意它现在是一个实验性功能 - React Suspense正试图解决这个确切的问题。