如何使用 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. 似乎无法在依赖项列表中设置参数的类型。这是因为参数只是来自父作用域的变量，而不是传入的实际参数吗？如果是的话，如果我们不知道会传入什么props，我们如何导出一个纯组件？

拥有这样的东西更有意义吗？

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 输入组件，你可以阅读为什么here