React.useMemo正在重新呈现数组中的所有项

人气:358 发布:2022-10-16 标签: javascript reactjs react-hooks react-usememo

问题描述

我有一个在useState中存储一组水果的反应组件。我有一个过滤水果的记忆函数(VisibleFruits)。我将visibleFruits映射到DOM。

问题是,当我检查水果时,所有可见的水果都会重新呈现。

我希望只重新呈现选定的一个,因为它是唯一正在更改的。

有没有办法让我使用此图案,但不在检查时重新呈现所有图案?

现实生活中,在visibleFruits useMemo中有一个复杂的函数。因此,我不能简单地将筛选器附加到映射之前。

编辑,此处为更新编辑:


const Example = () => {
    const [fruits, setFruits] = React.useState([
        { id: 1, name: 'apple', visible: true, selected: false },
        { id: 2, name: 'banana', visible: false, selected: false },
        { id: 3, name: 'orange', visible: true, selected: false }
    ])

    const visibleFruits = React.useMemo(() => {
        return fruits.filter((f) => f.visible)
    }, [fruits])

    const handleCheck = (bool, id) => {
        setFruits((prev) => {
            return prev.map((f) => {
                if (f.id === id) {
                    f.selected = bool
                }
                return f
            })
        })
    }

    return (
        <div>
            {visibleFruits.map((fruit) => {
                return <FruitOption fruit={fruit} handleCheck={handleCheck} />
            })}
        </div>
    )
}

const FruitOption = ({ fruit, handleCheck }) => {
    console.log('** THIS RENDERS TWICE EVERY TIME USER SELECTS A FRUIT **')
    return (
        <div key={fruit.id}>
            <input
                checked={fruit.selected}
                onChange={(e) => handleCheck(e.target.checked, fruit.id)}
                type='checkbox'
            />
            <label>{fruit.name}</label>
        </div>
    )
}

export default Example

推荐答案

首先,handleCheck函数有问题(但它与您询问的内容无关)。您的代码正在直接修改fruit对象(f.selected = bool),但您是not allowed to do that with React state,状态的对象不能被直接修改,如果您违反该规则,呈现可能不正确。相反,您需要复制对象并修改副本(就像处理数组一样):

const handleCheck = (bool, id) => {
    setFruits((prev) => {
        return prev.map((f) => {
            if (f.id === id) {
                return {...f, selected: bool}; // ***
            }
            return f;
        });
    });
};

但这不是您想要的,而是其他需要修复的东西。:-)

您看到console.loghandleCheck之后执行了两次的原因是组件必须重新呈现(对于更改),并且有两个可见的结果,因此您会看到对FruitOption组件函数的两次调用。这有两个原因:

handleChange每次调用Example组件函数时都会更改,因此FruitOption每次都会看到一个新的道具;

FruitOption在其道具不变时不会避免重新呈现,因此即使修复了#1,您仍会看到两个console.log调用;和

另外,FruitOption元素上没有key,这可能会导致呈现问题。在呈现数组中的元素时,始终包含有意义的键。(不要只使用索引,it's problematic;但是您的水果对象有一个id,这很完美。)

修复:

记忆handleChange,这样就不会每次都重新创建,可能是通过useCallback

使用React.memo,以便在FruitOption的属性不变的情况下不会调用FruitOption(有关class组件等效项,请参见此答案的末尾),并且

Example

中的FruitOption元素添加有意义的key

将这些和上面的handleChange修复程序放在一起:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="真">
const Example = () => {
    const [fruits, setFruits] = React.useState([
        { id: 1, name: 'apple', visible: true, selected: false },
        { id: 2, name: 'banana', visible: false, selected: false },
        { id: 3, name: 'orange', visible: true, selected: false }
    ]);

    const visibleFruits = React.useMemo(() => {
        return fruits.filter((f) => f.visible);
    }, [fruits]);

    const handleCheck = React.useCallback(
        (bool, id) => {
            setFruits((prev) => {
                return prev.map((f) => {
                    if (f.id === id) {
                        return {...f, selected: bool}; // ***
                    }
                    return f;
                });
            });
        },
        []  // *** No dependencies since all it uses is `setFruits`, which is
            // stable for the lifetime of the component
    );

    return (
        <div>
            {visibleFruits.map((fruit) => {
                // *** Note the key
                return <FruitOption key={fruit.id} fruit={fruit} handleCheck={handleCheck} />
            })}
        </div>
    );
}

// *** `React.memo` will compare the props and skip the call if they're the same, reusing
// the previous call's result.
const FruitOption = React.memo(({ fruit, handleCheck }) => {
    console.log(`Rendering fruit ${fruit.id}`);
    return (
        <div key={fruit.id}>
            <input
                checked={fruit.selected}
                onChange={(e) => handleCheck(e.target.checked, fruit.id)}
                type='checkbox'
            />
            <label>{fruit.name}</label>
        </div>
    );
});

ReactDOM.render(<Example />, document.getElementById("root"));
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

如您所见,所有这些都已就绪,只有更改后的水果才会重新呈现。

ReReact.memo:对于要求更复杂的组件,您可以提供一个函数作为第二个参数,用于确定两组道具是否相同以进行呈现。默认情况下,React.memo只进行浅层相等比较,这通常就足够了。

最后:对于class组件,不提供相等回调的React.memo等价于扩展PureComponent而不是Component。如果您想使您的道具检查更加细粒度,您可以改为实现shouldComponentUpdate

467