javascript - 实现 React 的 UseEffect 只监听增量/减量

Question

我已经构建了一个聊天应用程序，我正在使用 useEffect听听messages.length ，以便在收到新消息时向下滚动到底部 - increment在 messages.length .
但是，也有我删除消息的情况，decrement在 messages.length .意思是，我在删除时也会向下滚动到底部，我想避免这种行为。消息存储在我的 redux 存储中，可作为 Prop 访问。useEffect有没有办法只听增量？
有没有办法访问消息的先前状态？
或者正在存储一个 prevLength变量不可避免？
这是我的代码中需要修改的部分:

// Scroll to bottom upon new message:
useEffect(() => {
    scrollDown();
}, [messages.length]);

这是整个代码:

import { useState, useEffect} from 'react';
//Components:
import ChatBubble from './ChatBubble';
import ScrollButton from './ScrollButton';

export default function MessagesBoard({ messages }) {

  //useState:
  const [showScrollButton, setShowScrollButton] = useState(false);

  //Event: Scroll to bottom upon new message
  useEffect(() => {
    scrollDown();
  }, [messages.length]);

  const scrollDown = () => {
    ....
  };

  return (
    <div className='chatMessagesBlock'>
      <div className='messagesCanvas'>
        {messages.map((chatMessage) => {
          return (
            <ChatBubble
              key={msgID}
              msgID={msgID}
              sender={sender}
              msgContent={msgContent}
            />
          );
        })}
      </div>

      <ScrollButton
        showScrollButton={showScrollButton}
        scrollDown={scrollDown}
      />
    </div>
  );
}

Answer 1

您可以在 useRef 中跟踪先前的长度:

const prevLength = useRef(0);
useEffect(() => {
    if (prevLength.current < message.length) {
        scrollDown();
    }
    prevLength.current = messages.length;
}, [messages.length]);