如何在TypeScript中使用钩子在React PureComponent中键入道具？

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.memo。

[React.PureComponent用于记忆功能组件内部的昂贵计算。

React.useMemo

而且，很多人不喜欢不使用React.useMemo键入组件，您可以阅读为什么

import React, { memo } from 'react'

type Props = {
  param: string
}

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