componentDidUpdate 的 props 速度不够快。如何解决？答案

【问题标题】：componentDidUpdate does not props fast enough. How to fix it?componentDidUpdate 的 props 速度不够快。如何解决？
【发布时间】：2019-05-02 18:01:04
【问题描述】：

我使用事件 onMouseMove 来跟踪我的鼠标坐标。当我将这些坐标作为道具发送到我的子组件并使用它们时，道具已经落后于我的实际鼠标坐标，但是当我尝试在我的主组件中使用它们时，它们是我的实际鼠标坐标。我可能在 componentDidUpdate 方法上犯了一个错误。有谁知道我的错误是什么？

主要组件

class Page extends React.Component {
  state = {
    XCoord: 0,
    YCoord: 0
  };
  handleMouseMove = e => {
    const XCoord = e.pageX;
    const YCoord = e.pageY;
    this.setState((state, props) => {
      return { XCoord, YCoord };
    });
  };

  render() {
    const follower = this.refs.follower;
    return (
      <ThemeProvider theme={style}>
        <div onMouseMove={e => this.handleMouseMove(e)} id="test">
          <Head title="" />
          <CreateGlobalStyle />
          {this.props.children}
          <Pointer coords={this.state} />
        </div>
      </ThemeProvider>
    );
  }
}

子组件

class Pointer extends React.Component {

  componentDidUpdate(prevProps) {
    this.positionElement(prevProps.coords.XCoord, prevProps.coords.YCoord);
  }

  positionElement = (x, y) => {
    const mouse = {
      x,
      y
    };
    follower.style.top = mouse.y + "px";
    return (follower.style.left = mouse.x + "px");
  };

  render() {
    const follower = this.refs.follower;

    return (
      <Follower id="follower">
        <Circle id="circle" />
      </Follower>
    );
  }
}

【问题讨论】：

标签： javascript reactjs onmousemove

【解决方案1】：

欢迎使用 Stack Overflow！

快速查看您的代码，您似乎在 componentDidUpdate 方法中使用了 prevProps，这就是为什么您的子组件中的鼠标坐标似乎滞后的原因。您可能希望在您的 componentDidUpdate 方法中使用 this.props 而不是 prevProps，如下所示：

警告：未经测试的代码！

componentDidUpdate() {
  this.positionElement(this.props.coords.XCoord, this.props.coords.YCoord);
}

【讨论】：

感谢您的快速回复！它效果更好，但我的道具上的坐标仍然落后于实际坐标。如果我在 Main 组件中使用 this.positionElement() 函数，它会正确更新，但不会在 Child 组件中更新。
也许您可以尝试将 Pointer 组件转换为 react FunctionComponent。

【解决方案2】：

有很多方法可以实现，但最基本的方法不需要使用 refs 或 componentDidUpdate。只需将鼠标位置作为道具向下转发到 Pointer 组件即可：

检查此代码框example，它在渲染鼠标坐标时不会滞后或延迟。

【讨论】：

【解决方案3】：

欢迎使用 Stack Overflow！

也许将您的类指针更改为纯函数并直接使用它的道具可能会加快一点！

这里有一个 sn-p 来试试看！

function Pointer(props) {
    return (
      <div id="follower" style={{
      left: props.mouse_x,
      top: props.mouse_y
      }}>
        <div id="circle"></div>
      </div>
    );
  }



class Page extends React.Component {
  state = {
    XCoord: 0,
    YCoord: 0
  };
  handleMouseMove = e => {
    const XCoord = e.pageX;
    const YCoord = e.pageY;
    this.setState((state, props) => {
      return { XCoord, YCoord };
    });
  };

  render() {
    return (
      <div>
        <div onMouseMove={e => this.handleMouseMove(e)} id="test">
          {this.props.children}
          <Pointer 
          mouse_x={this.state.XCoord} 
          mouse_y={this.state.YCoord} />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Page />, document.querySelector('#root'))

#test {
  width:100vh;
  height:100vh;
  border: 2px solid gray;
}

#circle {
   background-color: red;
   width: 10px;
   height: 10px;
   border-radius: 10px;
}

#follower {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：

感谢您的回复！它工作得更好，但当我不制作单独的函数组件而只在我的主类中使用一个方法时，它仍然工作得更顺畅。奇怪的问题，但至少它是这样工作的。