ReactJS:如何只调用一次useEffect钩子来获取API数据

Question

使用 React，我有以下功能组件，我在其中使用了useEffect()：

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
const MessagingComponent = React.memo(({ loadMessages, messages, ...props }) => {
useEffect(() => {
loadMessages();
});
return <div {...props}>These are the messages</div>;
});
const mapDispatchToProps = dispatch => ({
loadMessages: () => dispatch({ type: 'LOAD_MESSAGES' })
});
const mapStateToProps = state => {
return {
messages: state.chatt.messages.chatMessages
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(MessagingComponent);

如您所见，我有一个效果回调，可以在MessagingComponent的useEffect()回调中调用loadMessages()函数：

useEffect(() => {
loadMessages();
});

对loadMessages()的调用加载导致组件重新呈现的消息。 此行为符合预期，但问题是重新渲染会导致useEffect()挂钩再次触发，从而导致再次调用loadMessages()。这反过来又从后端加载消息，并导致组件再次呈现，并且循环重复。

我怎样才能避免这种情况？我应该简单地在useEffect()钩子中放置一个 if 条件，并检查 messages 属性吗？

Answer 1

如果我理解正确，您希望通过useEffect()模仿基于常规类的反应组件的"组件挂载"行为，以便效果回调仅在第一次渲染时触发一次。

要实现该行为，您可以将一个空数组传递给useEffect()的第二个参数，如下所示：

useEffect(() => {
loadMessages();
}, []); /* <-- add this */

第二个数组参数允许您指定哪些prop变量在其值更改时触发useEffect()回调(如果有)。

通过传递空数组，这意味着useEffect()不会由对输入prop变量的任何更改触发，并且只会在第一次渲染期间调用一次。

有关第二个参数的详细信息，请参阅此文档和此文档

Answer 2

useEffect()是功能组件的 react 钩子，它涵盖了类组件的生命周期钩子的功能。useEffect()结合了类组件的componentDidMount(), componentDidUpdate()和componentWillUnmount()，这意味着它将在组件挂载、组件状态更改以及组件从 DOM 卸载时执行。

检查下面的示例，

useEffect(() => {
setTimeout(() => {
alert("data saved");
}, 1000);
});

上述代码/警报在组件挂载/初始渲染、组件状态更改以及组件从 DOM 卸载时执行。

为了使上面的代码运行频率降低，我们可以传递一个值数组作为第二个参数，作为该效果的依赖项。如果其中一个依赖项发生更改，效果将再次运行。

假设我们将人员数组传递到功能组件的 props 中，并且我们希望警报仅在人员数组更改时执行。

useEffect(() => {
setTimeout(() => {
alert("data saved");
}, 1000);
}, [props.persons]);

这将在初始渲染期间和props.persons更改时执行代码。

因此，要仅在初始渲染/组件挂载期间执行代码，您可以传递一个空数组，这意味着在执行效果时没有指定依赖项。因此，在初始渲染期间和卸载组件时运行。

useEffect(() => {
setTimeout(() => {
alert("data saved");
}, 1000);
}, []);

您可以按如下方式修改useEffect()钩子，使其仅调用一次以获取 API 数据，

useEffect(() => {
loadMessages();
}, []);