React Redux，将商店连接到1000个微型组件

Question

I have run into a performance issue with react redux, and I have been reading a bit about, and per what I ended up with, it "seems" like I am doing it all "correct".

I have a situation where I have a production line tracking system, and for each "project" there is 12 steps that it goes through. I have about 60-100 projects going on every week, split into days, easily visible on 1 view.

Now the problem lies in the fact that, each of those 12 steps, are individual components that I connected up using the React Redux Connect function, which basically maps the flat store state of all the different steps, and searched out that exact step from the store, which contains data about when it was done, its status etc, and then it throws that into it as a prop, and uses it to render.

Now, everytime I create an update into the store of the list of steps, it obviouslly rerenders those aprox 1000 components, and checks whether or not they need to rerender, which only 1 of them then does, the one that I clicked on, lets say.

However, the whole computing part of looping through 1000 mapToState functions takes time, and slows down the app and makes it irresponsive.

Is there a smarter way to go about connecting up the components to the store.

As a note, I have thought about this long before writing this, and I have also tried to map up only each project (each set of 12 steps), and have them then render pure components based on that as a parent, sending down each individual step to the child component with the data, however, I don't get any better result.

Thanks in advance for anyone who can help with some guidance or pushing me in the right direction.

Vincent Rye

Answer 1

I'm currently in this situation and am also looking for a definitive answer, but I'll share what I've come up with so far:

For a web app to hit a target of 60fps you have a per-frame budget of 16.67ms per frame.

If you have 1,000 connected components there's some amount of redux bookkeeping (like running mapStateToProps ) that will happen on every store update for every component, and to stay within a frame budget of 16.67ms you'll need that bookkeeping to happen within 0.017ms (or 17,000ns) on average.

From experience, that has been hard to achieve for us.