ReactJS:如何仅调用一次 useEffect Hook 来获取 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() Hook 再次触发，从而导致 loadMessages() 再次被调用。这反过来会从后端加载消息并导致组件再次渲染，然后重复该循环。

如何避免这种情况？我是否应该简单地在 useEffect() Hook 中放置一个 if 条件，并检查 messages 属性？

Answer 1

如果我理解正确，您想通过 useEffect() 模仿基于常规类的 react 组件的“组件安装”行为，以便效果回调仅在第一次渲染时触发一次。

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

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

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

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

有关第二个参数的更多信息，see this documentation和 this documentation