javascript - 如何使用 TypeScript 中的钩子(Hook)在 React PureComponent 中键入 Prop ？

Question

我想将一个 PureComponent 转换为一个记忆化的 FunctionalComponent，因此它只会在 props 更改时重新渲染，即使父级重新渲染也是如此。

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]);
};

我认为如果存储值发生变化，它不会重新呈现。但在那种情况下，我们将不得不在 useMemo 之外提升 fromStore，但这是否意味着该组件不再是纯组件了？每当父级重新呈现时，MyComp 函数将再次运行(例如，再次计算 fromStore 值)。

我确实喜欢使用钩子(Hook)，但它们的功能和实现有点抽象。使用 Hook 实现类型化纯组件的正确方法是什么？

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