防止使用 React 和 React-memo 重新渲染组件

Question

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

Answer 1

React.备忘录仅防止自己重新渲染。

您已经考虑了以下事项。

1. 如果孩子们正在使用React.备忘录但父母重新呈现 孩子们也会渲染。

2. React.备忘录如果组件的 props 发生变化，则防止重新渲染。但如果状态发生变化，组件可能会重新渲染。

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

   For more information click here