当函数组件的轻骑兵useState 🏇 遇上 类组件的重甲骑士setState 🛡️，一场史诗级的状态更新对决就此展开！究竟谁能更胜一筹？让我们拉开这场技术较量的帷幕！
🎯 第一回合：更新策略大揭秘
useState轻骑兵：闪电突袭 ⚡
function LightCavalry() {
const [count, setCount] = useState(0);
const rapidAttack = () => {
// 三连击！
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
console.log('突袭后:', count); // 还是0！
};
return (
<div className="arena-card cavalry">
<h3>useState轻骑兵</h3>
<p>当前生命值: {count}</p>
<button onClick={rapidAttack}>闪电三连击⚡</button>
<div className="arena-comment">
<p>🔍 观察：虽然发起三次攻击，但只造成一次伤害！</p>
<p>💡 秘诀：useState的更新是<strong>异步</strong>的，使用<strong>闭包中</strong>的当前值</p>
</div>
</div>
);
}
setState重甲骑士：盾墙防御 🛡️
class HeavyKnight extends React.Component {
state = { health: 0 };
shieldWall = () => {
// 三重攻击！
this.setState({ health: this.state.health + 1 });
this.setState({ health: this.state.health + 1 });
this.setState({ health: this.state.health + 1 });
console.log('攻击后:', this.state.health); // 仍是0！
};
render() {
return (
<div className="arena-card knight">
<h3>setState重甲骑士</h3>
<p>当前生命值: {this.state.health}</p>
<button onClick={this.shieldWall}>盾墙三重击🛡️</button>
<div className="arena-comment">
<p>🔍 观察：三次攻击被合并为一次！</p>
<p>💡 秘诀：setState在事件处理中自动<strong>批量更新</strong></p>
</div>
</div>
);
}
}
🧪 实验场：实时对决演示
function StateBattleArena() {
return (
<div className="state-battle-arena">
<div className="arena-header">
<h2>⚔️ 状态更新大对决 ⚔️</h2>
<p>点击按钮查看不同策略的效果！</p>
</div>
<div className="arena-container">
<LightCavalry />
<div className="vs-badge">VS</div>
<HeavyKnight />
</div>
<div className="arena-summary">
<h3>🕵️ 侦探报告：第一回合结果</h3>
<table className="battle-table">
<thead>
<tr>
<th>战士</th>
<th>攻击次数</th>
<th>实际伤害</th>
<th>更新策略</th>
</tr>
</thead>
<tbody>
<tr>
<td>useState轻骑兵</td>
<td>3</td>
<td>1</td>
<td>异步更新，使用快照值</td>
</tr>
<tr>
<td>setState重甲骑士</td>
<td>3</td>
<td>1</td>
<td>批量合并更新</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
🔄 第二回合：高级战术升级
useState的秘技：函数式更新 🎯
function CavalryUpgrade() {
const [count, setCount] = useState(0);
const preciseStrike = () => {
// 精准连击！
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
console.log('攻击后:', count); // 仍是0，但更新正确！
};
return (
<div className="tactics-card">
<h4>轻骑兵升级：函数式箭矢 🏹</h4>
<p>生命值: {count}</p>
<button onClick={preciseStrike}>精准三连射</button>
<p className="tactic-desc">
✅ 使用<code>setCount(prev => prev + 1)</code>保证基于最新状态
</p>
</div>
);
}
setState的奥义：对象合并术 🧩
class KnightUpgrade extends React.Component {
state = { health: 0, shield: 100 };
combinedStrike = () => {
// 组合攻击！
this.setState(prevState => ({
health: prevState.health + 1
}));
this.setState(prevState => ({
health: prevState.health + 1
}));
this.setState({
shield: 50 // 独立更新护盾值
});
};
render() {
return (
<div className="tactics-card">
<h4>重甲骑士升级：分裂盾牌 🛡️</h4>
<p>生命值: {this.state.health} | 护盾: {this.state.shield}</p>
<button onClick={this.combinedStrike}>分裂打击</button>
<p className="tactic-desc">
✅ 函数式更新保证health正确，护盾值独立更新
</p>
</div>
);
}
}
🧩 异步更新解密：事件循环的魔法
关键规则：
- React事件处理中的更新会被批量处理
- 异步代码（setTimeout/Promise）中不会自动批量更新
- React 18中默认所有更新都批量处理
🚀 第三回合：并发模式下的巅峰对决
React 18 新规则：统一竞技场
function ConcurrentArena() {
const [count, setCount] = useState(0);
const unifiedAttack = () => {
// 混合攻击环境
setTimeout(() => {
// React 18中仍会批量更新！
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
}, 1000);
};
return (
<div className="modern-arena">
<h3>React 18：统一竞技场 🏟️</h3>
<div className="arena-content">
<p>当前计数: {count}</p>
<button onClick={unifiedAttack}>发起混合攻击</button>
<div className="arena-comment">
<p>🎉 在React 18中，setTimeout/Promise等异步操作中的更新也会<strong>自动批量处理</strong>！</p>
<p>🚀 使用<code>flushSync</code>可强制立即更新：</p>
<pre>{`import { flushSync } from 'react-dom';
flushSync(() => {
setCount(c => c + 1);
});`}</pre>
</div>
</div>
</div>
);
}
📊 终极对决成绩单
| 特性 | useState轻骑兵 🏇 | setState重甲骑士 🛡️ | React 18统一规则 🏆 |
|---|---|---|---|
| 更新方式 | 异步 | 异步 | 异步 |
| 批量更新 | 自动 | 自动 | 始终自动 |
| 函数更新 | setCount(c => c+1) | setState(p => ({...})) | 相同 |
| 状态类型 | 独立状态变量 | 单一state对象 | 两者皆可 |
| 更新后访问 | 需用useEffect | 需用componentDidUpdate | 需用useEffect |
| 回调函数 | 无内置，需useEffect | setState({}, callback) | 推荐useEffect |
| 并发模式 | 完全支持 | 支持有限 | 全面优化 |
🏆 冠军秘籍：最佳状态策略
函数组件黄金法则
function Champion() {
const [state, setState] = useState(initial);
// ✅ 正确姿势
const handleClick = () => {
// 1. 连续更新使用函数形式
setState(prev => ({ ...prev, count: prev.count + 1 }));
setState(prev => ({ ...prev, count: prev.count + 1 }));
// 2. 获取最新状态用useEffect
useEffect(() => {
console.log('最新状态:', state);
}, [state]);
// 3. 复杂状态考虑useReducer
};
return <button onClick={handleClick}>成为冠军🏆</button>;
}
类组件王者之道
class Veteran extends React.Component {
state = { count: 0 };
handleClick = () => {
// ✅ 终极战术
// 1. 连续更新使用函数形式
this.setState(prev => ({ count: prev.count + 1 }));
this.setState(prev => ({ count: prev.count + 1 }));
// 2. 获取更新后状态用回调
this.setState({ flag: true }, () => {
console.log('状态已更新:', this.state);
});
};
render() {
return <button onClick={this.handleClick}>老兵不死✨</button>;
}
}
🎉 终场：英雄握手言和
最终启示：
- 🚀 新项目首选 useState + 函数式更新
- 🛡️ 维护老项目善用 setState + 回调函数
- 🌟 React 18 中两者更新行为趋于一致
不同策略，各领风骚；掌握精髓，方为大师！
// 终极融合：智慧战士
const WiseWarrior = () => (
<div className="final-revelation">
<h3>🏁 状态管理终极奥义 🏁</h3>
<p>1️⃣ <strong>异步更新</strong>是React性能优化的基石</p>
<p>2️⃣ <strong>函数式更新</strong>解决状态依赖难题</p>
<p>3️⃣ <strong>批量处理</strong>减少不必要的渲染</p>
<p>4️⃣ 在React 18的<strong>并发世界</strong>中，两者终将统一</p>
<div className="warrior-emoji">🧙♂️⚔️🛡️</div>
</div>
);
扫一扫
696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
