Question

我无法限制组件更新的频率。组件A具有父组件B.

我希望组件A每秒只更新一次，因为我们使用套接字IO来更新实时结果，但是当有100个用户时，我们获得了太多更新，而且页面呈现的方式比我们给出的更多我们看起来很奇怪，因为条形图很快就会上下起伏。

有没有办法只允许组件A每秒更新一次？我们是否必须控制组件B将道具传递给组件A的频率？

Answer 1

您正在寻找限制，这将允许一个函数每秒最多运行一次。

我应该在哪里节流？

原则是在容器组件（承载成为表示组件的道具的状态的组件）中阻止任何会触发这些状态的突变，而不是限制渲染本身

如果我在表示组件中加油，那么现在我希望被限制的所有视图都需要改为“限制组件”，而这些组件不再是纯粹的功能表示组件。

用于演示的可重用组件不需要，甚至不必了解限制。使用它们的容器决定限制和其他行为。仅需要限制因为实时馈送，因此它应该存在于容器处理馈送的位置，并且在那里受到限制而不会影响应用程序其余部分的结构。

通过遵循此原则，可以从一个地方禁用或修改限制。并且容器中不会出现不必要的状态突变，最终会受到“节流组件”的限制。

不太重要的实施细节

您可以自己实现它，或使用像Lodash这样实现限制的库（除其他外）。

您可以使用throttle来限制会在Component A

上触发渲染的状态更新

_。throttle（func，[wait = 0]，[options = {}]）

创建一个限制函数，每次最多只调用一次func   每等待几毫秒。

因此，func将是触发状态更新的函数，wait将为1000.（1000毫秒为1秒）

Answer 2

您可以使用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>;
    }
}

React JS，如何只允许组件每秒更新一次

2 个答案: