Отходит ли React от React.memo в пользу useMemo?

Question

И React.memo, и хук useMemo позволяют оптимизировать производительность за счет сокращения пересчёта и повторного рендеринга. Тем не менее, они определенно работают в том, что React.memo используется для переноса функционального компонента, а хук useMemo может использоваться практически для любой функции, даже для чистых вычислений. Что еще более важно, useMemo обычно вызывается из родительского в дочерний компонент, тогда как React.memo обычно вызывается при объявлении самого дочернего элемента.

Хотя оба имеют разные преимущества, одно из преимуществ React.memo заключается в том, что его не нужно вызывать от каждого родителя к дочерним отношениям. Однако с выпуском хуков становится очевидным, что разработка React хочет перейти к функциональным компонентам, которые используют хуки для обработки состояний, событий с побочными эффектами и других эффектов. Хотя я не думаю, что команда разработчиков React будет иметь смелость или игнорирование своей пользовательской базы для удаления React.memo в любое время в течение следующих 2 лет, но мне интересно, хотят ли они, чтобы конечные пользователи прекратили использовать React.memo для стилист c причины. Так же, как они пассивно агрессивно отошли от компонентов класса в пользу функциональных компонентов с крючками.

При использовании функциональных компонентов с крючками каркас реактива удаляется от React.memo? Было бы лучше привыкнуть к использованию версии ловушки, если кто-то хочет идти в ногу с лучшими практиками React в будущем?

Answer 1

Краткий ответ - нет.

Оба используются для оптимизации производительности в отношении уменьшения ненужного повторного рендеринга, но React.memo и useMemo используются для двух разных сценариев ios ...

React.memo является HOO C и информирует реакцию для выполнения поверхностного сравнения пропущенных пропов, чтобы определить, следует ли повторно выполнить рендеринг.

https://reactjs.org/docs/react-api.html#reactmemo

Пример:

export const Component = React.memo(({name}) => `Hello ${name}`)

Здесь реагирует на поверхностное сравнение и будет повторно отображаться только в случае изменения имени.

useMemo - это ловушка, используемая для запоминания значения. React будет только переоценивать значение, только если зависимости (второй аргумент useMemo) изменятся. Есть правила с крючками, которые должны соблюдаться.

https://reactjs.org/docs/hooks-reference.html#usememo

Пример:

export const MyComponent = ({firstName, lastName, age}) => {

    const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);

    return <Profile fullName={fullName} />

}

Вы может взломать useMemo, чтобы сделать что-то вроде React.memo, но он не предназначен для такого использования.

useCallback Существует также хук useCallback, который часто используется с React.memo.

Если ваш родительский компонент передает обратный вызов дочернему элементу, заключенному в React.memo, будет хорошей идеей создать обратный вызов с использованием useCallback, в противном случае дочерний элемент будет в любом случае повторно визуализирован из-за повторного обратного вызова -создан каждый раз, когда родительский объект повторно визуализируется.

useCallback также принимает массив зависимостей, например useMemo, чтобы его можно было создать заново при изменении зависимости.

https://reactjs.org/docs/hooks-reference.html#usecallback

Пример:

export const MyComponent = ({firstName, lastName, age}) => {

    const handleClick = useCallback((e) => {
        e.preventDefault();
        // doSomething
    }, []);

    return <Profile onClick={handleClick} />

}

const Profile = React.memo((onClick) => (
    <button onClick={onClick)>Click me!</button>
));