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

Question

如果我想在首次渲染组件后调用API，我知道我们有useEffect钩子可以调用API方法。 （我只在谈论功能组件。没有类组件。）

有什么办法，我可以在组件首次呈现之前调用API。

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

编辑：我得到了一些建议，可以使用useLayoutEffect或任何消耗性标志来检查其是否呈现。我已经检查过useLayoutEffect不起作用，并且通过使用可消耗标记，我们仅增加了复杂性。

我们有更好的方法吗？

Answer 1

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

useLayoutEffect内部计划的更新将在浏览器有机会绘制之前被同步刷新。

尽管您始终可以在父组件中获取数据并将其作为道具传递。或者-如果您暂时不打算将其作为实验性功能，则React Suspense正在尝试解决这个确切的问题。

Answer 2

没有正确的方法可以在从同一组件呈现组件之前进行API调用。

当且仅当有消耗性数据时，您可能更愿意在父组件中进行API调用，并呈现表示组件。

这种情况的另一种解决方法是在组件内保留consumable标志，在useEffect内发出请求，不呈现任何内容或某种加载程序，仅在请求成功完成后才呈现内容。