React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

林书豪

我正在写一个React组件,它可以将ref转发给它的孩子

我发现对于函数组件的返回类型,我可以使用ForwardRefExoticComponentForwardRefRenderFunction但是我不确定它们之间有什么区别。

到目前为止,当使用ForwardRefExoticComponent时,我可以扩展它,而ForwardRefRenderFunction无法?我在这里发布了一个与我的案例有关的问题:如何使用ForwardRefRenderFunction导出forwardRef

如果有人知道他们之间的区别以及他们之间的区别,请帮助我。因为似乎React团队没有关于它们的文档(但是它们在react包中)

彼得·莱恩哈特

ForwardRefExoticComponent

这里得到的定义

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

这里得到的定义

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不支持propTypesdefaultProps,而支持ForwardRefExoticComponent
  • ForwardRefExoticComponent具有$$typeof类型的其他成员symbol
  • 的调用签名ForwardRefRenderFunction需要一个props对象,该对象必须包含成员children和ref对象作为参数,而的调用签名ForwardRefExoticComponent仅将任意形状的props对象作为参数。

一些更多的想法

这两个定义的相互影响最好在函数定义中forwardRef看出

function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

同样,这两个定义之间的巨大差异似乎是ForwardRefExoticComponent(就像所有奇特的组件一样)不是函数组件,而是实际上只是对象,在呈现它们时会对其进行特殊处理。因此评论

注意:外部组件不可调用。

并且由于某些原因,在某些地方这些奇特的组件是必需的。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

React Native中的alignItems和alignSelf有什么区别?

来自分类Dev

React和Express中的路由之间有什么区别

来自分类Javascript

在React中,onChange和onInput有什么区别?

来自分类Javascript

React 16中的hydrate()和render()有什么区别?

来自分类Javascript

React中的state和props有什么区别?

来自分类Dev

在React中,setState和forceUpdate有什么区别

来自分类Dev

React中的createStore和createStoreWithMiddleware有什么区别?

来自分类Dev

React JS中的ComponentWillMount和ComponentDidMount有什么区别?

来自分类Dev

XPath中// * [*]和// * [。]有什么区别?

来自分类Dev

XPath中.//和// *有什么区别?

来自分类Javascript

JavaScript中的&和&&有什么区别?

来自分类Dev

Prolog中的:-和?-有什么区别?

来自分类Dev

“ ::”“。有什么区别?和C ++中的“->”

来自分类Dev

Elixir中==和===有什么区别?

来自分类Linux

在Linux中〜/和〜有什么区别?

来自分类Linux

bash中的“>”和“&>”有什么区别?

来自分类Javascript

JavaScript中的'和'有什么区别?

来自分类Java

Java中的&和&&有什么区别?

来自分类Java

!=和=!有什么区别?在Java中?

来自分类Dev

Golang中=和<-有什么区别

来自分类Java

JavaDoc中的`.`和`#`有什么区别?

来自分类Dev

在golang中,&和*有什么区别?

来自分类Dev

Go中的:=和=有什么区别?

来自分类Dev

Makefile中%和*有什么区别

来自分类Linux

在bash中,$ @和“ $ @”有什么区别?

来自分类Dev

在Oracle中:::和:=有什么区别?

来自分类Dev

Groovy中==〜和!=有什么区别?

来自分类Dev

bash中的`和'有什么区别?

来自分类Dev

R中的[]和[[]]有什么区别?

TOP 榜单

热门标签

归档