Back to Details

react-component-performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Component Performance

React组件性能

Overview

概述

Identify render hotspots, isolate expensive updates, and apply targeted optimizations without changing UI behavior.

识别渲染热点，隔离开销大的更新，并在不改变UI行为的情况下应用针对性优化。

Workflow

工作流程

Reproduce or describe the slowdown.
Identify what triggers re-renders (state updates, props churn, effects).
Isolate fast-changing state from heavy subtrees.
Stabilize props and handlers; memoize where it pays off.
Reduce expensive work (computation, DOM size, list length).
Validate with profiling; avoid speculative changes.

复现或描述性能卡顿问题。
确定触发重复渲染的原因（状态更新、props频繁变化、副作用）。
将快速变化的状态与复杂子树分离。
稳定props和处理函数；在有收益的地方使用缓存。
减少高开销工作（计算、DOM大小、列表长度）。
通过性能分析验证；避免无根据的修改。

Checklist

检查清单

Measure: use React DevTools Profiler or log renders; capture baseline.
Find churn: identify state updated on a timer, scroll, input, or animation.
Split: move ticking state into a child; keep heavy lists static.
Memoize: wrap leaf rows with
```
memo
```
only when props are stable.
Stabilize props: use
```
useCallback
```
/
```
useMemo
```
for handlers and derived values.
Avoid derived work in render: precompute, or compute inside memoized helpers.
Control list size: window/virtualize long lists; avoid rendering hidden items.
Keys: ensure stable keys; avoid index when order can change.
Effects: verify dependency arrays; avoid effects that re-run on every render.
Style/layout: watch for expensive layout thrash or large Markdown/diff renders.

测量：使用React DevTools Profiler或记录渲染情况；获取基准数据。
查找频繁变化项：识别由计时器、滚动、输入或动画触发的状态更新。
拆分：将频繁更新的状态移到子组件中；保持复杂列表静态。
缓存：仅当props稳定时，用
```
memo
```
包裹叶子节点行组件。
稳定props：对处理函数和派生值使用
```
useCallback
```
/
```
useMemo
```
。
避免在渲染中进行派生计算：预先计算，或在缓存的辅助函数中计算。
控制列表大小：对长列表使用窗口化/虚拟化；避免渲染隐藏项。
Keys：确保稳定的key；当顺序可能变化时避免使用索引作为key。
副作用：检查依赖数组；避免每次渲染都重新运行的副作用。
样式/布局：注意开销大的布局抖动或大量Markdown/差异渲染。

Optimization Patterns

优化模式

Isolate ticking state: move a timer/animation into a child component so the parent list does not re-render every tick.
Stabilize callbacks: prefer
```
useCallback
```
for handlers passed to memoized rows.
Split rows: extract list rows into memoized components with narrow props.
Defer heavy rendering: lazy-render or collapse expensive content until expanded.
Prefer derived data outside render: compute summaries with
```
useMemo
```
or helper functions when inputs are stable.

隔离频繁更新的状态：将计时器/动画移到子组件中，这样父列表就不会在每次更新时都重新渲染。
稳定回调函数：对于传递给缓存行组件的处理函数，优先使用
```
useCallback
```
。
拆分行组件：将列表行提取为具有窄props的缓存组件。
延迟复杂渲染：延迟渲染或折叠复杂内容，直到展开时再渲染。
优先在渲染外派生数据：当输入稳定时，使用
```
useMemo
```
或辅助函数计算汇总数据。

Example Reference

示例参考

Load

references/examples.md

when the user wants a concrete refactor example.

当用户需要具体重构示例时，加载

references/examples.md

。