需要通过拖动鼠标在react google散点图中选择点的范围

Question

在这个问题之后，我一直在尝试让@whitehat接受的答案与react谷歌图表散点图一起使用。

我设法创建了矩形，但拖动工作非常缓慢，我相信这是由于每次更改都会重新渲染。我尝试将div_select作为导入组件，并将其放在scatterPlot容器组件中。

你知道什么是正确的方法吗？

下面是一个代码示例：

import React, { useState } from "react";
import classes from "./ScatterPlot.module.css";
import Chart from "react-google-charts";
const ScatterPlot = props => {
const [x1, setX1] = useState(0);
const [x2, setX2] = useState(0);
const [y1, setY1] = useState(0);
const [y2, setY2] = useState(0);
const [x3, setX3] = useState(0);
const [x4, setX4] = useState(0);
const [y3, setY3] = useState(0);
const [y4, setY4] = useState(0);
const [selectDivStyle, setSelectDivStyle] = useState({
left: "0px",
top: "0px",
width: "0px",
height: "0px"
});
const { data } = props;
const reCalcSelectBox = () => {
setX3(Math.min(x1, x2));
setX4(Math.max(x1, x2));
setY3(Math.min(y1, y2));
setY4(Math.max(y1, y2));
const styleLeft = x3 + "px";
const styleTop = y3 + "px";
const styleWidth = x4 - x3 + "px";
const styleHeight = y4 - y3 + "px";
setSelectDivStyle({
left: styleLeft,
top: styleTop,
width: styleWidth,
height: styleHeight
});
};
let hideSelect = true;
const mouseDownOnChart = e => {
hideSelect = false;
setX1(e.pageX);
setY1(e.pageY);
reCalcSelectBox();
};
const mouseMoveOnChart = e => {
setX2(e.pageX);
setY2(e.pageY);
reCalcSelectBox();
};
const mouseUpOnChart = e => {
hideSelect = true;
// selectPoints();
};
const selectPoints = () => {
// Not yet implemented
};
const selectBoxClasses = [classes.selectDivContainer];
if (hideSelect) {
selectBoxClasses.push(classes.hidden);
}
return (
<div
onMouseDown={mouseDownOnChart}
onMouseUp={mouseUpOnChart}
onMouseMove={mouseMoveOnChart}
className={selectBoxClasses}
>
<div className={classes.selectDiv} style={selectDivStyle} />
<div className={classes.scatterPlotContainer}>
<Chart
width={"100%"}
height={"100%"}
chartType="ComboChart"
data={data}
rootProps={{ "data-testid": "1" }}
/>
</div>
</div>
);
};
export default ScatterPlot;

Answer 1

使用React.memo，这有助于防止不必要的重新渲染。