Reactjs 如何在获取静态内容时防止不必要的渲染？

当我使用react钩子时，我声明我的状态如下：

const [entities,setEntities] = useState([])

然后，我向服务器发出一个api调用，返回从未更改的静态内容。

---

I

setEntities（fetchedData）

而实际发生的是我渲染组件两次——一次是在数组为空时，第二次是在数据到达时。数据是静态的，从不改变。我想知道是否有某种方法可以防止这种不必要的渲染？我认为解决方案是在componentWillMount上进行api调用，但是没有任何与此挂钩的并行解决方案，因为不再使用此方法。

componentWillMount被认为是遗留的，您应该在新代码中避免它们

并且不能一次渲染数据

更新：

---

在未来，悬念应该会有所帮助

如果确实希望只渲染该组件一次，可以将提取逻辑移动到其父级

在父项中：

fetchData();
entities; // where the data from request is stored

然后使用基本渲染条件：

{entities && <Child entities={entities} />} 

最后，最重要的是操作道具，不要将其保存在状态内部。所以，如果您想使用

实体

，请将其用作道具

{props.entities.map(...)}

---

当从API接收到

实体

数据时，

子项

将只渲染一次。如果不再调用API，它将保持原样。

无论何时从react组件调用客户端，都会发生双重渲染。对于这种特殊情况，我建议您使用

ReactDOMServer对象使您能够将组件渲染为静态 加成通常，它在节点服务器上使用：

---

或者，如果您还没有启动项目，您可以尝试使用服务器端渲染框架，如

，在这种情况下，您将获得双倍的父级渲染。因为您必须存储提取的数据。@KirillSkomarovskiy从异步调用提取数据时，无法避免第二次重新呈现。但有一种方法可以避免在使用它的组件中重新渲染。您可以避免渲染较小的组件，而调用渲染较大的组件。如果父母有多个孩子怎么办？如果孩子们没有被记住怎么办？@KirillSkomarovskiy然后回忆起来？对不起，我看不出讨论的意义。即使这有点复杂但可行，但还是比你的建议更好，因为“你做不到”。这就是性能改进的样子，你必须挖掘它。没有人说这很容易。当做

{props.entities.map(...)}