我只使用了props作为文本和函数来更改它。每次我点击一个数字，组件被重新渲染的次数就会是我在整合时看到的两倍。这让我的react应用程序非常慢，请帮忙。这是一个计算器应用程序。我已经试过把备忘录作为一个角落，希望它能有所帮助，但并没有。
useEffect(()=>{
const f=document.getElementsByClassName("line");
let g=[];
for(var i=0;i<f.length;i++){
const op=f[i].querySelectorAll("div");
for(let j=0;j<op.length;j++){
g.push(op[j]);
if(op[j].innerHTML==="clear"){
op[j].addEventListener("click",()=>{fn("")});
}
else if(op[j].innerHTML==="="){
op[j].addEventListener("click",()=>{calculate(txt)});
}
else{
op[j].addEventListener("click",()=>{fn(txt+op[j].innerHTML)});
}
}
}
});
return (
<div className="box" style={boxx}>
<div id="first" className="line">
<div id="clear">clear</div>
<div>0</div>
<div>/</div>
</div>
<div className="line">
<div>7</div>
<div>8</div>
<div>9</div>
<div>-</div>
</div>
<div className="line">
<div>4</div>
<div>5</div>
<div>6</div>
<div>+</div>
</div>
<div className="line">
<div>1</div>
<div>2</div>
<div>3</div>
<div>*</div>
</div>
<div className="line">
<div>(</div>
<div>)</div>
<div id="equals">=</div>
</div>
</div>
)
}
export default memo(Numbers);```
useEffect(()=>{
const f=document.getElementsByClassName("line");
let g=[];
for(var i=0;i<f.length;i++){
const op=f[i].querySelectorAll("div");
for(let j=0;j<op.length;j++){
g.push(op[j]);
if(op[j].innerHTML==="clear"){
op[j].addEventListener("click",()=>{fn("")});
}
else if(op[j].innerHTML==="="){
op[j].addEventListener("click",()=>{calculate(txt)});
}
else{
op[j].addEventListener("click",()=>{fn(txt+op[j].innerHTML)});
}
}
}
},[]);
您需要将[]空白数组作为useEffect的第二个参数进行传递，因此它会停止为每个转发器调用useEffect。
阅读此处更多关于UseEffect 的信息