javascript - 这个 useReduxState hook 和 useSelector 在性能方面的区别？

Question

我写了一个 useReduxState 钩子(Hook)，它看起来像这样:

import { useSelector } from 'react-redux';

const pick = (object, keys) =>
    keys.reduce(
        (obj, key) => (object && Object.prototype.hasOwnProperty.call(object, key) ? { ...obj, [key]: object[key] } : obj),
        {},
    );

export default (reducer, values) =>
    pick(
        useSelector((state) => state[reducer]),
        values,
    );

我用这个作为，

const Component = React.memo(() => {
    const { someStateFromReducerA, someMoreStateFromReducerA } = useReduxState('reducerA', ['someStateFromReducerA', 'someMoreStateFromReducerA']);
    const { someStateFromReducerB } = useReduxState('reducerB', ['someStateFromReducerB']);

    return (
        <div>
            {someStateFromReducerA}
            {someMoreStateFromReducerA}
            {someStateFromReducerB}
        </div>
    );
});

export default Component;

尽管这似乎是一种方便的方法，但我想知道这种方法与以下方法之间是否有区别:

const Component = React.memo(() => {
    const [
        someStateFromReducerA,
        someMoreStateFromReducerA
    ] = useSelector(
            ({ reducerA: { someStateFromReducerA, someMoreStateFromReducerA } }) =>
                [someStateFromReducerA, someMoreStateFromReducerA]
        );
    const someStateFromReducerB = useSelector(({ reducerB: { someStateFromReducerB } }) => someStateFromReducerB);

    return (
        <div>
            {someStateFromReducerA}
            {someMoreStateFromReducerA}
            {someStateFromReducerB}
        </div>
    );
});

export default Component;

是否有更多使用 useReduxState 的重新渲染？ ?我计划在不同组件的许多不同模块中使用这个钩子(Hook)，我想知道是否有其他影响，例如创建更多冗余引用来声明，导致重新渲染。

Answer 1

你的钩子(Hook)的性能要差得多。

它会更频繁地重新渲染。 useSelector()如果值与前一个值相同，则优化为不重新渲染。在您的情况下，您调用 useSelector()选择整个 reducer ，而不是仅仅挑选你需要的东西。每当 reducer 中的任何内容发生变化时，它都会重新渲染。

在每次渲染中挑选出键的开销很大。您可以使用 useMemo() 来解决此问题hook 可以将采摘减少到仅在某些情况发生变化时进行，但是当它确实发生变化时仍然需要进行一些采摘。

您使用 useSelector() 的第二个示例更糟。由于它每次都会创建一个新数组，因此会导致返回值不相等，并且会在每个操作上重新渲染。
我的建议:使用 useSelector()在组件中钩子(Hook)多次，每次都返回一个最小的数据单元。不要批量选择。