我正在處理一些繁重的表格。因此，我試圖在我能找到的任何地方擠壓性能。最近我添加了Why-did-you-render插件，以更深入地了解可能導致我的頁面變慢的原因。我注意到，例如，當我單擊有關所有其他組件的復選框組件時會重新渲染。理由總是一樣的。WDYR 說由于 props 更改而重新渲染：具有相同名稱的不同函數 {prev onChangeHandler: ?} "!==" {next onChangeHandler: ?}我盡可能地尊重我發現的最佳實踐指示。我的組件傳遞的回調函數遵循這種模式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>}在這樣的示例中，更改任何輸入（例如：在文本輸入中寫入文本或單擊其中一個復選框）將導致其他 2 個組件以上述理由重新呈現。我想我可以停止使用功能組件并利用該shouldComponentUpdate()功能，但功能組件確實提供了一些我寧愿保留的優勢。我應該如何以與一個輸入交互不會強制更新另一個輸入的方式編寫我的函數？