componentDidUpdate не подпирает достаточно быстро.Как это исправить? - PullRequest
Новая
       43

componentDidUpdate не подпирает достаточно быстро.Как это исправить?

0 голосов
/ 02 мая 2019

Я использую событие 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>
    );
  }
}

Ответы [ 3 ]

1 голос
/ 02 мая 2019

добро пожаловать в переполнение стека!

При быстром взгляде на ваш код вы видите, что вы используете prevProps в своем методе componentDidUpdate, и именно поэтому координаты мыши в вашем дочернем компонентепохоже, отстают.Возможно, вы захотите использовать this.props вместо prevProps в вашем componentDidUpdate методе, как показано ниже:

Предупреждение: непроверенный код! 

componentDidUpdate() {
  this.positionElement(this.props.coords.XCoord, this.props.coords.YCoord);
}
0 голосов
/ 02 мая 2019

добро пожаловать в Stack Overflow!

Возможно, изменение вашего класса Pointer на чистую функцию и непосредственное использование его реквизитов может немного ускорить процесс!

Вот фрагмент кода, чтобы попробовать его!

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>
0 голосов
/ 02 мая 2019

Есть много способов сделать это, но самый простой способ не требует использования refs или componentDidUpdate. Это возможно, просто переместив указатель мыши вниз в качестве подпорки для компонента Pointer:

Отметьте этот код и вставьте пример , он не задерживается и не задерживает отображение координат мыши.

...