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

Posted 2023-02-22

【中文标题】在 React.js 的功能组件中首次渲染之前调用 api

【英文标题】：Call api before first render in functional component in React.js

【发布时间】：2020-08-02 22:44:51

【问题描述】：

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

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

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

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

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

【问题讨论】：

由于渲染前后相差几毫秒，那么您认为渲染前对渲染后有何影响？在这两种情况下，你都必须渲染一些东西（比如加载）。

【参考方案1】：

我认为useLayoutEffect 可以用于这样的事情，方法是传入一个空数组作为第二个参数。 useLayoutEffect(() => ..., []);

在 useLayoutEffect 中安排的更新将在浏览器有机会绘制之前同步刷新。

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

【讨论】：

"在浏览器有机会绘制之前。"，但不​​是在组件渲染之前

@Kyr 这是真的，我编辑了我的答案以提供替代方法

@Nimishgoel 你是对的。但是，没有内置的钩子。甚至 componentWillMount 也已被弃用。您可以编写一个像这样的自定义钩子：***.com/a/57073500/12402992，或使用 2 个备用选项之一

@Kyr 渲染组件意味着什么？我以为它是在被GPU光栅化并绘制在屏幕上时渲染的

@duhaime，我认为react上下文中的“渲染”可以认为是从组件（渲染函数）返回的虚拟DOM更新部分，对吗？

【参考方案2】：

在从同一个组件渲染组件之前，没有正确的方法来进行 API 调用。

您可能更喜欢在父组件中进行 API 调用，并且仅在有可消费数据时才呈现呈现组件。

这种情况的另一种解决方法是在组件内保留consumable 标志，在useEffect 内发出请求，不渲染任何内容或某种加载器，并且仅在请求成功完成时渲染某些内容。