Question

对此很困惑。从代码中，如果移动绿色方块，您将看到打印的值。我希望所有代码在状态更改和重新呈现之前都可以运行，但是从此代码示例中，我可以看到，一旦更改状态的函数被调用，重新呈现就会发生。

import React, { useState, useEffect, useRef } from "react";
import styled, { ThemeProvider, css } from "styled-components";

export default function App() {
  const pos = useRef({ x: 0, y: 0 });
  const offset = useRef({ x: 0, y: 0 });

  const myDiv = useRef(null);
  const [rerender, setRerender] = useState(0);
  console.log("render");

  useEffect(() => {
    window.addEventListener("mousemove", doSomething);
    window.addEventListener("mousedown", doSomethingAgain);

    return () => {
      window.removeEventListener("mousemove", doSomething);
      window.removeEventListener("mousedown", doSomethingAgain);
    };
  }, [rerender]);
  console.log("global", rerender);

  function doSomething(e) {
    if (e.buttons == 1) {
      const newPos = {
        x: e.pageX,
        y: e.pageY
      };

      pos.current = newPos;
      console.log("first", rerender);
      setRerender(rerender + 1);
      console.log("second", rerender);
    }
  }

  function doSomethingAgain(e) {
    const offsetX = e.pageX - myDiv.current.offsetLeft;
    const offsetY = e.pageY - myDiv.current.offsetTop;
    offset.current = { x: offsetX, y: offsetY };
  }

  return (
    <div className="App">
      <DIV ref={myDiv} off={offset.current} pos={pos.current}></DIV>
    </div>
  );
}

const DIV = styled.div`
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  top: ${({ pos, off }) => pos.y - off.y}px;
  left: ${({ pos, off }) => pos.x - off.x}px;
`;

React-在状态更改之前进行渲染

0 个答案: