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

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

但是上面的方法不行，还有几个问题：

被破坏的 param 是类型 any 并且未正确推断。
我无法将 [param] 作为 useMemo 的依赖项列表传递，因为它未在此上下文中定义。
似乎没有办法在依赖项列表中设置参数的类型。这是因为参数只是来自父作用域的变量而不是传入的实际参数吗？如果是的话，不知道传入什么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 值）。

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

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

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

How to type props in a React PureComponent using hooks in TypeScript?

javascript

typescript

reactjs

react-component

react-hooks