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元素的属性而不重新渲染所有内容的明智的性能。

鉴于我们也可以使用ref而不对要更新的元素执行dom搜索，那么哪种方法是最佳实践，并且最符合React标准？有没有一种更好的方法来实现这种交互？

在此先感谢您的帮助！

Answer 1

希望我理解正确，您希望介绍滚动位置。实际上，为每个滚动更新设置状态都是糟糕的性能。滚动事件的触发速率可能高于您需要更新的帧。

要减轻执行的更新量，可以使用去抖动的方法。这是debounce的简短实现。它将限制您在给定时间内执行的滚动更新量。

stock = 1000;
new_stock = 1200;
unbl = 0;
% culculate the comulative substraction from the initial stock:
temp = cumsum([stock; -dataf(:,4)]);
dataf(:,5) = temp(2:end); % no need for the first element (1000)
% find when to set a new order:
low_stock = find(dataf(:,5)<300,1);
% start the loop
last_low = 0;
while low_stock~=last_low % if you found a new date with low stock
    last_low = low_stock; % use the new date
    dataf(last_low,6) = 1; % place 1 in the date with low stock
    % find the first line 4 days ahead:
    refill = last_low+find(dataf(last_low:end,2)==dataf(last_low,2)+4,1)-1;
    % add the amount on column 5 in the row above ind_b to 'unbl'
    unbl = unbl+dataf(refill-1,5);
    % add new stock to all rows below after stock arival
    dataf(refill:end,5) = dataf(refill:end,5)+new_stock;
    % find the next time to set a new order:
    low_stock = refill+find(dataf(refill+1:end,5)<300,1);    
end

React-更新父组件的滚动位置，setState或使用引用？

1 个答案: