防止使用React和React-memo重新呈现组件

Question

我想防止使用React重新渲染组件。我已经读了一些指南，但我仍然有麻烦让我的代码工作。CreateItem组件从json对象创建一个输入表单。当输入状态改变时，React会重新呈现所有组件。我会避免这种情况，因为它会引起一些问题。

我用过React。提醒一下，我的代码仍然不能工作。这是实现这段代码的好方法吗?我如何更正我的代码?谢谢你

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>
); 
});

—EDIT—

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是重新渲染和它再次设置默认状态。我想避免这个问题，我认为防止重新渲染可以是一个解决方案。

Answer 1

React.memo只阻止自己的重新渲染。

你已经考虑了以下事情。

1. 如果孩子正在使用React.memo． 当父元素重新呈现时子组件不会渲染，但如果它渲染，你必须弄清楚，也许子组件的状态正在改变，或者有时组件中使用的钩子也可以渲染组件。(更新)。

2. React.memo防止在组件的道具改变时重新渲染。但是如果状态改变了，组件可能会重新呈现。

注意:确保在使用map函数或任何迭代渲染元素/组件时始终为它们提供唯一的键。

更多信息请点击这里