Ref 与高阶组件

使用ref获取dom

类组件获取ref

🎉 提示

获取原生 dom 方法1. 直接使用ref属性绑定一个字符串，然后通过 this.refs获取所有绑定的ref，不推荐使用，已废弃 方法2. 使用createRef 提前创建，然后通过ref.current来获取 方法3. 回调函数，会把dom作为参数回传 类获取组件实例：可以使用方法2 函数组件，没有组件实例，通过forwardRef高阶函数来转发ref，作为第2个参数传入组件内，组件内即可通过ref属性再绑定到具体的元素上面

函数组件内部子组件获取ref

const Button = React.forwardRef(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)

高阶组件

高阶组件（higher-order component，HOC）：参数为组件，返回值为新组件的函数，用来统一给组件注入一些状态

1. props增强
2. context共享
3. 登录鉴权
4. 生命周期劫持