时间戳

首页 > 解决方案 > 不必要地使用 React.forwardRef() 会带来什么不利吗？

reactjs - 不必要地使用 React.forwardRef() 会带来什么不利吗？

问题描述

我正在使用我的自定义按钮组件。

ref直到在我的按钮组件中不需要。

但现在我必须让它支持ref。

所以，我React.forwardRef()在代码中添加了。

而且效果很好。

这是我的例子。

interface ButtonProps {
  children?: string | number | React.ReactNode;
  style?: CSSProperties;
  className?: string;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  disabled?: boolean;
  block?: boolean;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({disabled, onClick = ()=>{}, className, block, style, children}, ref ) => {
  return (
   <button ref={ref} disabled={disabled} onClick={onClick} className={`Button ${className} ${block ? '--block' : ''}`} style={style}>
     {children}
   </button>
 )});

在我的项目中，我使用了 100 多个 Button 组件，

但只有少数组件需要ref.

这意味着几乎所有 Button 都不需要React.forwardRef().

像上面这样使用的组件可以吗？或者

我是否必须在使用后分离组件？

标签： reactjsreact-hooks

解决方案

forwardRef 非常有用：它是一个很棒的 api，可以对 dom 元素进行抽象，同时提供访问 dom 元素的能力。

流行的 ui 库将其大部分组件导出为forwardRefs。因为它将使开发人员能够访问 dom 元素。所以我认为你做出了一个很好的决定，让你的Button组件 a forwardRef：它使开发人员能够在需要时访问 dombutton元素。

推荐阅读