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);
    }

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

标签： reactjs

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;
        }
    }