我想将一个 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
值)。
我确实喜欢使用钩子(Hook),但它们的功能和实现有点抽象。使用 Hook 实现类型化纯组件的正确方法是什么?
最佳答案
你在这里使用了错误的方法,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
关于javascript - 如何使用 TypeScript 中的钩子(Hook)在 React PureComponent 中键入 Prop ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60464578/