在 React 中，mutation（突变） 指的是直接修改已有的数据，而不是创建新的数据副本。 那么我们应该经常在react中听到“避免突变”这个辞藻，通常在react中推崇的是不可变更新，这根源来自于它的核心设计模式~使用不可变数据来优化组件的状态更新机制。
什么是 Mutation？
Mutation 的核心特征是直接修改原始数据：
// ✅ Mutation - 直接修改原对象
const person = { name: 'John', age: 30 };
person.age = 31; // 直接修改了原对象
// ✅ Mutation - 直接修改数组
const numbers = [1, 2, 3];
numbers.push(4); // 直接修改了原数组
React 中为什么应该避免 Mutation？
React 中依赖于不可变更新来进行高效的渲染和状态管理：
- 状态更新问题
// ❌ 错误的做法 - mutation
const [user, setUser] = useState({ name: 'John', age: 30 });
const editAge = () => {
user.age = 31; // 直接修改状态age
setUser(user); // React 有可能检测不到变化
};
// ✅ 正确的做法 - 不可变更新
const editAge = () => {
setUser({ ...user, age: 31 }); // 创建新对象
};
性能优化依赖 React 使用浅比较来判断是否需要重新渲染：
// React 的浅比较
const shouldUpdate = !Object.is(prevState, newState);
// mutation 会让比较失效
const prevState = { count: 0 };
const newState = prevState;
newState.count = 1; // 同一个引用，React 认为没变化
为什么React主张并且推崇不可变更新
-
可预测性：状态变化更明确，容易跟踪
-
性能优化：便于 React 进行快速的浅比较
-
调试友好：时间旅行调试等功能依赖不可变性
-
并发特性：与 React 18+ 的并发特性更好配合
读到这里相信大家对于Mutation应该有了一个初步的理解，我是大布布将军，一个平凡的前端aicodeing思考者
