reactjs - 在我在react js中为body设置鼠标移动事件监听器后，组件一次又一次地渲染

Question

我为body编写了一个事件监听器来获取react js中的鼠标位置

getMousePosition = (event) => {
        if(this.props.navActiveClass === "active-sm"){
            var mouseX = 0, mouseY = 0;
            this.setState({
                mouseX:event.pageX,
                mouseY:event.pageY,
            })
        }
    }

    componentDidMount(){
        document.body.addEventListener('mousemove', this.getMousePosition);
    }
    componentWillUnmount() {
        document.body.removeEventListener('mousemove', this.getMousePosition);
    }

此后，每当我移动鼠标时，都会显示组件一次又一次地重新渲染。

Answer 1

正如 @Mayank 所说，您正在将 setState 与 on mousemove 一起使用。 this.setState({}) 导致组件重新渲染。您应该将这两个值保留在状态之外。

你可以像这样将它们放入构造函数中

constructor(props) {
    super(props);

    this.mouseX = 0;
    this.mouseY = 0;
}

然后在你的函数中以相同的方式设置它们，只是没有 setState。

getMousePosition = (event) => {
        if(this.props.navActiveClass === "active-sm"){
            var mouseX = 0, mouseY = 0;

            this.mouseX = event.pageX;
            this.mouseY = event.pageY;
        }
    }