2

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

我想让组件 A 每秒只更新一次，因为我们使用套接字 IO 来更新实时结果，但是当有 100 个用户时，我们得到的更新太多，页面呈现的方式比我们想要的多看起来像条形图非常快速地上升和下降。

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

4

2 回答 2

3

您正在寻找的是throttling，这将允许函数根据您的要求每秒最多运行一次。

我应该在哪里节流？

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

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

用于演示的可重用组件不需要，甚至不必知道节流。使用它们的容器决定节流和其他行为。仅由于实时提要而需要限制，因此它应该存在于容器处理提要的位置，并且在不影响应用程序其余部分的结构的情况下受到限制。

通过遵循这一原则，可以从一个地方禁用或修改限制。而且容器中不会有不必要的状态突变，无论如何最终都会被“节流组件”节流。

不太重要的实现细节

你可以自己实现它，或者使用像 Lodash 这样实现节流的库（除其他外）。

您可以使用throttle来限制会触发渲染的状态更新Component A

_.throttle(func, [wait=0], [options={}])

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

所以对你func来说，这个函数会触发状态更新，并且wait是 1000。（1000 毫秒是 1 秒）

于 2018-02-13T01:05:09.743 回答
0

您可以使用 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>;
    }
}
于 2018-02-13T01:12:55.833 回答