[英]How to type props in a React PureComponent using hooks in TypeScript?
I want to convert a PureComponent
to a memoized FunctionalComponent
, so it only re-renders if the props change, even if the parent re-renders.我想将
PureComponent
转换为PureComponent
化的FunctionalComponent
,因此它仅在道具更改时重新渲染,即使父级重新渲染。
export class MyComp extends React.PureComponent<{param: string}> {
public render() {
return <div>{this.props.param}</div>;
}
}
I want to change it so it's a functional component in order to use React Hooks .我想改变它,使它成为一个功能组件,以便使用React Hooks 。
export const MyComp: React.FC<{ param: string }> = useMemo(({param}) => {
return <div>{param}</div>;
}, [param]);
But the above doesn't work and there are several problems:但是上面的方法不起作用,有几个问题:
param
is type is any
and not correctly inferred.param
类型是any
并且没有正确推断。[param]
as the dependencies list for useMemo
because it was not defined in this context.[param]
作为useMemo
的依赖项列表useMemo
因为它未在此上下文中定义。 Does it make more sense to have something like this?拥有这样的东西更有意义吗?
export const MyComp: React.FC<{ param: string }> = (param) => {
return useMemo((param) => {
return <div>{param}</div>;
}, [param]);
};
Is this component memoized correctly?该组件是否正确记忆? What if we also have some internal state our data from store, will it re-render when those change?
如果我们还有一些来自 store 的数据的内部状态,当这些数据发生变化时,它会重新呈现吗?
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]);
};
I don't think it will rerender if the store value changes.如果 store 值发生变化,我认为它不会重新呈现。 But in that case we would have to hoist
fromStore
outside useMemo
, but doesn't this mean that the component is not pure anymore?但在这种情况下,我们将不得不葫芦
fromStore
外useMemo
,但不这意味着该组件不是纯粹了? As whenever the parent re-renders the MyComp
function will run again (eg. compute fromStore
value again).每当父级重新渲染时,
MyComp
函数将再次运行(例如,再次计算fromStore
值)。
I do like working with hooks, but their functionality and implementation is a bit abstract.我确实喜欢使用钩子,但它们的功能和实现有点抽象。 What's the correct way of implementing a typed pure component with hooks?
使用钩子实现类型化纯组件的正确方法是什么?
You are using the wrong method here, React.memo
is the equivalent of React.PureComponent
.你在这里使用了错误的方法,
React.memo
相当于React.PureComponent
。
React.useMemo
is used to memoize expensive computations inside a function component. React.useMemo
用于React.useMemo
函数组件内的昂贵计算。
import React, { memo } from 'react'
type Props = {
param: string
}
export const MyComp = memo(({ param }: Props) => (
<div>{param}</div>
))
Also, many people prefer to not type components with React.FC
, you can read why here此外,许多人不喜欢使用
React.FC
键入组件,您可以在此处阅读原因
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.