react-patterns

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React 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了解：

肯定式逻辑
显式条件判断
条件渲染
利用条件判断进行类型收窄
提前返回