实现React's的UseEffect只监听增量/减量

Question

我已经构建了一个聊天应用程序，我使用useEffect来收听messages.length，以便在到达新消息时向下滚动到底部-messages.length中的increment.
然而，也有我删除消息的情况，messages.length中的decrement。也就是说，我在删除时也会被滚动到最底部，我希望避免这种行为。消息存储在我的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]);