이 usageRedexState 후크와 useSelector의 차이점성능 면에서?

이 usageRedexState 후크와 useSelector의 차이점성능 면에서?

useLimensxState 후크를 썼는데 다음과 같다.

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? 이 후크를 여러 구성 요소의 여러 모듈에서 사용할 계획이며, 더 많은 중복 참조가 생성되어 리렌더를 유발하는 등 다른 영향을 받는 것이 없는지 궁금하다.

네 갈고리는 성능이 훨씬 떨어진다.

1. 그것은 말 그대로 더 자주 갱신될 것이다.그useSelector()값이 이전 값과 같을 경우 렌더링하지 않도록 최적화된다.당신의 경우에는 당신이 전화한다.useSelector()필요한 것만 고르는 것이 아니라 전체 감량기를 고르는 것이다.환원기의 어떤 것이든 바뀔 때마다 그것은 다시 렌더링할 것이다.

2. 각 렌더에서 키를 고르기 위한 오버헤드가 크다.이 문제를 해결하려면useMemo()어떤 것이 바뀔 때에만 선택을 줄이도록 갈고리를 걸지만, 그것은 여전히 그것이 변했을 때 선택을 해야 한다.

다음 두 번째 사용 예:useSelector()더 안 좋아매번 새로운 배열을 생성하기 때문에 비균등 반환 값이 발생하고 각 동작에 대해 리렌더(rerender)하게 된다.

내 권장 사항:useSelector()최소 데이터 단위를 반환할 때마다 구성 요소를 여러 번 후크한다.선택 항목을 배치하지 마십시오.

참조URL: https://stackoverflow.com/questions/65919539/difference-between-this-usereduxstate-hook-and-useselector-in-terms-of-performan