React Ref 其实是这样的

最新推荐文章于 2023-08-17 22:44:44 发布

Python-Jack

最新推荐文章于 2023-08-17 22:44:44 发布

阅读量184

点赞数

分类专栏： Python入门教程100天

本文链接：https://blog.csdn.net/qfluohao/article/details/109284490

版权

本文详细探讨了React中的ref，包括ref的由来、四种使用方式（string ref、callback ref、React.createRef、useRef）以及它们的优缺点。特别强调了string ref的不足和React.createRef及useRef的使用场景。此外，还介绍了ref的转发，讨论了何时以及如何将DOM refs暴露给父组件。

摘要由CSDN通过智能技术生成

ref 的由来

在典型的 React 数据流中，props 是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的 props 来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件/元素。

适合使用 refs 的情况：

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

ref 的四种方式

在 React v16.3 之前，ref 通过字符串（string ref）或者回调函数（callback ref）的形式进行获取。

ref 通过字符获取：

// string ref
class MyComponent extends React.Component {
  componentDidMount() {
    this.refs.myRef.focus();
  }

  render() {
    return <input ref="myRef" />;
  }
}

ref 通过回调函数获取：

// callback ref
class MyComponent extends React.Component {
  componentDidMount() {
    this.myRef.focus();
  }

  render() {
    return <input ref={(ele) => {
      this.myRef = ele;
    }} />;
  }
}

在 v16.3 中，经 0017-new-create-ref 提案引入了新的 API：React.createRef。

ref 通过 React.createRef 获取：

// React.createRef
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus();
  }
  
  render() {
    return <input ref={this.myRef} />;
  }
}

当然还有最近react大力推崇的 hooks：useRef

function MyComponent() {
  const myRef = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    myRef.current.focus();
  };
  return (
    <>
      <input ref={myRef} type="text" />
      <button onClick={onButtonClick}>聚焦</button>
    </>
  );
}