我正在處理一些繁重的表格。因此，我試圖在我能找到的任何地方擠壓性能。最近我添加了Why-did-you-render插件，以更深入地了解可能導(dǎo)致我的頁面變慢的原因。我注意到，例如，當(dāng)我單擊有關(guān)所有其他組件的復(fù)選框組件時(shí)會重新渲染。理由總是一樣的。WDYR 說由于 props 更改而重新渲染：具有相同名稱的不同函數(shù) {prev onChangeHandler: ?} "!==" {next onChangeHandler: ?}我盡可能地尊重我發(fā)現(xiàn)的最佳實(shí)踐指示。我的組件傳遞的回調(diào)函數(shù)遵循這種模式import React, { useState, useEffect } from 'react';import { useTranslation } from 'react-i18next';export function TopLevelComponent({props}){    const defaultData = {name: '', useMale: false, useFemale: false}    const [data, setData] = useState(defData);    const { t } = useTranslation();    const updateState = (_attr, _val) => {        const update = {};        update[_attr] = _val;        setData({ ...data, ...update });    }    const updateName = (_v) => updateState('name', _v);//Text input    const updateUseMale = (_v) => updateState('useMale', _v);//checkbox    const updateUseFemale = (_v) => updateState('useFemale', _v);//checkbox    ...    return <div>        ...        <SomeInputComponent value={data.name} text={t('fullName')} onChangeHandler={updateName} />        <SomeCheckboxComponent value={data.useMale} onChangeHandler={updateUseMale} text={t('useMale')}/>        <SomeCheckboxComponent value={data.useFemale} onChangeHandler={updateUseFemale} text={t('useFemale')}/>        ...    </div>}在這樣的示例中，更改任何輸入（例如：在文本輸入中寫入文本或單擊其中一個(gè)復(fù)選框）將導(dǎo)致其他 2 個(gè)組件以上述理由重新呈現(xiàn)。我想我可以停止使用功能組件并利用該shouldComponentUpdate()功能，但功能組件確實(shí)提供了一些我寧愿保留的優(yōu)勢。我應(yīng)該如何以與一個(gè)輸入交互不會強(qiáng)制更新另一個(gè)輸入的方式編寫我的函數(shù)？