Performance Analysis and Component Splitting Strategies in React (DVA + Ant Design)

Introduction: The article reflects on the popular "ZhuanZhuan Beetle" product and describes how the testing team seeks to improve rendering efficiency by intelligently splitting components to reduce render counts.

Technology Stack: DVA + React + Ant Design.

Overview: React adopts functional programming concepts, building applications from reusable, independent components that each handle a specific function. Properly decomposed components can be reused across scenarios, leading to flexible and large‑scale applications.

React Performance Analysis: Rendering consists of initial and update phases. Optimization focuses on the update phase, as the whole page must render initially. The article highlights the lifecycle method shouldComponentUpdate , which defaults to true, causing all child components to re‑render whenever props or state change, despite virtual DOM diff optimizations.

Solutions: Two main approaches are recommended— PureComponent , which performs a shallow comparison of props and state, and ImmutableJS , which provides immutable data structures for deep stores. Correct usage of PureComponent prevents unnecessary renders, while ImmutableJS is beneficial for complex state trees.

Component Splitting Principles: Follow high cohesion and low coupling, adhere to the Single Responsibility Principle, keep component hierarchy shallow, and flatten props/state. The article lists two practical rules: (1) Flatten props/state and preferably inherit from PureComponent; (2) Design split components so their need for updates is easy to determine.

Example: A jar‑coordinate component is extracted as a stateless component. Because it inherits PureComponent, changes in unrelated parent state do not trigger its re‑render, demonstrating the benefit of component isolation.

Visuals: The article includes several diagrams illustrating component update flows, efficient vs. wasteful re‑render scenarios, and the effect of splitting on rendering performance.

Further Reading: For detailed splitting methods and higher‑order component composition, see https://blog.csdn.net/zhendong9860/article/details/76785242.