ReactJS中利用useRef实现可控的溢出容器滚动

在React开发中，当我们需要对具有overflow属性的DOM元素进行程序化滚动控制时，常常会遇到一些困惑。尤其是在需要通过用户交互（如点击按钮）来调整滚动位置时，开发者可能会考虑使用useEffect、自定义Hook，甚至直接操作DOM。然而，为了保持React的声明式特性并避免不必要的组件重新渲染，最佳实践是利用useRef钩子来安全地与DOM元素进行交互。

核心概念：useRef与DOM操作

useRef是React提供的一个钩子，它允许我们在函数组件中创建一个可变的引用，该引用在组件的整个生命周期中保持不变。最常见的用途是获取DOM元素的直接引用，从而可以在不引起组件重新渲染的情况下，直接访问和操作这些DOM元素的原生属性和方法。

与直接通过document.getElementById等方式获取DOM元素不同，useRef是React推荐的在组件内部获取DOM引用的方式，它与React的生命周期和渲染机制更好地集成。当useRef的current属性被赋值为一个DOM元素后，我们就可以通过ref.current来调用该元素上的各种原生DOM方法，例如scrollBy()、scrollTo()等。

实现可控滚动：scrollBy方法

scrollBy()是Web API中Element接口的一个方法，它允许我们通过指定水平和垂直方向的偏移量来增量地滚动元素的内容。这对于实现“向左滚动”或“向右滚动”等功能非常适用。

scrollBy()方法接受两个参数：

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

13

查看详情

• x：水平方向的滚动距离（正值向右，负值向左）。
• y：垂直方向的滚动距离（正值向下，负值向上）。

结合useRef和scrollBy()，我们可以在React组件中以一种声明式且高效的方式实现滚动控制。

实践示例

假设我们有一个水平溢出的容器，并希望通过左右按钮来控制其内容滚动。

/* App.css 或 styled-components */
.container {
  width: 200px;
  height: 100px;
  overflow: auto; /* 允许滚动 */
  overflow-y: hidden; /* 隐藏垂直滚动条，只允许水平滚动 */
  border: 1px solid #ccc;
  white-space: nowrap; /* 确保内容在一行显示，导致水平溢出 */
}

.container p {
  width: 300px; /* 故意让p元素的宽度大于容器，造成溢出 */
  height: 100px;
  background-color: yellow;
  line-height: 100px;
  text-align: center;
  margin: 0;
  display: inline-block; /* 确保p元素可以水平排列 */
}

button {
  margin: 10px 5px;
  padding: 8px 15px;
  cursor: pointer;
}

import React, { useRef } from 'react';
// import './App.css'; // 如果CSS在单独文件，请引入

const SCROLL_STEP = 40; // 定义每次滚动的步长

export function Slider() {
  // 1. 创建一个ref，用于引用可滚动的DOM元素
  const scrollableRef = useRef(null);

  // 2. 定义向左滚动的处理函数
  const handleScrollLeft = () => {
    if (scrollableRef.current) {
      // 使用scrollBy方法向左滚动SCROLL_STEP像素
      scrollableRef.current.scrollBy(-SCROLL_STEP, 0);
    }
  };

  // 3. 定义向右滚动的处理函数
  const handleScrollRight = () => {
    if (scrollableRef.current) {
      // 使用scrollBy方法向右滚动SCROLL_STEP像素
      scrollableRef.current.scrollBy(SCROLL_STEP, 0);
    }
  };

  return (
    <>
      <div className="container" ref={scrollableRef}>
        <p>Sample Text1, Sample Text2, Sample Text3, Sample Text4, Sample Text5</p>
      </div>

      <button onClick={handleScrollLeft}>向左</button>
      <button onClick={handleScrollRight}>向右</button>
    </>
  );
}

代码解释：

1. const scrollableRef = useRef(null);: 初始化一个ref，其current属性初始值为null。
2. ref={scrollableRef}: 将scrollableRef绑定到div.container元素上。当组件渲染后，scrollableRef.current将指向这个div的DOM实例。
3. handleScrollLeft / handleScrollRight: 在这些事件处理函数中，我们首先检查scrollableRef.current是否存在（因为在组件挂载之前它可能为null）。然后，直接调用scrollableRef.current.scrollBy(-SCROLL_STEP, 0)或scrollableRef.current.scrollBy(SCROLL_STEP, 0)来执行滚动操作。

为什么这是正确的做法？

• 符合React范式: useRef是React官方提供的与DOM交互的推荐方式，它允许我们在不直接操作DOM的情况下，以一种受控的方式访问底层DOM元素。
• 避免不必要的重新渲染: scrollBy方法直接作用于DOM元素，它不会修改组件的state或props，因此不会触发组件的重新渲染，从而提高了性能。如果使用useEffect来监听某些状态变化并触发滚动，可能会导致不必要的渲染循环。
• 清晰的职责分离: 组件的state和props用于管理UI数据和逻辑，而useRef则用于处理与DOM直接相关的副作用。这种分离使得代码更易于理解和维护。
• 可预测性: 通过useRef获取的DOM引用在组件生命周期内是稳定的，确保了操作的可靠性。

注意事项与扩展

1. 滚动行为: scrollBy是增量滚动。如果需要滚动到特定位置，可以使用scrollTo()方法，它接受一个对象作为参数，包含left和top属性，或者两个数字参数（x, y）。

   // 滚动到最左边
   scrollableRef.current.scrollTo({ left: 0, behavior: 'smooth' });
   // 滚动到最右边
   scrollableRef.current.scrollTo({ left: scrollableRef.current.scrollWidth - scrollableRef.current.clientWidth, behavior: 'smooth' });

   登录后复制
2. 平滑滚动: scrollBy和scrollTo都支持一个可选的behavior属性，设置为'smooth'可以实现平滑滚动效果，提升用户体验。

   scrollableRef.current.scrollBy({ left: SCROLL_STEP, behavior: 'smooth' });

   登录后复制
3. 边界处理: 在实际应用中，你可能需要禁用“向左”按钮当已滚动到最左边时，或禁用“向右”按钮当已滚动到最右边时。这可以通过检查scrollableRef.current.scrollLeft、scrollableRef.current.scrollWidth和scrollableRef.current.clientWidth等属性来判断。
4. 性能优化: 如果滚动操作非常频繁（例如，用户按住按钮不放），可以考虑对handleScrollLeft和handleScrollRight函数进行节流（throttle）或防抖（debounce）处理，以避免过多的DOM操作，但对于简单的点击事件通常不是必需的。
5. 无障碍性: 确保按钮具有适当的aria-label或其他无障碍属性，以便屏幕阅读器用户也能理解其功能。

总结

在ReactJS中，当需要程序化地控制DOM元素的滚动时，useRef结合原生DOM的scrollBy()或scrollTo()方法是最佳实践。这种方法既能有效地实现滚动功能，又能遵循React的开发范式，避免了直接DOM操作带来的潜在问题，同时保证了组件的性能和可维护性。通过这种方式，开发者可以在React应用中构建出响应迅速、用户体验良好的滚动组件。

以上就是ReactJS中利用useRef实现可控的溢出容器滚动的详细内容，更多请关注php中文网其它相关文章！