防止使用 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.memo只會阻止自己的重新渲染。

你已經考慮了以下幾點。

1. 如果孩子正在使用React.memo但父母重新渲染，孩子也將渲染。

2. 如果組件的狀態發生變化， React.memo 會阻止重新渲染。 但如果道具發生變化，組件會重新渲染。

注意：確保在使用 map 函數或任何迭代渲染元素/組件時始終為它們提供唯一鍵。

欲了解更多信息，請點擊此處