全解 React 中神秘的 useRef

2023-09-22 04:49:36

React useRef 的原理和应用场景

React.useRef 是一个 React Hooks，它返回一个可变的 ref 对象，该对象具有一个指向当前组件的 DOM 元素或其他可变值的 current 属性。

useRef 的主要应用场景是：

访问 DOM 元素：通过 useRef 可以轻松获取函数组件中的 DOM 元素，例如表单元素、图片、按钮等。
存储可变值：useRef 可以用来存储任何可变值，例如计数器、计时器、滚动位置等。与 useState 不同，useRef 的值不会导致组件重新渲染。

useRef 的高级用法

获取表单元素的值：

const formRef = useRef(null);

const handleSubmit = (event) => {
  event.preventDefault();
  const formData = new FormData(formRef.current);
  // 使用 formData 发送数据
};

return (
  <form ref={formRef} onSubmit={handleSubmit}>
    {/* 表单元素 */}
  </form>
);

实现受控组件：

const inputRef = useRef(null);

const handleChange = (event) => {
  setInputValue(event.target.value);
};

return (
  <input ref={inputRef} value={inputValue} onChange={handleChange} />
);

实现无限滚动：

const listRef = useRef(null);

const handleScroll = (event) => {
  const { scrollTop, scrollHeight, clientHeight } = listRef.current;
  if (scrollTop + clientHeight >= scrollHeight) {
    // 加载更多数据
  }
};

return (
  <div ref={listRef} onScroll={handleScroll}>
    {/* 列表内容 */}
  </div>
);