为什么我的效果运行多次，几次发送后应用程序变慢？

Question

我使用了当前的代码，但是我得到了多个 console.logs，我在这里做错了什么？ 我尝试使用 useCallback 和 useMemo，但也许我用错了？

    useEffect(() => {
        io.on('message', data => {
            console.log(data);
            setMessages([...messages, {...data}]);
        });
    }, [messages]);

    const sendMessage = async event => {
        event.preventDefault();
        if (!message) return;

        io.emit('message', {
            conversationId: conversation._id,
            message: {
                user: {
                    name: user.name,
                    _id: user._id
                },
                text: message,
                createdAt: Date.now()
            }
        });

        const data = {
            conversationId: conversation._id,
            text: message,
            fromUserId: user._id
        };
        setMessage("");
        await axios.post('/api/chat/send-message', data);
    };

Answer 1

useEffect(() => {
    io.on('message', data => {
        console.log(data);
        setMessages([...messages, {...data}]);
    });
}, [messages]);

此效果将事件处理程序添加到message 事件。每当依赖数组中的messages 发生变化时，它就会运行。所以我认为每次设置messages 时都会建立多个事件处理程序。

您可能希望提供一个清理函数，将旧处理程序解除绑定作为效果的返回值，以便清理旧处理程序。

类似：

useEffect(() => {
    const handler = data => {
        console.log(data);
        setMessages([...messages, {...data}]);
    };
    io.on('message', handler);

    return function cleanup() {
       // Or whatever the unbind handler syntax is for whatever io is.
       io.off('message', handler);
    };
}, [messages]);