ForwardRefExoticComponent 和 ForwardRefRenderFunction 在反应中有什么区别?
Whats the difference between ForwardRefExoticComponent and ForwardRefRenderFunction in react?
我正在编写一个可以将 ref 转发给它的孩子的 React 组件
我发现对于 return 类型的函数组件,我可以使用 ForwardRefExoticComponent 和 ForwardRefRenderFunction。但是我不确定它们之间有什么区别。
到目前为止,当使用 ForwardRefExoticComponent 时,我可以扩展它而 ForwardRefRenderFunction 不能?我在这里发布了与我的案例相关的问题:
如果有人知道它们之间的区别以及它们的作用,请帮助我。因为似乎 React 团队没有关于它们的文档(但它们在 react 包中)
ForwardRefExoticComponent
取自here的定义是
interface ExoticComponent<P = {}> {
/**
* **NOTE**: Exotic components are not callable.
*/
(props: P): (ReactElement|null);
readonly $$typeof: symbol;
}
interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
displayName?: string;
}
interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
defaultProps?: Partial<P>;
propTypes?: WeakValidationMap<P>;
}
如果你把它写出来你会得到
interface ForwardRefExoticComponent<P> {
/**
* **NOTE**: Exotic components are not callable.
*/
(props: P): (ReactElement|null);
readonly $$typeof: symbol;
displayName?: string;
defaultProps?: Partial<P>;
propTypes?: WeakValidationMap<P>;
}
ForwardRefRenderFunction
取自here的定义是
interface ForwardRefRenderFunction<T, P = {}> {
(props: PropsWithChildren<P>, ref: ((instance: T | null) => void) | MutableRefObject<T | null> | null): ReactElement | null;
displayName?: string;
// explicit rejected with `never` required due to
// https://github.com/microsoft/TypeScript/issues/36826
/**
* defaultProps are not supported on render functions
*/
defaultProps?: never;
/**
* propTypes are not supported on render functions
*/
propTypes?: never;
}
差异
ForwardRefRenderFunction
不支持 propTypes
和 defaultProps
,而 ForwardRefExoticComponent
支持。
ForwardRefExoticComponent
有一个类型为 symbol
的附加成员 $$typeof
ForwardRefRenderFunction
的调用签名需要一个props
对象,其中必须包含一个成员children
和一个ref对象作为参数,而ForwardRefExoticComponent
的调用签名只接受一个任意形状的道具对象作为参数。
更多想法
这两个定义的相互作用最好在 definition of the forwardRef
function:
中看到
function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
此外,这两个定义之间的一个很大差异似乎是,ForwardRefExoticComponent
(像所有奇异组件一样)不是功能组件,而实际上只是对象,在渲染它们时会对其进行特殊处理。因此评论
NOTE: Exotic components are not callable.
并且出于某种原因,这些奇特的组件在某些地方是必需的。
我正在编写一个可以将 ref 转发给它的孩子的 React 组件
我发现对于 return 类型的函数组件,我可以使用 ForwardRefExoticComponent 和 ForwardRefRenderFunction。但是我不确定它们之间有什么区别。
到目前为止,当使用 ForwardRefExoticComponent 时,我可以扩展它而 ForwardRefRenderFunction 不能?我在这里发布了与我的案例相关的问题:
如果有人知道它们之间的区别以及它们的作用,请帮助我。因为似乎 React 团队没有关于它们的文档(但它们在 react 包中)
ForwardRefExoticComponent
取自here的定义是
interface ExoticComponent<P = {}> {
/**
* **NOTE**: Exotic components are not callable.
*/
(props: P): (ReactElement|null);
readonly $$typeof: symbol;
}
interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {
displayName?: string;
}
interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> {
defaultProps?: Partial<P>;
propTypes?: WeakValidationMap<P>;
}
如果你把它写出来你会得到
interface ForwardRefExoticComponent<P> {
/**
* **NOTE**: Exotic components are not callable.
*/
(props: P): (ReactElement|null);
readonly $$typeof: symbol;
displayName?: string;
defaultProps?: Partial<P>;
propTypes?: WeakValidationMap<P>;
}
ForwardRefRenderFunction
取自here的定义是
interface ForwardRefRenderFunction<T, P = {}> {
(props: PropsWithChildren<P>, ref: ((instance: T | null) => void) | MutableRefObject<T | null> | null): ReactElement | null;
displayName?: string;
// explicit rejected with `never` required due to
// https://github.com/microsoft/TypeScript/issues/36826
/**
* defaultProps are not supported on render functions
*/
defaultProps?: never;
/**
* propTypes are not supported on render functions
*/
propTypes?: never;
}
差异
ForwardRefRenderFunction
不支持propTypes
和defaultProps
,而ForwardRefExoticComponent
支持。ForwardRefExoticComponent
有一个类型为symbol
的附加成员 ForwardRefRenderFunction
的调用签名需要一个props
对象,其中必须包含一个成员children
和一个ref对象作为参数,而ForwardRefExoticComponent
的调用签名只接受一个任意形状的道具对象作为参数。
$$typeof
更多想法
这两个定义的相互作用最好在 definition of the forwardRef
function:
function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
此外,这两个定义之间的一个很大差异似乎是,ForwardRefExoticComponent
(像所有奇异组件一样)不是功能组件,而实际上只是对象,在渲染它们时会对其进行特殊处理。因此评论
NOTE: Exotic components are not callable.
并且出于某种原因,这些奇特的组件在某些地方是必需的。