Question

我正在尝试创建一个网格，它同步不同部分之间的水平滚动（例如标题，然后是下表中的多个部分），这样如果它们水平滚动，每个部分都会随之滚动并保持同步利用保持滚动位置的redux状态。以下解决方案正在运行，但在一个部分中滚动和其他部分更新之间存在明显的滞后。我想看看是否还有减少这种滞后（消除它可能不太可能）。这是我现在的一般结构：

class Grid extends Component {
  constructor(props) {
    super(props)
    this.handleScrollChange = this.handleScrollChange.bind(this)
  }

  handleScrollChange(scrollPos) {
    // dispatches update to redux
    this.props.actions.updateScrollPosition(scrollPos)
  }

  render() {
    return (
      {_.map(this.props.sections, (elem, i) => (
        <GridSection
          key={elem.id}
          scrollPosition={this.props.scrollPosition}
          onScrollHandler={this.handleScrollChange}
        />
      ))}
    )
  }
}

class GridSection extends Component {
  constructor(props) {
    super(props)

    this.handleScroll = this.handleScroll.bind(this)
  }

  componentDidMount() {
    this.gridPanel.addEventListener('scroll', this.handleScroll)
    this.gridPanel.scrollLeft = this.props.scrollPosition
  }

  componentDidUpdate(prevProps) {
    if (prevProps.scrollPosition !== this.props.scrollPosition) {
      this.gridPanel.scrollLeft = this.props.scrollPosition
    }
  }

  componentWillUnmount() {
    this.gridPanel.removeEventListener('scroll', this.handleScroll)
  }

  handleScroll(ev) {
    if (typeof this.props.onScrollHandler !== 'function') return
    this.props.onScrollHandler(ev.target.scrollLeft)
  }

  render() {
    return (
      <div ref={node => (this.gridPanel = node)}>
        // other shit here
      </div>
    )
  }
}

当然，实际的事情比这更复杂，并且很可能还有其他一些性能问题，但我的滚动非常迟钝。有没有人对改善表现有一些建议？

Answer 1

除了对滚动处理程序使用某种去抖动之外，我最近还利用requestAnimationFrame解决了类似的问题，以确保只在UI准备就绪时进行更新。

handleScrollChange(scrollPos) {
  window.requestAnimationFrame(() => {
    this.props.actions.updateScrollPosition(scrollPos)
  });
}

使用React / Redux提高同步水平滚动的性能

1 个答案: