当 React 组件在 render() 中错误地递归调用自身（如父组件与子组件同名），会触发无限渲染循环，导致页面无任何输出且控制台可能静默失败；正确做法是分离容器组件与展示组件，确保单向渲染流。
当 react 组件在 `render()` 中错误地递归调用自身（如父组件与子组件同名），会触发无限渲染循环，导致页面无任何输出且控制台可能静默失败；正确做法是分离容器组件与展示组件，确保单向渲染流。
你提供的代码存在一个典型的 组件命名与递归渲染陷阱：Counter 类既作为容器组件（管理多个计数器状态），又在 map 中被当作子组件重复渲染自身——这会导致无限递归：每个 <Counter /> 渲染时又尝试渲染 5 个 <Counter />，依此类推，最终触发 React 的渲染保护机制（如 Maximum update depth exceeded 错误），页面完全空白。
✅ 正确解法是职责分离：
- 重命名容器组件（如 Counters）：负责管理 counters 状态、提供数据和事件处理逻辑；
- 新建独立展示组件（如 Counter）：仅接收单个 counter 对象（含 id 和 value）并渲染其 UI，不维护状态或触发递归。
以下是修复后的完整示例：
// Counters.jsx —— 容器组件（管理列表）
import React, { Component } from 'react';
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 0 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 },
{ id: 5, value: 0 }
]
};
render() {
return (
<div>
{this.state.counters.map(counter => (
<Counter key={counter.id} counter={counter} />
))}
</div>
);
}
}
export default Counters;// Counter.jsx —— 展示组件（渲染单个计数器）
import React from 'react';
const Counter = ({ counter }) => (
<div style={{ margin: '8px 0', padding: '8px', border: '1px solid #eee' }}>
<span>ID: {counter.id}</span>
<span style={{ marginLeft: '12px' }}>Value: {counter.value}</span>
</div>
);
export default Counter;⚠️ 关键注意事项：
- key 必须唯一且稳定：原代码中所有 id 均为 1，会导致 React 渲染异常（如状态错乱、更新失效）。已修正为 1–5；
- 避免无意义递归：React 不允许组件在自身 render 中直接/间接渲染自己（除非显式控制终止条件，如递归树组件）；
- 调试技巧：若页面空白，优先检查浏览器控制台是否有 RangeError: Maximum update depth exceeded 或 React Hook "useState" cannot be called 类错误；也可在 render() 开头添加 console.log('rendering') 快速验证是否陷入循环。
通过清晰划分「数据容器」与「UI原子」，不仅能解决当前问题，更符合 React 的可组合性与可维护性设计哲学。
