我无法限制组件更新的频率。 组件A具有父组件B.
我希望组件A每秒只更新一次,因为我们使用套接字IO来更新实时结果,但是当有100个用户时,我们获得了太多更新,而且页面呈现的方式比我们给出的更多我们看起来很奇怪,因为条形图很快就会上下起伏。
有没有办法只允许组件A每秒更新一次? 我们是否必须控制组件B将道具传递给组件A的频率?
答案 0 :(得分:2)
您正在寻找限制,这将允许一个函数每秒最多运行一次。
我应该在哪里节流?
原则是在容器组件(承载成为表示组件的道具的状态的组件)中阻止任何会触发这些状态的突变,而不是限制渲染本身
如果我在表示组件中加油,那么现在我希望被限制的所有视图都需要改为“限制组件”,而这些组件不再是纯粹的功能表示组件。
用于演示的可重用组件不需要,甚至不必了解限制。使用它们的容器决定限制和其他行为。仅需要限制因为实时馈送,因此它应该存在于容器处理馈送的位置,并且在那里受到限制而不会影响应用程序其余部分的结构。
通过遵循此原则,可以从一个地方禁用或修改限制。并且容器中不会出现不必要的状态突变,最终会受到“节流组件”的限制。
不太重要的实施细节
您可以自己实现它,或使用像Lodash这样实现限制的库(除其他外)。
您可以使用throttle
来限制会在Component A
_。throttle(func,[wait = 0],[options = {}])
创建一个限制函数,每次最多只调用一次func 每等待几毫秒。
因此,func
将是触发状态更新的函数,wait
将为1000.(1000毫秒为1秒)
答案 1 :(得分:1)
您可以使用shouldComponentUpdate并将最后更新时间存储在变量中,然后立即与上次更新时间进行比较。
class MyComponent extends Component {
constructor() {
this.lastUpdateDate = new Date();
}
shouldComponentUpdate() {
const now = new Date();
var seconds = (now.getTime() - this.lastUpdateDate.getTime()) / 1000;
return seconds >= 1;
}
componentDidUpdate() {
this.lastUpdateDate = new Date();
}
render() {
return <span>My Component</span>;
}
}