Question

您可以在下面的代码中看到，我每100毫秒（使用setInterval检查一次convertProgress是否已更改，如果是，则该组件需要更新。

class TradingThing extends React.Component {
  componentDidMount() {
    const { convertProgress, setConvertProgress } = this.props.store; // mobx store
    this.interval = setInterval(() => {
         if(convertProgress < 100) {
             setConvertProgress(Math.min(convertProgress + 5, 100));
         }
    , 100);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
        <div>Progress from MobX state: {this.props.store.convertProgress}</div>
    );
  }
}

我该如何处理？每100毫秒可以调用一个空函数吗？

注意：我不允许在setState，render，componentWillUpdate和componentDidUpdate中调用getSnapshotBeforeUpdate函数。

Answer 1

代替轮询每个SELECT DISTINCT pb.partno, MIN(pb.purch_price * c.rate) AS 'cheapest_price', pb.supplier FROM price_book pb LEFT JOIN currency c ON c.currency = pb.currency WHERE pb.contract_id <> 0 AND pb.expire_date > Datediff(Day, '31 Dec 1971', Getdate()) AND pb.order_type = 'P' AND pb.condition = 'N' GROUP BY partno, supplier，更好的方法是利用某种Publish-Subscribe机制。通过这种机制，您可以在需要更新组件时“通知”组件，而不必不断（冗余地）检查是否需要更新。

JavaScript中的事件是Publish-Subscribe模式的一个很好的例子。

有许多实现方法，但这是该概念的基本示例：

100ms

然后您的流程应通过调用以下内容来发布其进度：

// This class is utilizing the publish-subscribe pattern
class ProgressUpdater {
  static subscribers = [];

  static publish(progress) {
    this.subscribers.forEach(s => s(progress));
  }

  static subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }
}

您的组件应ProgressUpdater.publish(progress); subscribe进入进度更新事件：

componentDidMount

这里是fiddle，以了解它们如何协同工作

如何通知组件它需要更新

1 个答案: