如何实现具备可控/默认非可控滚动位置且无需ref的React组件？

完全遵循React声明式设计规范，同时支持可控与默认非可控滚动状态，且可避免不必要的二次渲染，核心实现逻辑如下：

核心设计思路 #

参考原生表单组件的受控/非受控设计范式，对外暴露统一的声明式Props接口，将DOM操作逻辑完全封装在组件内部，业务层使用时完全不需要感知ref的存在，符合你要求的「纯粹React way」使用体验：

• 非可控模式：传入defaultScrollTop/defaultScrollLeft指定初始滚动位置，组件内部自行维护滚动状态，不需要外部干预
• 可控模式：传入scrollTop/scrollLeft指定当前滚动位置，所有滚动变更通过onScroll回调通知外部，由外部状态驱动滚动位置更新

性能优化说明 #

你之前遇到的二次渲染问题，核心是ref操作与状态更新的时序错位导致，优化后可完全避免：

• 受控模式下可将滚动位置状态与你依赖滚动位置的业务状态合并为同一个状态更新批次，不会触发多余渲染
• 非受控模式下滚动事件的状态更新可搭配节流/防抖逻辑，避免滚动过程中高频触发重渲染

补充说明：操作滚动、聚焦这类DOM原生行为本身是React虚拟DOM层没有覆盖的原生API，将ref封装在组件内部的操作完全符合React官方规范，不属于所谓的「jQuery模式」，业务层不需要感知内部实现，只需要和普通React组件一样通过Props交互即可。

最简实现示例 #

import { useState, useCallback, useEffect, useRef } from 'react'

const ScrollContainer = ({
  defaultScrollTop = 0,
  scrollTop: propsScrollTop,
  onScroll,
  children,
  ...restProps
}) => {
  // 判断是否为受控模式
  const isControlled = propsScrollTop !== undefined
  // 非受控模式下内部维护滚动状态
  const [innerScrollTop, setInnerScrollTop] = useState(defaultScrollTop)
  const currentScrollTop = isControlled ? propsScrollTop : innerScrollTop
  const containerRef = useRef(null)

  // 内部同步滚动位置，对业务层完全透明
  useEffect(() => {
    if (containerRef.current && containerRef.current.scrollTop !== currentScrollTop) {
      containerRef.current.scrollTop = currentScrollTop
    }
  }, [currentScrollTop])

  const handleScroll = useCallback((e) => {
    const newScrollTop = e.target.scrollTop
    if (!isControlled) {
      setInnerScrollTop(newScrollTop)
    }
    onScroll?.(newScrollTop)
  }, [isControlled, onScroll])

  return (
    <div
      ref={containerRef}
      style={{ overflow: 'auto' }}
      onScroll={handleScroll}
      {...restProps}
    >
      {children}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Heyyy Marco