javascript - 当我依赖 usePrevious 时，如何停止组件中的额外重新渲染？

Question

所以我的谷歌搜索没有返回任何有用的结果，如果我问了一个重复的问题，很抱歉。

所以我正在听我的 redux-store 与 2 个选择器做出反应。1 获取我们拥有的最旧的时间戳，另一个获取存储中的所有消息。

// returns an array
  const messages = useSelector(
    (store) => selectMessages(store, chatId),
    shallowEqual
  );

  const [showGetMore, setShowGetMore] = useState(true);

// returns a firebase timestamp
  const oldestMessage= useSelector((store) =>
    selectOldestMessage(store, chatId)
  );

// uses the react hook usePrevious code
  const previousOldestTimestamp = usePrevious(
    // if oldestMessage is undefined still, set it as null,
    // so the getMore doesn't disappear
    oldestMessage || null
  );


  useEffect(() => {
    if (previousOldestTimestamp === oldestMessage) {
      // if timestamps are equal, there are no more old messages to get
      setShowGetMore(false);
    }
  }, [
    previousOldestTimestamp,
    oldestMessage,
    setShowGetMore,
  ]);

因此，当我单击以获取更多消息时，我会调用 firebase 来获取更多消息，然后它会发送 2 个操作，1 个用于更新消息对象，另一个用于更新最旧的消息字段。但是，使用道具/状态观察器，我的 selectOldestMessages 有时会使用数组中相同数量的对象重新呈现，即使我正在使用 shallowEquals 来防止这种情况，并且 useEffect 总是在运行并声明时间戳是相同的，当他们总是正确更新的商店。

所以我认为这是因为我调度的 2 个动作触发组件重新渲染 2 次，这导致 usePrevious 挂钩运行 2 次，这会破坏我的代码，因为它应该只被重新渲染 1 次。

但如果我错了，我很想知道。有没有人对此有更好的解决方案，或者看到一个糟糕的反应编码模式？

标签： javascriptreactjsreact-redux