javascript - React - 作为导致额外渲染的 Prop

Question

我正在处理一些繁重的表格。因此，我试图在任何可以找到的地方压缩性能。最近，我添加了 Why-did-you-render 插件，以更深入地了解可能会减慢页面速度的因素。例如，我注意到，当我单击一个复选框组件时，所有其他组件都会重新渲染。理由总是一样的。 WDYR 说

Re-rendered because of props changes: different functions with the same name {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() 函数，但函数式组件确实提供了一些我宁愿保留的优点。我应该如何编写我的函数，以便与一个输入交互时不会强制更新另一个输入？

Answer 1

问题源于您定义更改处理程序的方式:

const updateName = (_v) => updateState('name', _v)

该行在每次渲染时都会被调用，因此，每次渲染组件时，该 prop 都会有一个新的(尽管功能上相同)值。这同样适用于其他所有处理程序。

作为一个简单的解决方案，您可以将功能组件升级为成熟的组件并在渲染函数之外缓存处理程序，或者您可以实现 shouldComponentUpdate()在您的子组件中。