React学习笔记之Ref管理组件引用

2024-01-06 16:57:06

前言

在React中，Ref是一个用于管理组件引用或DOM元素的API。通过Ref，我们可以直接访问DOM节点或组件实例，从而实现一些高级功能，比如焦点管理、表单数据收集、滚动条位置获取等。

Ref的使用

类组件Ref

在类组件中，可以使用createRef方法创建一个ref对象，然后将ref对象传递给子组件，通过this.ref.current访问子组件实例或DOM节点。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  focus() {
    this.inputRef.current.focus();
  }

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

函数组件Ref

在函数组件中，可以使用useRef钩子创建一个ref对象，然后通过ref.current访问DOM节点或组件实例。

const ParentComponent = () => {
  const childRef = useRef();

  return (
    <div>
      <ChildComponent ref={childRef} />
    </div>
  );
};

const ChildComponent = (props) => {
  const inputRef = useRef();

  const focus = () => {
    inputRef.current.focus();
  };

  return (
    <input ref={inputRef} />
  );
};

Ref的最佳实践

尽量避免在组件的render方法中使用ref，因为这会导致每次组件重新渲染时ref都会被重新创建。
仅在需要时使用ref，避免不必要的性能开销。
在子组件中使用ref时，可以通过forwardRef将ref透传给父组件，这样父组件就可以访问子组件的实例或DOM节点。
不要在生产环境中使用ref来保存敏感信息，因为ref可能会被泄露。

Ref的使用示例

焦点管理

可以使用ref来管理组件的焦点，比如在表单中，可以通过ref来让某个输入框获得焦点。

const InputComponent = (props) => {
  const inputRef = useRef();

  const focus = () => {
    inputRef.current.focus();
  };

  return (
    <input ref={inputRef} />
  );
};

表单数据收集

可以使用ref来收集表单数据，比如在表单提交时，可以通过ref来获取所有输入框的值。

const FormComponent = (props) => {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = nameRef.current.value;
    const email = emailRef.current.value;

    // 提交表单数据
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} placeholder="姓名" />
      <input ref={emailRef} placeholder="邮箱" />
      <button type="submit">提交</button>
    </form>
  );
};

滚动条位置获取

可以使用ref来获取滚动条的位置，比如在页面滚动时，可以通过ref来获取滚动条的滚动高度。

const ScrollableComponent = (props) => {
  const scrollRef = useRef();

  const getScrollTop = () => {
    return scrollRef.current.scrollTop;
  };

  return (
    <div ref={scrollRef} style={{ height: '500px', overflow: 'scroll' }}>
      {/* 内容 */}
    </div>
  );
};