React-更新父組件的滾動位置，setState或使用引用？

Question

我有一個帶有子組件滑塊的react組件。 我已經對組件進行了同步，以使父組件狀態跟蹤滾動位置，並將其作為道具傳遞給滑塊，以使用新值作為滑塊位置來觸發重新渲染。

export default class ParentComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      scrollPosition: 0
   };
 }



  render() {

return (
  <div id="container" onScroll={this.updateScroll}>
    <Slider
        max={'2000px'}
        value={this.state.scrollPosition}

        onChange={(value) => 
            ReactDom.findDOMNode(this).firstChild.scrollTo(value, 0);}}
        showValue={false}
      />
  </div>
);
  }

  updateScroll = (e) => {

    const container = e.target;
    this.setState(function(state, props){
      return {scrollPosition: container.scrollLeft};
    });
  }

}

在onchange下，我找到了dom元素並更新了滾動值，這不會觸發重新渲染。

但是我也可以調用updateScroll函數，將狀態設置為Slider的新值，然后在React生命周期中觸發重新渲染。 但是，我覺得這不是僅更新dom元素的屬性而不重新渲染所有內容的明智的性能。

假設我們也可以使用refs而不用執行dom搜索來更新元素，那么哪種方法是最佳實踐，並且最符合React標准？ 有沒有一種更好的方法來實現這種交互？

在此先感謝您的幫助！

Answer 1

希望我理解正確，您希望介紹滾動位置。 實際上，為每個滾動更新設置狀態都是糟糕的性能。 滾動事件的觸發速率可能高於您需要更新的幀。

為了減輕執行的更新量，可以使用去抖動的方法。 這是debounce的簡短實現。 這將限制您在給定時間內執行的滾動更新量。

export default class ParentComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      scrollPosition: 0
   };

   this.updateScroll = debounce(this.updateScroll, 20);
 }
 ...
}