Vue ref vs React refs

react

vue 的 ref 属性主要用于访问子组件(vue组件)或者子元素(dom元素),

具体写法:<base-input ref="usernameInput"></base-input>

获取实例:this.$refs.usernameInput

如果base-input组件代码如下:

父级组件通过下面的代码聚焦:this.$refs.usernameInput.focus()

注意: 当 ref 和 v-for 一起使用的时候,你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

React的refs转发

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧,说白了就是父组件获取子组件的dom获取实例;

通过下面例子说明流程:

 

以下是对上述示例发生情况的逐步解释:

    1. 通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
    2. 指定 ref 为 JSX 属性,将其向下传递给 <FancyButton ref={ref}>
    3. React 传递 ref 给 forwardRef 内函数 (props, ref) => ...,作为其第二个参数。
    4. 我们向下转发该 ref 参数到 <button ref={ref}>,将其指定为 JSX 属性。
    5. 当 ref 挂载完成,ref.current 将指向 <button> DOM 节点。

 

高阶组件HOC上使用refs转发

高阶组件上使用refs转发,refs 将不会透传下去。这是因为 ref 不是 prop 属性。就像 key 一样,其被 React 进行了特殊处理。如果你对 HOC 添加 ref,该 ref 将引用最外层的容器组件,而不是被包裹的组件。

可以使用 React.forwardRef API 明确地将 refs 转发到内部的 FancyButton 组件。React.forwardRef 接受一个渲染函数,其接收 props 和 ref 参数并返回一个 React 节点,下面是例子:

步骤1:高阶组件logProps通过属性的方式传递ref:

步骤2:

此时 ref.current 就是指向 目标组件,可以调用focus方法

 

以上是 Vue ref vs React refs 的全部内容, 来源链接: utcz.com/z/383643.html

回到顶部