Question

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

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

然后，我对服务器进行api调用，该服务器返回永远不变的静态内容。我setEntities(fetchedData)，实际上发生的是，我两次渲染了组件-一次是在数组为空时，第二次是在数据到达时。数据是静态的，永远不会改变。想知道是否有某种方法可以防止这种不必要的渲染吗？我以为解决方案将是对componentWillMount进行api调用，但没有任何与此挂钩的并行解决方案，因为不再使用此方法。

Answer 1

如果您真的只想渲染该组件一次，则可以将获取逻辑移到其父级。

在父级中：

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

然后使用基本渲染条件：

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

然后，用React.memo包裹Child组件，以免在重新渲染parent时重新渲染。

export const Child = React.memo(() => {
  ...
});

最后，最重要的是-对道具进行操作，请勿将其保存在内部状态。因此，如果您想对entities进行操作，请将其用作道具。

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

从API接收到Child数据后，entities仅呈现一次。如果仅您不再调用API，它将保持不变。

Answer 2

componentWillMount被认为是旧版，您应该在新代码中避免使用它们。 https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

而且您不能一次渲染数据。

更新：

将来，暂记应该会有所帮助。 https://reactjs.org/docs/concurrent-mode-suspense.html

Answer 3

每当您从react组件调用客户端时，都会发生双重渲染。对于这种情况，建议您使用ReactDOMServer

ReactDOMServer对象使您可以将组件呈现为静态标记。通常，它在节点服务器上使用：

或者，如果您尚未启动项目，但可以尝试使用nextjs之类的服务器端渲染框架

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

3 个答案: