setState vs replaceState：React状态更新的'温柔一刀'与'彻底翻脸'

大家好，我是小杨，一个摸爬滚打近6年的前端老司机。今天咱们来聊聊React中两个看似相似实则大不同的状态更新方法------setState和replaceState。很多React新手在使用时常常分不清它们的区别，甚至不知道replaceState的存在。别担心，看完这篇你就彻底明白了！

开场小剧场

想象一下，你有一个笔记本（state），记录着你的日常：

javascript 复制代码

{
  mood: '开心',
  todo: ['写代码', '吃饭', '睡觉'],
  score: 100
}

某天你心情变了，想更新状态。这时候React给你两支笔：

一支荧光笔（setState） - 可以高亮修改部分，其他内容保留
一支新钢笔（replaceState） - 直接换掉整页纸，旧内容全不要

选哪支？看完下文你就知道啦！

setState：温柔的局部更新

setState是React中最常用的状态更新方法，它就像是给你的state打补丁------只修改指定的部分，其他部分保持不变。

javascript 复制代码

// 假设当前state
this.state = {
  name: '我',
  age: 25,
  hobbies: ['coding', 'gaming']
};

// 使用setState更新
this.setState({
  age: 26,  // 只更新age
  hobbies: [...this.state.hobbies, 'hiking'] // 添加新爱好
});

// 更新后state
{
  name: '我',       // 保持不变
  age: 26,         // 更新了
  hobbies: ['coding', 'gaming', 'hiking'] // 更新了
}

特点：

合并更新（浅合并）
保留未提及的state
异步操作（可能会被批量处理）
支持回调函数：setState(updater, callback)

适用场景：

大多数状态更新情况
只需要修改部分state时
需要基于前一个state计算新state时

replaceState：狠人的全盘替换

replaceState就比较"绝情"了，它不会合并新旧state，而是直接用新对象完全替换当前state。

javascript 复制代码

// 假设当前state
this.state = {
  name: '我',
  age: 25,
  hobbies: ['coding', 'gaming']
};

// 使用replaceState更新
this.replaceState({
  age: 26  // 只提供age
});

// 更新后state
{
  age: 26  // 只有age，其他都没了！
}

特点：

完全替换（不是合并！）
未提及的state属性会丢失
同样也是异步操作
React v16后已弃用（但了解它有助于理解状态管理）

曾经适用场景（现在不推荐使用）：

需要完全重置state时
从服务器获取完整新state时
确保没有任何旧state残留时

关键区别对比表

特性	setState	replaceState
更新方式	合并更新	完全替换
未提及属性	保留	丢弃
使用频率	高	低（已弃用）
回调支持	支持	支持
异步性	是	是

现代React中的替代方案

虽然replaceState在React v16+已被弃用，但我们仍有其他方式实现类似效果：

使用setState + 展开运算符

javascript 复制代码

this.setState({
  ...newState,  // 完全覆盖
  someKey: 'specialValue' // 特殊处理某些值
});

函数式组件中使用useState

javascript 复制代码

const [state, setState] = useState(initialState);

// 完全替换
setState(newState);

// 保留部分
setState(prev => ({...prev, key: newValue}));

使用useReducer

javascript 复制代码

const [state, dispatch] = useReducer(reducer, initialState);

// 在reducer中可以实现各种更新逻辑
function reducer(state, action) {
  switch(action.type) {
    case 'REPLACE':
      return action.payload; // 完全替换
    case 'UPDATE':
      return {...state, ...action.payload}; // 合并更新
    default:
      return state;
  }
}

实战经验分享

在我早期的一个项目中，曾经因为混淆这两者导致了一个有趣的bug。当时我需要更新用户信息，但保留一些系统状态：

javascript 复制代码

// 错误示范 - 用了replaceState
this.replaceState({
  ...this.state,  // 我天真的以为这样可以保留
  userInfo: newUserData
});

// 结果：所有派生状态都丢失了！

后来发现，replaceState会完全忽略当前state，即使我手动展开了旧state。正确的做法应该是：

javascript 复制代码

// 正确做法 - 使用setState
this.setState({
  userInfo: newUserData
  // 其他状态自动保留
});

总结

setState 是你的日常工具，用于大多数状态更新场景
replaceState 是已经退役的"核选项"，现代React中不再需要
理解它们的区别有助于掌握React的状态管理哲学
函数式组件中，useState和useReducer提供了更灵活的状态管理方式

记住：在React的世界里，大多数时候你需要的都是"温柔"的setState，而不是"彻底翻脸"的replaceState。

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！