Javascript 如何使用TypeScript中的挂钩在组件中键入道具？

我想把一个PureComponent转换成一个记忆化的FunctionalComponent，这样它只有在道具改变时才会重新渲染，即使父级重新渲染

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

该组件是否正确地被记录？如果存储区中的数据也有一些内部状态，当这些状态发生变化时，它会重新呈现吗

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

我认为如果存储值发生变化，它不会重新上市。但在这种情况下，我们将不得不从UseMome之外的Store中提取，但这是否意味着该组件不再是纯的？当父级重新呈现时，MyComp函数将再次运行，例如，再次计算fromStore值

---

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

您在这里使用的方法是错误的，与React.PureComponent等效

用于在函数组件内存储昂贵的计算

从“React”导入React，{memo} 类型道具={ 参数：字符串 } export const MyComp=memo{param}:Props=> {param}

---

另外，许多人不喜欢使用React.FC键入组件，您可以了解为什么您在这里使用了错误的方法，这与React.PureComponent是等效的

用于在函数组件内存储昂贵的计算

从“React”导入React，{memo} 类型道具={ 参数：字符串 } export const MyComp=memo{param}:Props=> {param}

---

此外，许多人不喜欢使用React.FC键入组件，您可以阅读why

哇，您是对的。我会试试看它是否管用，但我想它会管用的。有两个函数，这么近的名字有点让人困惑同样感谢React.FC提示，我一直试图找到解决方法，但在所有情况下都找不到解决键入问题的好方法。@XCS np，React.FC所做的一切就是为您键入子项，并确保您不会返回无效的组件值，如undefined，但无论如何，当您尝试渲染组件时，typescript都会捕获该值。还要注意的是，备忘录会将所有道具与参考检查进行比较，所以如果您通过了函数，请确保将它们包装在一起useCallback@XCS也别忘了钩子必须以useWow开头，你是对的。我会试试看它是否管用，但我想它会管用的。有两个函数，这么近的名字有点让人困惑同样感谢React.FC提示，我一直试图找到解决方法，但在所有情况下都找不到解决键入问题的好方法。@XCS np，React.FC所做的一切就是为您键入子项，并确保您不会返回无效的组件值，如undefined，但无论如何，当您尝试渲染组件时，typescript都会捕获该值。还要注意的是，备忘录会将所有道具与参考检查进行比较，所以如果您通过了函数，请确保将它们包装在一起useCallback@XCS也不要忘记挂钩必须从使用开始

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