如何为React.createRef()设置初始值？类组件滚动场景下的问题求解

类组件React.createRef()设置初始值的解决方法 #

React.createRef()本身不支持传入初始值，默认生成的ref对象current属性为undefined是正常表现，你可以在类组件的constructor中创建ref后直接为current属性赋值，即可实现和useRef(初始值)完全一致的效果：

class ChatComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建存储滚动值的ref
    this.scrollTopRef = React.createRef();
    // 直接赋值初始值，比如初始滚动位置设为0
    this.scrollTopRef.current = 0;
    // 聊天滚动容器ref
    this.chatContainerRef = React.createRef();
  }
}

ref的current属性本身是可自由读写的，只要不在渲染流程中修改，在生命周期、事件回调中修改都是符合React规范的，不会触发组件重渲染，完全满足你避免滚动卡顿的需求。

结合聊天自动滚动需求的完整实现 #

你需要的「仅用户不在浏览旧消息时，新消息更新后自动滚到底部」的逻辑可以按下面的方案实现：

1. 滚动事件触发时直接将滚动高度存入ref，不触发重渲染
2. 组件更新时判断用户当前是否处于聊天容器底部，符合条件才执行滚动

class ChatComponent extends React.Component {
  constructor(props) {
    super(props);
    this.scrollTopRef = React.createRef();
    this.scrollTopRef.current = 0;
    this.chatContainerRef = React.createRef();
  }

  componentDidMount() {
    const container = this.chatContainerRef.current;
    // 首次加载完成直接滚动到底部
    container.scrollTop = container.scrollHeight;
    this.scrollTopRef.current = container.scrollHeight;
    // 绑定滚动监听事件
    container.addEventListener('scroll', this.handleScroll);
  }

  componentDidUpdate(prevProps) {
    // 仅消息列表更新时才判断是否需要滚动，避免不必要的计算
    if (prevProps.messageList !== this.props.messageList) {
      const container = this.chatContainerRef.current;
      // 容错阈值可自行调整，避免滚动未对齐导致的判断误差
      const threshold = 20;
      // 判断用户是否处于容器底部
      const isUserAtBottom = this.scrollTopRef.current + container.clientHeight >= container.scrollHeight - threshold;
      
      if (isUserAtBottom) {
        // 用户在底部时自动滚动到最新消息位置
        container.scrollTop = container.scrollHeight;
        this.scrollTopRef.current = container.scrollHeight;
      }
    }
  }

  componentWillUnmount() {
    // 解绑事件避免内存泄漏
    this.chatContainerRef.current?.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    // 滚动时直接更新ref存储的值，不会触发重渲染，无卡顿问题
    this.scrollTopRef.current = this.chatContainerRef.current.scrollTop;
  }

  render() {
    return (
      <div ref={this.chatContainerRef} style={{ overflowY: 'auto', height: '600px' }}>
        {/* 消息列表内容 */}
        {this.props.messageList.map(msg => <div key={msg.id}>{msg.content}</div>)}
      </div>
    )
  }
}

注意事项 #

• 如果消息内容包含图片、音视频等异步加载资源，需要监听资源加载完成事件后再计算滚动高度，避免scrollHeight计算错误导致滚动不到位。
• 容错阈值可以根据实际交互体验调整，通常设10-30px即可覆盖大部分滚动精度误差场景。

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