问题
Here is my data flow:
1: 500+ objects come trough socket in 1-2s bursts
2: Objects are added directly to redux store
3: React table container is connected to redux store (using it as data source) and re-renders for every object.
That many re-renders pretty much kill browser.
What options do I have to buffer incoming objects(events) and send batches to reducer every, say 1s? Even better solution would be to somehow time-limit react rendering (shouldComponentUpdate...), but I doubt it's possible?
回答1:
I would advise looking into RxJS and redux-observable specifically. What you're looking for is debounce operator if I'm not mistaken.
RxJS has a pretty steep learning curve, but I have managed to set up a basic working solution pretty quickly.
I have been inspired by this talk and I encourage you to take a listen.
回答2:
You could use a temporary cache in the reducer as local data. Maybe with a timeout before adding the data to the store object.
回答3:
You can implement your own throttle behavior using setTimeout in shouldComponentUpdate or use something ready like https://github.com/ryo33/react-throttle-render
来源：https://stackoverflow.com/questions/40614510/bursts-of-data-redux-buffering-react-rerendering