问题

React17 中对 Ref 的正确使用方式有哪些？

选项

A. React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。

B. 此版本仅支持 React.createRef() 和回调函数两种获取 ref 对象方式。

C. ref 会在 componentDidMount 或 componentDidUpdate 生命周期钩子触发前更新。

D. 自定义组件支持通过传参 ref 属性绑定 Ref 对象。

答案

A、C

纠错

B. 此版本常用的 Refs 创建的方式有 React.createRef() 、回调函数 、useRef()，且还有其他方式。

D. 自定义组件支持通过传参 ref 属性至 class 组件绑定 Ref 对象，而函数组件需要使用 React.forwardRef() 方式。

解答

典型的 React 数据流中，props 是父组件与子组件交互的方式。而 React 提供了一种 Refs 方式，允许我们访问 React 子组件的实例，或者 DOM 元素。

class MyComponent extends React.Component {
  myRef = React.createRef();
  render() {
    return <div ref={this.myRef} />;
  }
}

使用 Refs 的时机

• 管理焦点，文本选择或媒体播放。
• 触发强制动画。
• 集成第三方 DOM 库。

反面使用方式：避免使用 refs 来做任何可以通过声明式实现来完成的事情。举个例子，避免在 Dialog 组件里暴露 open() 和 close() 方法，最好传递 isOpen 属性。

绑定 Ref 的方式

1. 创建 React.createRef() 对象，绑定到 React 元素上。
2. 通过回调 Refs 方式，在完成渲染后获取目标 DOM。
3. 在函数组件中使用 useRef() 方法，创建 ref 对象后传入元素。
4. 在 class 组件中给 React 元素的 ref 属性传入字符串值，通过 this.refs[name] 获取 DOM 元素。

注意：上面的所有方式，如果是给组件传 ref 属性，则需要对此组件进行 Refs 转发至具体的 HTML 元素。

回调 Refs 用于组件时

因常规函数和 class 组件不接收 ref 参数，且 props 中也不存在 ref。因此回调 Refs 仅用于 HTML DOM 元素，如果给组件传函数 Refs 应通过 props 透传。

例如下面的方式：

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

回调 Refs 的参数

回调函数方式的执行时机为：

• 如果组件发生更新渲染前，会先清空旧的 ref 此时回调函数的参数为 null；
• 组件渲染后执行回调函数，此时传入参数为 DOM 元素；
• 
  

资料

https://zh-hans.reactjs.org/docs/forwarding-refs.html

https://zh-hans.reactjs.org/docs/refs-and-the-dom.html

来源

搜索《考试竞技》微信小程序