Как набирать реквизиты в React PureComponent с использованием хуков в TypeScript?

Question

Я хочу преобразовать PureComponent в запомненный FunctionalComponent, поэтому он будет перерисовываться только при смене реквизита, даже если перерисовывается родитель.

export class MyComp extends React.PureComponent<{param: string}> {
    public render() {
        return <div>{this.props.param}</div>;
    }
}

Я хочу изменить так что это функциональный компонент для использования React Hooks .

export const MyComp: React.FC<{ param: string }> = useMemo(({param}) => {
    return <div>{param}</div>;
}, [param]);

Но вышеописанное не работает и есть несколько проблем:

1. Разрушенный тип param имеет тип any и неверный вывод.
2. Я не могу передать [param] в качестве списка зависимостей для useMemo, поскольку он не был определен в этом контексте.
3. Кажется, нет способа установить тип параметров в списке зависимостей. Это потому, что параметры являются просто переменными из родительской области, а не фактическими аргументами, которые передаются? Если да, как мы можем экспортировать чистый компонент, если мы не знаем, какие реквизиты будут переданы?

Имеет ли смысл иметь что-то подобное?

export const MyComp: React.FC<{ param: string }> = (param) => {
    return useMemo((param) => {
        return <div>{param}</div>;
    }, [param]);
};

Правильно ли запомнен этот компонент? Что если у нас также будет какое-то внутреннее состояние наших данных из хранилища, будут ли они повторно отображаться при их изменении?

export const MyComp: React.FC<{ param: string }> = (param) => {

    return useMemo((param) => {
        // Will it re-render when this changes even if it's memoized?
        const fromStore = useSelector((state: IState) => state.myValue));

        return <div>{param} {fromStore}</div>;
    }, [param]);
};

Я не думаю, что они будут повторно отображаться при изменении значения хранилища. Но в этом случае нам придется поднять fromStore за пределами useMemo, но разве это не означает, что компонент больше не является чистым? Как всякий раз, когда родительский повторный рендеринг, функция MyComp будет запускаться снова (например, снова вычислять fromStore значение).

Мне нравится работать с хуками, но их функциональность и реализация немного абстрактны. Как правильно реализовать типизированный чистый компонент с хуками?

Answer 1

Вы используете неправильный метод здесь, React.memo является эквивалентом React.PureComponent.

React.useMemo используется для запоминания дорогих вычислений внутри компонент функции.

import React, { memo } from 'react'

type Props = {
  param: string
}

export const MyComp = memo(({ param }: Props) => (
  <div>{param}</div>
))

Кроме того, многие предпочитают не вводить компоненты с помощью React.FC, вы можете прочитать, почему здесь