javascript - React - 渲染发生在状态改变之前
问题描述
对这个很困惑。从代码中,如果您移动绿色方块,您将看到打印的值。我希望所有代码在状态更改和重新渲染之前运行,但是从这个代码示例中我可以看到,一旦调用更改状态的函数,重新渲染就会发生。
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;
`;
解决方案
推荐阅读
- python - 如何使用 PipelineOptions 告诉 Dataflow “use_unsupported_python_version”?
- html - 表格中的下拉选择 - 移动视图问题
- rust - 如何在 rust 中向极坐标数据框添加条件计算 col?
- python - 在python中加载嵌套的json对象
- azure - Azure 数据工厂 - 查找非活动管道
- node.js - 安装TensorflowJS时如何修复@tensorflow/tfjs-node@3.11.0安装脚本失败的错误
- pandas - 将列分解为多个列
- sequelize.js - 使用 sequelize.define 时如何向模型添加实例和类级别的方法
- svelte-3 - 为 Svelte 商店提取可重用 getter 的最佳实践
- modal-dialog - 我怎样才能使锚在模态对话框中工作