快速理解React钩子函数之useRef

主要作用

1.用来获取dom

  const inputRef = useRef(initValue);

useRef 返回一个可变的ref对象，它的.cuttent属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内持续存在。

如果你将 ref 对象以 <div ref={myRef} 形式传入组件，则无论该节点如何改变，React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点。

官方案例:

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

2.保存一些值

• 注意点：变更 .current 属性不会引发组件重新渲染。

function TestUseRef() {
  const inputRef = useRef(null);
  const valueRef = useRef({ value: "0000" }); //用来储存值
  return (
    <div className="test-use-ref">
      {/* 以下显示一直是0000 ，因为.current属性的变更并不会使组件重新渲染 */}
      <div className="show-input-value">{valueRef.current.value}</div>
      <input
        ref={inputRef}
        onChange={() => {
          valueRef.current.value = inputRef.current.value; //存储的值变为 input输入的值
        }}
      />
    </div>
  );
}