反应速度慢的原因可能是什么？

Question

I'm supporting React-based CMS and I got stuck on the performance issue where adding 10 new input fields adds 1 second to the browser processing time. It is not my code, and I have no experience in React. I have experience with profiling and have rough idea how rendering engine might work.

I've hooked the ReactCompositeComponent._updateRenderedComponent function to see where the main performance bottleneck is, and the difference seems to be that I am getting a lot of hits. Adding 40 repeater items with calendar inputs causes this difference in performance (the form has to support over 200 inputs, which currently takes 20 seconds):

• div : 250 ms -> 1600 ms, 1300 hits -> 8100 hits
• ConnectedField(props) : 20 ms -> 370 ms, 70 hits -> 2300 hits
• Calendar() : 10 ms -> 300 ms, 20 hits -> 1200 hits (but i only added 40 calendar inputs)
• ConnectedFieldArray() : 30 ms -> 250 ms, 200 hits -> 1300 hits

What might be causing so many hits for just few added elements?

This is the Chrome DevTool profiling graph (click for full size):

Answer 1

There may many reasons That effect the react performance

1. Role of keys while rendering the long lists, Keys are crucial to compare the actual dom with virtual dom.

2. Mutating the object, If you mutate the object, Then ShouldComponentUpdate can't perform the check and triggers the updation life cycle unnecersserly.

3. API calls only in ComponentDidMount, any other lifecycle in mounting part will call render method unnecesserly.

4. Use Debounce/Throttle for input params to avoid unnecessary function/api calls

5. Use the library React virtualized, while rendering the long lists as it will reduce drastic amount of dom elements.

6. Calculate performance with plugin react-addons-perf.

7. Bind Functions early, avoid binding in the render function