Question

我想向另一个客户端发送一些实时头寸，并在每次客户端从服务器获得新头寸时重新渲染它。但是，当我这样做时，即使通过检查位置状态，一切都在那里，但运动会滞后并跳过位置。

Client(Me)-通过键盘发送数据：

export default function Keyboard(props) {

const socket = useContext(SocketContext);
const [position, setPosition] = useState({
    x: 0,
    y: 0
});

function handleA(){
    console.log('A key is pressed');
    setPosition(position => ({
        ...position,
        x: position.x - 1
    }));
}
function handleW(){
    console.log('W key is pressed');
    setPosition(position => ({
        ...position,
        y: position.y - 1
    }));
}
function handleD(){
    console.log('D key is pressed');
    setPosition(position => ({
        ...position,
        x: position.x + 1
    }));
}
function handleS(){
    console.log('S key is pressed');
    setPosition(position => ({
        ...position,
        y: position.y + 1
    }));
}

useEffect(()=> {
    console.log(position);
    socket.emit('internal position incoming', position);
}, [socket, position]);

useKey('KeyA', handleA);
useKey('KeyD', handleD);
useKey('KeyS', handleS);
useKey('KeyW', handleW);

const styles = useMemo( () => ({
    left: `${position.x}px`,
    top: `${position.y}px`,
    position: 'relative'
}), [position])

return (
    <div style={styles}>
        <p>x:{position.x} y:{position.y}</p>
        {props.children}
    </div>
)}

客户端（用户）-接收数据并渲染它：

export default function Move(props) {

const socket = useContext(SocketContext);

const [position, setPosition] = useState({
    x: 0,
    y: 0
});

useEffect( () => {
    socket.on('external position incoming', (payload) => {
        setPosition(payload);
    });
}, [socket]);

useEffect( () => {
    console.log(position);
}, [position])


const styles = useMemo( () => ({
    left: `${position.x}px`,
    top: `${position.y}px`,
    position: 'relative'
}), [position])

return (
    <div>
        <div style={styles}> 
            <p>x:{position.x} y:{position.y}</p>
            {props.children}
        </div>
    </div>
)}

奇怪的是，console.log 显示了所有传入的数据，但是当我在 div 中渲染位置时，它会跳过并且看起来很慢。这是一个我不明白的渲染概念似乎有点明显，但我是 React 的新手，如果有人能向我解释它，我将非常感激，因为我已经失去了几天。此外，如果您没有解决方案，我非常乐意收到任何可能的意见和帮助。

React 组件重新渲染的速度比状态变化慢

0 个答案: