我想阻止使用React重新渲染组件。我已经读了一些指南,但我仍然有麻烦让我的代码工作。CreateItem组件从json对象创建输入表单。当输入状态改变时,React会重新渲染所有组件。我会避免这种情况,因为它会引起一些问题。
我已经使用了React.memo,但我的代码仍然不起作用。这是实现这段代码的好方法吗?如何更正我的代码?谢谢你
function MyComponent() {
return(
<div className="row">
{Array.from(new Map(Object.entries(json))).map((data) => (
<CreateItem obj={data} />
))}
</div>
);
}
//function CreateDiv(props) {
const CreateDiv = React.memo((props) => {
console.log("rendering ");
return (
<form name="myForm" onSubmit= {formSubmit}>
<div className="row">
{Array.from(new Map(Object.entries(props.obj[1]))).map((data) => (
<>
{(() => {
return(
<div className="col-sm-2">
<CreateItem obj={data[1]} />
</div>
)
})()}
</>
))}
</div>
</form>
);
});
---编辑---
CreateItem使用CreateCheckBoxComponent函数从json值创建具有默认状态的自定义复选框。CreateCheckBoxComponent代码如下:
function CreateCheckBoxComponent(props) {
if(parseInt(props.obj.defaultValue) === 5)
setChecked(false);
else
setChecked(true);
return(
<FormCheck
label={props.obj.simbolName}
name={props.obj.idVar}
type="checkbox"
checked={checked}
onChange={handleCheckBoxChange}
sm={10}
/>
);
}
HandleCheckBoxChange工作正常并更改状态,但当我单击复选框更改标志时,CreateCheckBoxComponent重新呈现并再次设置默认状态。我想避免这个问题,我认为防止重新渲染可以是一个解决方案。
1条答案
按热度按时间crcmnpdw1#
React.memo只阻止自己的重渲染。
你已经考虑了以下事情。
1.如果孩子们正在使用React.memo。当父组件重新渲染时,子组件将不会渲染,但如果它渲染了,你必须弄清楚,也许子组件的状态正在改变,或者有时组件中使用的钩子也可以渲染组件。(更新).
1.React.memo防止组件的props发生变化时重新渲染。但是如果状态改变,则组件可以重新呈现。
注意:当你使用map函数或任何迭代渲染元素/组件时,请确保总是为它们提供一个唯一的键。
更多信息请点击这里