react

React Development Guide

This skill provides a comprehensive guide for building React components in the project, focusing on performance, state management thresholds, and modular organization.

1. Component Architecture

1.1 Standard Component Pattern

Every component should follow the standard export pattern to ensure responsiveness (MobX) and performance (Memoization).

import { observer } from 'mobx-react-lite'

const Index = (props: IProps) => {
	const { data } = props

	return (
		<div className='flex flex-col p-4'>
			{/* Content */}
		</div>
	)
}

// ✅ Mandatory: For components needing state responsiveness or performance optimization, use $app.handle wrapper
export default new $app.handle(Index).by(observer).by($app.memo).get()

// ✅ Optional: For simple presentational components, directly use $app.memo
export default $app.memo(Index)

1.2 Module Splitting (Fractal Architecture)

Large modules must be split according to fractal patterns to maintain high maintainability and clear scope.

• Local Components: Use components/ folder within the module directory. Component names should be concise (e.g., Item.tsx, Header.tsx).
• Loop Extraction: Components rendered in loops (e.g., content inside .map()) must be extracted to separate component files to optimize diff rendering performance.
• File Organization:

  module/
  ├── index.tsx                # Entry and layout
  ├── types.ts                 # Local type definitions
  ├── components/              # Local sub-components
  │   ├── List.tsx
  │   ├── Item.tsx             # Loop item component extraction
  │   └── index.ts             # Internal unified export
  ├── models/                  # (Optional) Local MobX models
  │   └── Local.ts
  └── styles/                  # (Optional) CSS Modules
      └── index.module.css
  

1.3 Props Management Pattern

To maintain component cleanliness and reference stability, follow these patterns for declaring and passing Props: