react-patterns
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseReact Patterns
React 模式
Core React patterns for component design, state management, and optimization.
组件设计、状态管理与性能优化的核心React模式。
State Philosophy
状态设计理念
Avoid state variables. Prefer derived values and props. Scope state to the smallest subtree that needs it. Use discriminated unions for complex state.
See state-management.md for:
- Derived values over state
- Component boundaries for state scoping
- Context API patterns
- Zustand for complex state
- State machines over multiple useState
避免冗余状态变量，优先使用派生值与props。将状态限定在最小的需要它的子组件树中。针对复杂状态使用区分联合类型。
查看state-management.md了解：
- 优先使用派生值而非状态
- 状态作用域的组件边界划分
- Context API 模式
- 使用Zustand处理复杂状态
- 用状态机替代多个useState
Memoization
记忆化处理
Required for any O(n) operation. Memoize atomically to minimize dependency arrays. Use Loader/Inner pattern to narrow types before useMemo.
See memoization.md for:
- When to useMemo
- Atomic memoization
- useCallback for handlers
- Loader/Inner pattern for type narrowing
任何O(n)操作都需要进行记忆化。以原子化方式进行记忆化，最小化依赖数组。使用Loader/Inner模式在useMemo之前缩小类型范围。
查看memoization.md了解：
- 何时使用useMemo
- 原子化记忆化
- 用useCallback处理事件处理器
- 用于类型收窄的Loader/Inner模式
Conditional Logic
条件逻辑
Use affirmative logic, explicit conditionals, and ternaries over . Early returns for guard clauses.
&&See conditional-logic.md for:
- Affirmative logic
- Explicit conditionals
- Conditional rendering
- Type narrowing with conditionals
- Early returns
使用肯定式逻辑、显式条件判断，优先使用三元运算符而非。使用提前返回作为守卫子句。
&&查看conditional-logic.md了解：
- 肯定式逻辑
- 显式条件判断
- 条件渲染
- 利用条件判断进行类型收窄
- 提前返回